body {
    margin: 30px;
    font-family: Georgia, serif;
    color: #F2EEFF;

    background-color: #1A1859;

    background-image: url("praia.gif");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* TOPO */

.topo {
    background-color: rgba(52, 42, 89, 0.78);

    border: 5px solid #7561C2;

    padding: 20px;

    margin-bottom: 30px;
}

/* LAYOUT */

.layout {
    display: flex;

    gap: 20px;

    align-items: flex-start;
}

/* COLUNA */

.coluna {
    width: 220px;

    background-color: rgba(52, 42, 89, 0.78);

    border: 5px solid #7561C2;

    padding: 15px;
}

.coluna section {
    margin-bottom: 30px;
}

/* POSTS */

main {
    flex: 1;
}

.post {
    background-color: rgba(52, 42, 89, 0.78);

    border: 5px solid #7561C2;

    padding: 20px;

    margin-bottom: 20px;
}

/* LINKS */

a {
    color: #A9A0FF;
}

a:hover {
    color: #FFFFFF;
}

/* LISTAS */

ul {
    padding-left: 20px;
}

/* TÍTULOS */

h1,
h2 {
    margin-top: 0;
}

.subtitulo {
    color: #FFD45A;
}

/* TV DOS GATOS */

.tv {
    position: relative;

    width: 150px;

    margin: 15px auto;
}

.moldura {
    width: 150px;

    display: block;

    position: relative;

    z-index: 3;
}

.tela {
    position: absolute;

    top: 16px;
    left: 13px;

    width: 124px;
    height: 95px;

    overflow: hidden;

    z-index: 1;
}

.canal {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    animation: tv 20s infinite;
}

/* sequência:
   gato 4s → estática 1s
*/

.canal1 {
    animation-delay: 0s;
}

.estatica1 {
    animation-delay: 4s;
}

.canal2 {
    animation-delay: 5s;
}

.estatica2 {
    animation-delay: 9s;
}

.canal3 {
    animation-delay: 10s;
}

.estatica3 {
    animation-delay: 14s;
}

.canal4 {
    animation-delay: 15s;
}

.estatica4 {
    animation-delay: 19s;
}

@keyframes tv {

    0% {
        opacity: 0;
    }

    1% {
        opacity: 1;
    }

    19% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}