@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
@import url('https://css.gg/arrow-right-o.css');
@media screen and (max-width: 500px){
/* MAX WIDTH = TELA MENOR QUE ALGUMA RESOLUÇÃO */    
    p{
    color: yellow;
 }
}
  
  *{
        text-align: center;
        text-decoration: none;
        box-sizing: border-box;

        font-family: 'Space Mono', monospace;
    }

    body{

        width: auto;
        min-height: 100vh;
        background-image: url(../imagens/fundos/ceara_wallpaper_02.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;

        display: flex;
        justify-content: center;
        
    }

    h1{
        color: white;
    }

    .div_login{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        background-color:transparent;
        backdrop-filter: blur(0px);

        width: 310px;
        height: 340px;
        padding: 0.1px;  
        
        border: 1px solid rgba(255, 255, 255, 0.295);
        border-radius: 20px;
        margin-top: 150px;

        overflow: hidden;
        transition: backdrop-filter 1s;
    }

    .text{
        color: white;
        position: relative;
        top: 500px;

        transition: top 1s;
    }

    .div_login:hover .text{
        top: 0;
    }

    .div_login:hover{
        backdrop-filter: blur(10px);
    }

    .input_email{
        padding: 10px;
        font-size: 15px;
        border: none;
        border-radius: 10px;
        outline: none;

        margin-bottom: 10px;
    }

    .input_senha{
        padding: 10px;
        font-size: 15px;
        border: none;
        border-radius: 10px;
        outline: none;
        margin-bottom: 10px;

    }

    .login-button{
        background-color: yellow;
        border: none;
        font-size: 15px;
        padding: 10px;
        width: 210px;
        border-radius: 10px;
        color:black;
    }

    .login-button:hover{
        background-color: deepskyblue;
        cursor: pointer;
    }

    .button_registrar{
        background-color: rgba(0, 0, 0, 0.7);
        border: none;
        font-size: 13px;
        padding: 2px;
        width: 140px;
        border-radius: 10px;
        color:rgb(255, 255, 255);
    }

    .button_registrar:hover{
        text-decoration: underline;
    }

    .button_recuperar{
        border: none;
        font-size: 12px;
        padding: 2px;
        width: 150px;
        border-radius: 10px;
        color:rgb(255, 255, 255);
    }

    .button_recuperar[disabled]{
        opacity: 0.7;
    }