*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.login-body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#3730a3;
    font-family:Arial, Helvetica, sans-serif;
    padding:20px;
}

.titulo{
    text-align:center;
    margin-bottom:40px;
    color:#f3f3f3;
    font-size:32px;
    font-weight:700;
    text-shadow:3px 3px 6px rgba(146, 128, 228, 0.856);
    position:absolute;
    top: 100px;
    left:50%;
    transform:translateX(-50%);

}

.titulo span{
    color:#38bdf8;
}

.login-container{
    width:90%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{
    width:100%;
    max-width:400px;
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow: 15px 15px 35px rgba(110, 219, 223, 0.829);
    text-align:center;
}

.login-card h2{
    color:#3730a3;
    margin-bottom:30px;
    font-size:28px;
}

.login-card input{
    width:100%;
    height:50px;
    margin-bottom:15px;
    padding:0 15px;
    border:2px solid #779be2;
    border-radius:12px;
    font-size:15px;
    outline:none;
    transition:.2s;
}

.login-card input:focus{
    border-color:#3730a3;
    box-shadow:0 0 0 4px rgba(55,48,163,.12);
}

.login-card button{
    width:100%;
    height:50px;
    border:none;
    border-radius:12px;
    background:#3730a3;
    color:white;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.login-card button:hover{
    background:#025a40;
    transform:translateY(-2px);
    box-shadow:0 8px 15px rgba(153, 238, 214, 0.904);
}

.login-card button:active{
    transform:translateY(0);
}

.btn-logout button{
    width: 100%;
    height: 30px;
    border:none;
    border-radius:12px;
    background:#db5c62;
    color:rgb(227, 231, 236);
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:.3s;  
}

.btn-logout button:hover{
    background:#db5c62;
    transform:translateY(-2px);
    box-shadow:0 8px 15px rgba(219, 92, 98, 0.904);
}



@media (max-width:440px){

    .titulo{
        font-size:24px;
        top:100px;
    }

    .login-card{
        padding:30px 20px;
    }

    .login-card h2{
        font-size:24px;
    }

}