*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{

    background:#0f172a;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

}


/* CONTAINER PRINCIPAL */

.container{

    width:380%;
    max-width:430px;

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

    background:#1e293b;

    padding:35px;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(0,0,0,0.4);

}



/* LOGO */


.logo-box img{

    width:140px;
    height:140px;

    

    border-radius:50%;

    padding:8px;

    display:block;

    box-shadow:0 8px 20px rgba(0,0,0,0.35);

}



/* TITULOS */

h1{

    text-align:center;
    font-size:55px;

}


h2{

    color:white;

    text-align:center;

    margin-top:10px;

}


p{

    color:#9ca3af;

    text-align:center;

    margin-bottom:35px;

}



/* CAMPOS */

.campo{

    position:relative;

    margin-bottom:28px;

}


.campo input{

    width:100%;

    padding:16px;

    background:transparent;

    border:2px solid #475569;

    border-radius:8px;

    color:white;

    font-size:16px;

}


.campo input:focus{

    outline:none;

    border-color:#10b981;

}


.campo label{

    position:absolute;

    left:15px;

    top:15px;

    color:#94a3b8;

    transition:.25s;

    pointer-events:none;

}


.campo input:focus+label,
.campo input:valid+label{

    top:-10px;

    left:10px;

    padding:0 6px;

    background:#1e293b;

    color:#10b981;

    font-size:13px;

}



/* BOTÃO */

button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:8px;

    background:#7c3aed;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}


button:hover{

    background:#059669;

}



/* MENSAGEM */

#mensagem{

    margin-top:18px;

    color:#ef4444;

    text-align:center;

}