:root {
    --color-red: rgb(252, 47, 40);
    --color-erro: rgb(252, 94, 94);
    --color-ok: rgb(147, 255, 147);
    --color-red-hover: rgb(167, 74, 71);
    --color-black: black;

    --ff-roboto: "Roboto", 'sans';
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--ff-roboto);
}

a,
ul,
li {
    text-decoration: none;
    list-style: none;
}

input {
    outline: none;
}

header {
    height: 10vh;
    width: 100%;
    display: flex;
    padding: 50px 20%;
    align-items: center;
    font-family: var(--ff-roboto);
    font-weight: bold;
    justify-content: space-between;
    z-index: 10;

    p {
        font-size: 20px;
    }
}

.login {
    width: 100%;
    height: calc(90vh - 40px);

    .hero {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15%;
        background-image: url("../images/logo-aluno-monitor.png");

        #loginForm {
            background-color: #f5f5f5;
            padding: 20px;
            width: 500px;
            display: flex;
            flex-direction: column;
            gap: 30px;

            h1 {
                padding: 0 20px;
                border-left: 4px solid var(--color-red);
            }

            .ra,
            .senha {
                border-radius: 5px;
                display: flex;

                label {
                    width: 10%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                input {
                    width: 90%;
                    padding: 10px;
                    border: none;
                    border-radius: 10px;
                }
            }

            button {
                background-color: rgb(219, 219, 219);
                border: none;
                padding: 10px;
                border-radius: 50px;
                color: white;
                font-size: 15px;
                font-weight: bolder;
                transition: .2s ease-in-out;

                &:hover {
                    background-color: var(--color-red);
                    color: white;
                    cursor: pointer;
                }
            }

        }

    }
}

@keyframes pullUp {
    0% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes popUp {
    0% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(0);
    }
}

#mensagemLogin{
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    width: fit-content;
    border-radius: 50px;
    padding: 10px 20px;
    margin: 0 10px;
    z-index: 999;
}

.erro {
    background-color: var(--color-erro);
    color: white;
}

.ok {
    background-color: var(--color-ok);
    color: white;
}

.alert {
    background-color: rgb(255, 255, 137);
    color: black;
}

@keyframes shake {
    0% {
        transform: translateX(-10px);
        background-color: rgba(255, 162, 162, 0.753);
    }

    20% {
        transform: translateX(10px);
        background-color: rgba(255, 162, 162, 0.753);
    }

    40% {
        transform: translateX(-10px);
    }

    60% {
        transform: translateX(10px);
        background-color: #f5f5f5;
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        transform: 0;
    }
}

@media (max-width: 600px) {
    .info{
        display: none;
    }
    
    header{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    body{
        max-height: 98vh;
    }
}