/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI, Arial;
}

/* BODY */

body{

height:100vh;

display:flex;

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

background:linear-gradient(135deg,#4facfe,#00f2fe);

}

/* LOGIN CONTAINER */

.login-container{

width:100%;

display:flex;

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

}

/* LOGIN BOX */

.login-box{

width:340px;

background:rgba(255,255,255,0.15);

backdrop-filter:blur(12px);

padding:40px;

border-radius:15px;

text-align:center;

box-shadow:

0 20px 40px rgba(0,0,0,0.25);

transition:0.4s;

}

/* HOVER EFFECT */

.login-box:hover{

transform:translateY(-5px);

box-shadow:

0 30px 60px rgba(0,0,0,0.35);

}

/* TITLE */

.login-box h2{

color:white;

margin-bottom:5px;

}

/* SUBTITLE */

.sub{

color:white;

font-size:14px;

margin-bottom:25px;

opacity:0.9;

}

/* INPUT */

.login-box input{

width:100%;

padding:12px;

margin:10px 0;

border:none;

border-radius:6px;

outline:none;

font-size:15px;

}

/* BUTTON */

.login-box button{

width:100%;

padding:12px;

margin-top:10px;

border:none;

border-radius:6px;

background:#0984e3;

color:white;

font-size:16px;

cursor:pointer;

transition:0.3s;

}

/* BUTTON HOVER */

.login-box button:hover{

background:#0652DD;

}

/* ERROR MESSAGE */

#errorMsg{

color:#ffcccc;

margin-top:10px;

font-size:14px;

}

/* BACK LINK */

.back-home{

display:block;

margin-top:20px;

text-decoration:none;

color:white;

font-size:14px;

opacity:0.9;

}

.back-home:hover{

text-decoration:underline;

}

/* MOBILE */

@media(max-width:450px){

.login-box{

width:90%;

}

}