body {
    background: var(--color-background2);
}

.top-nav {
    background-color: var(--color-background);
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    animation-name: null;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: reverse-alternate;
    animation-fill-mode: forwards;
    z-index: 10;
}

.texto {
    position: relative;
    z-index: 5;
    width: 50vw;
    padding: 3rem;
    top: 10rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    margin-bottom: 7rem;
}

div.texto p {
    font-family: 'poppins', sans-serif;
    font-size: 12pt;
    line-height: 18pt;
}

div.texto h2 {
    font-family: 'logo', sans-serif;
    font-size: 35pt;
}

div.texto h2 span {
    color: var(--color-primary);
}

.content {
    display: flex;
    width: 100vw;
    height: fit-content;
    position: relative;
    padding-bottom: 7rem;
    justify-content: center;

}

#eu {
    right: unset;
    left: -83rem;
    animation-name: null;
    transform: scale(0.5);
    top: -33rem;
}

#c4d-azul {
    top: 5rem;
    bottom: 0px;
    left: 60rem;
    animation-name: aparecer-opacidade;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: reverse-alternate;
    animation-fill-mode: backwards;
}

#c4d-roxa {
    top: 58rem;
    right: -3rem;
    filter: blur(8px);
    -webkit-filter: blur(3px);
    transform: scale(2);
    z-index: 8;
    animation-name: aparecer-opacidade;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: reverse-alternate;
    animation-fill-mode: backwards;
}

.imagens-home {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0rem;
}

.texto p.frase-inspiradora {
    font-family: 'discursiva', serif;
    color: var(--color-primary);
    font-size: 40pt;
    line-height: 25pt;
    text-align: right;
}

@media screen and (max-width: 1920px) {
    .content {
        overflow: clip;
    }
}

@media screen and (max-width: 1638px) {
    .texto {
        width: 70vw;
        background: rgba(0, 0, 0, 0.8);
    }

    div.texto h2 {
        font-size: 29pt;
    }
}

@media screen and (max-width: 1440px) {
    .texto {
        width: 66vw;
        background: rgba(0, 0, 0, 0.8);
    }

    div.texto h2 {
        font-size: 29pt;
    }
}

@media screen and (max-width: 1366px) {/*até 1366*/
    .content {
        overflow: hidden;
    }

    div.texto h2 {
        font-size: 24pt;
    }

    .texto {
        width: 66vw;
        background: rgba(0, 0, 0, 0.8);
    }

}


@media screen and (max-width: 1280px) {/*até 1280*/
    .content {
        overflow: hidden;
    }

    div.texto h2 {
        font-size: 24pt;
    }

    .texto {
        width: 66vw;
        background: rgba(0, 0, 0, 0.8);
    }

}


@media screen and (max-width: 1024px) {/*telas pequenas, laptops*/
    .content {
        overflow: hidden;
    }

}/*fim telas pequenas, laptops*/

@media screen and (max-width: 894px) {
    .texto {
        width: 70vw;
        background: rgba(0, 0, 0, 0.8);
    }

    div.texto h2 {
        font-size: 22pt;
    }
}

@media screen and (max-width: 800px) {/*kindle*/
    .texto {
        width: 95vw;
        background: rgba(0, 0, 0, 0.8);
    }
}/*fim kindle*/

@media screen and (max-width: 768px) {/*smartphones iPads, tablets*/
    .content {
        overflow: hidden;
    }

}

@media screen and (max-width: 480px) {/*dispositivos móveis*/
    .content {
        overflow: hidden;
    }
}