@media screen and (min-width: 1920px) {
    .textos-principal {
        left: -30rem;
    }

    #eu {
        transform: scale(1);
        right: 22rem;
        top: 9rem;
      }
}
@media screen and (max-width: 1920px) {
    .content {
        overflow: clip;
    }

    .textos-principal {
        left: -28rem;
    }

    #eu {
        right: 18rem;
    }

    #c4d-roxa {
        right: 12rem;
    }

    #c4d-azul {
        right: -8rem;
    }
}

@media screen and (max-width: 1638px) {

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

    .textos-principal {
        left: -16rem;
    }

    #eu {
        right: 13rem;
    }

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

@media screen and (max-width: 1560px) {
    #c4d-azul {
        right: -8rem;
        top: 18rem;
    }

    #c4d-roxa {
        right: 2rem;
        top: 14rem;
    }

    #eu {
        right: 6rem;
    }

    .textos-principal {
        left: -19rem;
    }

}

@media screen and (max-width: 1440px) {

    .textos-principal {
        left: -15rem;
    }

    h2.ola {
        font-size: 42pt;
        font-family: 'poppins', sans-serif;
    }

    h2.maycon {
        font-size: 83pt;
    }

    h3.principal {
        font-size: 16pt;
    }

    a.to-portfolio {
        font-size: 16pt;
    }

    a.to-portfolio:hover {
        font-size: 18pt;
    }

    #c4d-roxa {
        right: -2rem;
    }

    #c4d-azul {
        right: -28rem;
        top: 12rem;
    }

    #eu {
        transform: scale(60%);
        top: -15rem;
        right: 3rem;
    }

}

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

    .textos-principal {
        left: -15rem;
    }

    h2.ola {
        font-size: 42pt;
        font-family: 'poppins', sans-serif;
    }

    h2.maycon {
        font-size: 83pt;
    }

    h3.principal {
        font-size: 16pt;
    }

    a.to-portfolio {
        font-size: 16pt;
    }

    a.to-portfolio:hover {
        font-size: 18pt;
    }

    #c4d-roxa {
        right: -2rem;
    }

    #c4d-azul {
        right: -28rem;
        top: 12rem;
    }

    #eu {
        transform: scale(60%);
        top: -15rem;
        right: 3rem;
    }


}


@media screen and (max-width: 1280px) {/*até 1280*/

    .content {
        overflow: hidden;
    }

    .textos-principal {
        left: -15rem;
    }


    h2.ola {
        font-size: 39pt;
        font-family: 'poppins', sans-serif;
    }

    h2.maycon {
        font-size: 68pt;
    }

    h3.principal {
        font-size: 16pt;
    }

    a.to-portfolio {
        font-size: 16pt;
    }

    a.to-portfolio:hover {
        font-size: 18pt;
    }

    #c4d-roxa {
        right: -2rem;
    }

    #c4d-azul {
        right: -28rem;
        top: 12rem;
    }

    #eu {
        transform: scale(60%);
        top: -15rem;
        right: 3rem;
    }

}


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

    #eu {
        right: -4rem;
    }

    #c4d-roxa {
        right: -9rem;
    }

}

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

    .textos-principal {
        left: -9rem;
        top: -7rem;
    }

    #eu {
        right: -4rem;
    }

    #c4d-roxa {
        right: -9rem;
    }

}/*fim telas pequenas, laptops*/



@media screen and (max-width: 894px) {

    .textos-principal {
        left: -2rem;
        top: -7rem;
    }

    h2.ola {
        font-size: 39pt;
        font-family: 'poppins', sans-serif;
    }

    h2.maycon {
        font-size: 68pt;
    }

    h3.principal {
        font-size: 16pt;
    }

    a.to-portfolio {
        font-size: 16pt;
    }

    a.to-portfolio:hover {
        font-size: 18pt;
    }

    #c4d-roxa {
        right: -9rem;
        top: 36rem;
    }

    #c4d-azul {
        right: -28rem;
        top: 24rem;
    }

    #eu {
        transform: scale(60%);
        top: 11rem;
        right: -7rem;
    }

    .logo {
        font-family: 'logo', sans-serif;
        font-size: 7rem;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        text-align: center;
    }

    .content-logo h1.glitch {
        color: white;
        font-family: 'logo', sans-serif;
        font-weight: 800;
        position: relative;
        font-size: 7rem;
        padding: 30px;
        text-align: center;
        clip: rect(0px, 0px, 0px, 0px);
        z-index: 0;

        background: -webkit-linear-gradient(0.2turn, var(--color-white), var(--color-white));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

    }
}

@media screen and (max-width: 894px) {
    #eu {
        right: -2rem;
        top: 7rem;
    }

    .textos-principal {
        left: -4rem;
    }

    #c4d-roxa {
        right: -10rem;
        top: 24rem;
    }

    #c4d-azul {
        right: -28rem;
        top: 16rem;
    }
}

@media screen and (max-width: 810px) {
    #eu {
        top: 16rem;
        right: -6rem;
    }
}

@media screen and (max-width: 800px) {/*kindle*/


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

    .textos-principal {
        left: -2rem;
        top: 7rem;
    }

    .imagens-home {
        align-items: start;
    }

    h2.ola {
        font-size: 39pt;
        font-family: 'poppins', sans-serif;
    }

    h2.maycon {
        font-size: 68pt;
    }

    h3.principal {
        font-size: 16pt;
    }

    a.to-portfolio {
        font-size: 16pt;
    }

    a.to-portfolio:hover {
        font-size: 18pt;
    }

    #c4d-roxa {
        right: -9rem;
        top: 36rem;
    }

    #c4d-azul {
        right: -28rem;
        top: 20rem;
    }

    #eu {
        transform: scale(60%);
        top: 11rem;
        right: -7rem;
    }

    .logo {
        font-family: 'logo', sans-serif;
        font-size: 7rem;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        text-align: center;
    }

    .content-logo h1.glitch {
        color: white;
        font-family: 'logo', sans-serif;
        font-weight: 800;
        position: relative;
        font-size: 7rem;
        padding: 30px;
        text-align: center;
        clip: rect(0px, 0px, 0px, 0px);
        z-index: 0;

        background: -webkit-linear-gradient(0.2turn, var(--color-white), var(--color-white));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

    }
}

/*fim kindle*/

@media screen and (max-width: 768px) { /*smartphones iPads, tablets*/

    .content {
        overflow: hidden;
    }

    .imagens-home {
        align-items: center;
    }

    .textos-principal {
        left: 0rem;
        top: -8rem;
        padding: 1rem;
    }

    h2.ola {
        font-size: 32pt;
        font-family: 'poppins', sans-serif;
        margin-bottom: 0.5rem;
    }

    h2.maycon {
        font-size: 59pt;
    }

    h3.principal {
        font-size: 10.5pt;
        width: 100%;
        text-align: center;
    }

    a.to-portfolio {
        font-size: 16pt;
    }

    a.to-portfolio:hover {
        font-size: 18pt;
    }

    #c4d-roxa {
        right: -12rem;
        top: 36rem;
    }

    #c4d-azul {
        right: -30rem;
        top: 14rem;
    }

    #eu {
        transform: scale(60%);
        top: 11rem;
        right: -7rem;
    }

    .logo {
        font-family: 'logo', sans-serif;
        font-size: 4rem;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        text-align: center;
    }

    .content-logo h1.glitch {
        color: white;
        font-family: 'logo', sans-serif;
        font-weight: 800;
        position: relative;
        font-size: 4rem;
        padding: 30px;
        text-align: center;
        clip: rect(0px, 0px, 0px, 0px);
        z-index: 0;

        background: -webkit-linear-gradient(0.2turn, var(--color-white), var(--color-white));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

    }

}

@media screen and (max-width: 480px) {
    /*dispositivos móveis*/

    
    .content {
        overflow: hidden;
    }
    
    #eu {
        top: 15rem;
    }

    h3.principal {
        font-size: 12pt;
        width: 100%;
        text-align: center;
    }
}

@media screen and (max-width: 384px) {/*dispositivos móveis*/

    .content {
        overflow: hidden;
    }

    h2.ola {
        font-size: 29pt;
        left: 1rem;
        position: relative;
    }

    h2.maycon {
        font-size: 49pt;
        position: relative;
        left: 1rem;
    }

    h3.principal {
        font-size: 10pt;
        width: 100%;
        text-align: center;
    }

    #eu {
        transform: scale(60%);
        top: 9rem;
        right: -9rem;
    }
}

@media screen and (max-width: 384px) {
    #eu {
        top: 12rem;
    }
}