@charset "UTF-8";

/* Telas muito pequenas */
@media screen and (max-width: 360px) {

    main {
        gap: 20px;
    }

    #container-home h1 {
        font-size: 2.2em;
        color: var(--cor-texto-principal);
    }

    #container-home p {
        font-size: 0.95em;
        color: var(--cor-texto-secundaria);
    }

    .formulario p {
        max-width: 260px;
    }
}

/* Tablets / telas médias */
@media screen and (min-width: 768px) {

    .menu-icon {
        width: 30px;
    }

    #container-home {
        max-width: 500px;
    }

    .registros {
        max-width: 500px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

}

/* Desktop padrão */
@media screen and (min-width: 1028px) {

    body {
        color: var(--cor-texto-principal);
    }

    main {
        grid-template-columns: auto 45% 45% auto;
        grid-template-rows: auto;
        align-items: center;
    }

    #container-home {
        grid-row: auto;
        grid-column: 2;
        max-width: 420px;
    }

    #container-home h1 {
        font-size: 3.6em;
        color: var(--cor-texto-principal);
    }

    #container-home p {
        font-size: 1.1em;
        color: var(--cor-texto-secundaria);
    }

    .registros {
        grid-row: auto;
        grid-column: 3;
        max-width: 520px;
    }

    .registros h1 {
        color: var(--cor-principal);
        font-size: 2.4em;
    }

    .formulario input[type="text"],
    .formulario input[type="password"],
    .formulario input[type="email"] {
        font-size: 0.9em;
    }

    .formulario p.user input {
        height: 50px;
    }

    .formulario p.remember-me,
    .formulario p.questions {
        color: var(--cor-texto-secundaria);
        font-size: 1em;
    }

    .formulario p.questions a {
        color: var(--cor-principal);
    }

    .formulario p.send input {
        width: 110px;
        height: 45px;
        font-size: 0.85em;
        background-color: var(--cor-principal);
        color: var(--cor-preto-suave);  
        transition: transform 0.3s ease;
    }

    .formulario p.send input:hover {
        transform: scale(1.05);
        cursor: pointer;
        background-color: var(--cor-terciaria);
    }

    .formulario p.questions a:hover {
    color: var(--cor-terciaria);
}
}

/* Telas grandes */
@media screen and (min-width: 1440px) {

    #container-home {
        max-width: 480px;
    }

    #container-home h1 {
        font-size: 4em;
    }

    #container-home p {
        font-size: 1.2em;
    }

    .registros {
        max-width: 560px;
    }

}