/* Adicione estas regras no final do seu CSS para criar media queries */
@media screen and (max-width: 1440px) {
    :root {
        font-size: 92%;
    }

}


@media screen and (max-width: 1370px) {
    :root {
        font-size: 85%;
    }

}

@media screen and (max-width: 1050px) {
    :root {
        font-size: 75%;
    }

}

/*@media screen and (max-width: 910px) {
    :root {
        font-size: 80%;
    }
}

@media screen and (max-width: 830px) {
    :root {
        font-size: 78%;
    }
}*/

@media screen and (max-width: 975px) {
    :root {
        font-size: 75%;
    }

    .principal {
        flex-direction: column;
    }

    .principal__login {
        top: auto;
        left: auto;
        margin-top: 8.6rem;
        position: relative !important;
        height: 50%;
    }

    .principal__img {
        width: 100%;
        height: auto;

    }

    .principal__img img {
        width: 100%;
        margin-top: 5rem;
    }

}