/*
=====================================================
BODY
=====================================================
*/

body{

margin:0;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

position:relative;

font-family:'Inter',sans-serif;

}


/*
=====================================================
FUNDO ANIMADO
=====================================================
*/

.fundo{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:
radial-gradient(
circle at top left,
rgba(79,124,255,.25),
transparent 30%
),

radial-gradient(
circle at bottom right,
rgba(0,212,255,.15),
transparent 30%
),

linear-gradient(
135deg,
#020617,
#071132,
#020617
);

animation:fundoAnimado 10s infinite alternate;

z-index:-1;

}

@keyframes fundoAnimado{

0%{

transform:scale(1);

}

100%{

transform:scale(1.15);

}

}


/*
=====================================================
CONTAINER
=====================================================
*/

.container{

width:100%;

display:flex;

align-items:center;

justify-content:center;

padding:30px;

}


/*
=====================================================
CARD LOGIN
=====================================================
*/

.card-login{

width:100%;

max-width:470px;

padding:40px;

border-radius:30px;

background:rgba(
12,
20,
45,
.75
);

backdrop-filter:blur(25px);

border:1px solid rgba(
255,
255,
255,
.06
);

box-shadow:

0 30px 80px rgba(
0,
0,
0,
.45
);

}


/*
=====================================================
TOPO
=====================================================
*/

.topo-login{

margin-bottom:30px;

text-align:center;

}

.topo-login h1{

font-size:42px;

font-weight:800;

color:#fff;

margin:0 0 10px;

}

.topo-login p{

color:#8ca0d7;

font-size:15px;

}


/*
=====================================================
FORM
=====================================================
*/

.campo{

margin-bottom:22px;

}

.campo label{

display:block;

margin-bottom:10px;

font-size:14px;

font-weight:600;

color:#c7d2fe;

}

.campo input{

width:100%;

height:58px;

padding:0 20px;

border:none;

border-radius:18px;

background:rgba(
255,
255,
255,
.04
);

border:1px solid rgba(
255,
255,
255,
.05
);

color:#fff;

font-size:15px;

outline:none;

transition:.3s;

}

.campo input:focus{

border-color:#4f7cff;

box-shadow:

0 0 20px rgba(
79,
124,
255,
.25
);

}


/*
=====================================================
BOTÃO
=====================================================
*/

.botao-login{

width:100%;

height:58px;

border:none;

border-radius:18px;

background:linear-gradient(
135deg,
#4f7cff,
#315efb
);

color:#fff;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.botao-login:hover{

transform:translateY(-2px);

box-shadow:

0 15px 30px rgba(
79,
124,
255,
.35
);

}


/*
=====================================================
ALERTAS
=====================================================
*/

.alerta-sucesso,
.alerta-erro{

padding:16px;

margin-bottom:20px;

border-radius:14px;

font-size:14px;

}

.alerta-sucesso{

background:rgba(
34,
197,
94,
.15
);

color:#4ade80;

}

.alerta-erro{

background:rgba(
239,
68,
68,
.15
);

color:#f87171;

}


/*
=====================================================
RESPONSIVO
=====================================================
*/

@media(max-width:768px){

.card-login{

padding:28px;

}

.topo-login h1{

font-size:32px;

}

}