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

body{

background:black;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
color:white;

}

.container{
width:360px;
text-align:center;
}


.welcome{
margin-bottom:20px;
font-weight:500;
}


/* SWITCH BUTTON */

.switch{

display:flex;
border-radius:25px;
overflow:hidden;
margin-bottom:20px;

border:2px solid transparent;

background:
linear-gradient(#050505,#050505) padding-box,
linear-gradient(120deg,#00f7ff,#8f00ff,#00f7ff) border-box;

animation:borderGlow 4s linear infinite;
}

.switch button{

flex:1;
padding:10px;
background:transparent;
border:none;
color:#aaa;
cursor:pointer;
}

.switch .active{

background:linear-gradient(90deg,#00f7ff,#00ffb7);
color:black;
font-weight:bold;

}


/* LOGIN BOX */

.login-box{

padding:25px;
border-radius:15px;

border:2px solid transparent;

background:
linear-gradient(#0a0a0a,#0a0a0a) padding-box,
linear-gradient(120deg,#00f7ff,#8f00ff,#00f7ff) border-box;

animation:borderGlow 4s linear infinite;

}


/* HEADER */

.header{

display:flex;
justify-content:space-between;
margin-bottom:20px;
font-size:14px;

}

.header a{

color:#00f7ff;
text-decoration:none;

}


/* INPUT */

.input-group{

text-align:left;
margin-bottom:18px;

}

.input-group label{

font-size:13px;
color:#00f7ff;
margin-bottom:4px;
display:block;

}

.input-group input{

width:100%;
padding:10px;
border:none;
border-bottom:1px solid #333;
background:transparent;
color:white;
outline:none;

}


/* PASSWORD ICON */

.password-box{

position:relative;

}

.password-box i{

position:absolute;
right:10px;
top:35px;
cursor:pointer;
color:#00f7ff;

}


/* OPTIONS */

.options{

display:flex;
justify-content:space-between;
font-size:12px;
margin-bottom:25px;

}

.options a{

color:#00f7ff;
text-decoration:none;

}


/* LOGIN BUTTON */

.login-btn{

width:55px;
height:55px;

border-radius:50%;
border:none;

cursor:pointer;
font-size:20px;
color:white;

background:linear-gradient(135deg,#00f7ff,#008cff);

box-shadow:0 0 15px #00f7ff;

transition:0.3s;

}

.login-btn:hover{

box-shadow:
0 0 20px #00f7ff,
0 0 40px #00f7ff,
0 0 60px #00f7ff;

transform:scale(1.1);

}


/* BORDER ANIMATION */

@keyframes borderGlow{

0%{

background:
linear-gradient(#0a0a0a,#0a0a0a) padding-box,
linear-gradient(0deg,#00f7ff,#8f00ff,#00f7ff) border-box;

}

100%{

background:
linear-gradient(#0a0a0a,#0a0a0a) padding-box,
linear-gradient(360deg,#00f7ff,#8f00ff,#00f7ff) border-box;

}

}


/* FOOTER */

.copyright{

margin-top:25px;
font-size:12px;
color:#777;

}