@charset "UTF-8";

/*Typical Devices Breakpoints
-----------------------------
Pequenas telas: até 600px
Celular: 600px até 768px
Tablet: 769px até 992px
desktop: 993 até 1200px
Grandes telas: 1201px e acima
*/

#login {
    display: none;
    position: fixed;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: rgba(126, 126, 126, 0.418);
    backdrop-filter: blur(2px);
}

#login.exib {
    display: flex;
}

#loginForm {
    width: 70%;
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 15px;
    border-radius: 15px;
    gap: 15px;
}

#loginForm > h1 {
    font-size: 25px;
    text-align: center;
}

#errorMenssage {
    display: none;
    width: fit-content;
    background-color: #FFDFDF;
    border-color: red;
    padding: 5px;
    border: 1px red solid;
    margin: 5px 0;
}

.loginInputs {
    display: block;
    width: 100%;
}

.loginInputs > label {
    display: block;
}

.loginInputs > input {
    width: 100%;
    height: 30px;
}

#submitButton {
    margin: 15px auto;
    width: 100%;
}

#submitButton > input {
    display: none;
}

#submitButton > label {
    display: block;
    width: 100%;
    font-size: 15px;
    color: white;
    background-color: #04234C;
    padding: 15px 50px;
    text-align: center;
    cursor: pointer;
}

@media screen and (min-width: 600px) and (max-width: 768px) {
    #loginForm {
        width: 420px;
    }
}

@media screen and (min-width: 769px) {
    #login {
        backdrop-filter: blur(0.2vw);
    }
    
    #loginForm {
        width: 40%;
        padding: 1vw;
        border-radius: 1vw;
        gap: 1vw;
    }
    
    #loginForm > h1 {
        font-size: 1.7vw;
    }
    
    #errorMenssage {
        padding: 0.5vw;
        border: 0.1vw red solid;
        margin: 0.5vw 0;
    }
    
    .loginInputs > input {
        height: 2.5vw;
    }

    .loginInputs > label {
        font-size: 1.3vw;
    }
    
    #submitButton {
        margin: 1vw auto;
    }
    
    #submitButton > label {
        font-size: 1.3vw;
        padding: 1vw 1vw;
    }
}