@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

body{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:url("../images/background.jpg") center center/cover no-repeat;

position:relative;

overflow:hidden;

}

.overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:linear-gradient(rgba(5,25,70,.75),rgba(5,25,70,.75));

}

/* Card */

.login-card{

position:relative;

z-index:2;

width:420px;

padding:45px;

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

backdrop-filter:blur(18px);

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

border-radius:20px;

box-shadow:0 20px 60px rgba(0,0,0,.45);

text-align:center;

animation:fade .8s ease;

}

/* Logo */

.logo{

width:95px;

margin-bottom:18px;

}

h1{

color:#fff;

font-size:38px;

margin-bottom:5px;

}

.login-card p{

color:#ddd;

margin-bottom:30px;

}

/* Error */

#loginError{

display:none;

padding:12px;

margin-bottom:15px;

background:#ffebeb;

border-radius:8px;

color:red;

font-size:14px;

}

/* Inputs */

.input-group{

position:relative;

margin-bottom:18px;

}

.input-group i{

position:absolute;

left:18px;

top:50%;

transform:translateY(-50%);

color:#0b2d6b;

font-size:18px;

}

.input-group input{

width:100%;

height:56px;

padding-left:52px;

border:none;

outline:none;

border-radius:50px;

font-size:15px;

background:#fff;

transition:.3s;

}

.input-group input:focus{

box-shadow:0 0 12px rgba(255,255,255,.6);

}

/* Options */

.login-options{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

font-size:14px;

color:#fff;

}

.login-options a{

color:#ffd84d;

text-decoration:none;

}

.login-options a:hover{

text-decoration:underline;

}

/* Button */

button{

width:100%;

height:56px;

border:none;

border-radius:50px;

background:linear-gradient(135deg,#0b2d6b,#2f79ff);

color:#fff;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.35s;

}

button:hover{

transform:translateY(-3px);

box-shadow:0 15px 30px rgba(0,0,0,.35);

}

/* Register */

.register{

margin-top:25px;

color:#fff;

}

.register a{

color:#ffd84d;

font-weight:600;

text-decoration:none;

}

.register a:hover{

text-decoration:underline;

}

/* Animation */

@keyframes fade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* Tablet */

@media(max-width:768px){

.login-card{

width:92%;

padding:35px 25px;

}

h1{

font-size:30px;

}

.login-options{

flex-direction:column;

gap:12px;

}

}

/* Mobile */

@media(max-width:480px){

.logo{

width:75px;

}

h1{

font-size:26px;

}

.login-card{

padding:30px 20px;

}

.input-group input{

height:52px;

}

button{

height:52px;

}

}