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

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

/* BODY */

body{

background:
linear-gradient(
135deg,
#030008,
#120018,
#05010d
);

color:white;

overflow-x:hidden;

min-height:100vh;

}

/* SCROLLBAR */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#08000f;
}

::-webkit-scrollbar-thumb{
background:#ff00ff;
border-radius:10px;
}

/* GHOSTS */

.ghosts{

position:fixed;

width:100%;
height:100%;

top:0;
left:0;

overflow:hidden;

pointer-events:none;

z-index:-3;

}

.ghost{

position:absolute;

width:140px;
height:140px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,0,255,0.35),
transparent 70%
);

filter:blur(18px);

animation:
ghostMove linear infinite;

opacity:0.4;

}

/* DIFFERENT GHOSTS */

.g1{
top:8%;
left:-180px;
animation-duration:18s;
}

.g2{
top:30%;
left:-250px;
animation-duration:22s;
animation-delay:3s;
}

.g3{
top:55%;
left:-160px;
animation-duration:17s;
animation-delay:6s;
}

.g4{
top:75%;
left:-200px;
animation-duration:24s;
animation-delay:1s;
}

.g5{
top:88%;
left:-220px;
animation-duration:19s;
animation-delay:8s;
}

/* GHOST MOTION */

@keyframes ghostMove{

0%{
transform:
translateX(0)
scale(1);
opacity:0;
}

10%{
opacity:0.45;
}

50%{
transform:
translateX(60vw)
scale(1.35);
}

100%{
transform:
translateX(130vw)
scale(1);
opacity:0;
}

}

/* PARTICLES */

.particles{

position:fixed;

width:100%;
height:100%;

top:0;
left:0;

pointer-events:none;

overflow:hidden;

z-index:-2;

}

.particles span{

position:absolute;

display:block;

width:8px;
height:8px;

background:#ff00ff;

border-radius:50%;

box-shadow:
0 0 12px #ff00ff,
0 0 24px #ff00ff;

animation:
particleMove linear infinite;

opacity:0;

}

/* RANDOM POSITIONS */

.particles span:nth-child(1){
left:10%;
animation-duration:7s;
animation-delay:0s;
}

.particles span:nth-child(2){
left:20%;
animation-duration:10s;
animation-delay:2s;
}

.particles span:nth-child(3){
left:35%;
animation-duration:6s;
animation-delay:1s;
}

.particles span:nth-child(4){
left:50%;
animation-duration:12s;
animation-delay:3s;
}

.particles span:nth-child(5){
left:65%;
animation-duration:8s;
animation-delay:5s;
}

.particles span:nth-child(6){
left:78%;
animation-duration:11s;
animation-delay:4s;
}

.particles span:nth-child(7){
left:90%;
animation-duration:9s;
animation-delay:2s;
}

.particles span:nth-child(8){
left:95%;
animation-duration:13s;
animation-delay:1s;
}

/* PARTICLE MOTION */

@keyframes particleMove{

0%{
transform:
translateY(100vh)
scale(0);
opacity:0;
}

10%{
opacity:1;
}

100%{
transform:
translateY(-120vh)
scale(1.5);
opacity:0;
}

}

/* LOGIN BOX */

.login-box{

position:relative;

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

margin:90px auto;

padding:38px 28px;

border-radius:36px;

background:
rgba(15,0,25,0.92);

backdrop-filter:blur(22px);

border:
1px solid rgba(255,0,255,0.2);

box-shadow:
0 0 45px rgba(255,0,255,0.2);

overflow:hidden;

animation:
fadeUp 1s ease;

}

/* LIGHT EFFECT */

.login-box::before{

content:"";

position:absolute;

width:200%;
height:200%;

background:
linear-gradient(
45deg,
transparent,
rgba(255,255,255,0.06),
transparent
);

top:-50%;
left:-50%;

transform:rotate(25deg);

animation:
shine 7s linear infinite;

}

@keyframes shine{

0%{
transform:
translateX(-100%)
rotate(25deg);
}

100%{
transform:
translateX(100%)
rotate(25deg);
}

}

/* LOGO */

.logo{

width:130px;
height:130px;

border-radius:50%;

display:block;
margin:auto;

object-fit:cover;

border:
4px solid #ff00ff;

box-shadow:
0 0 35px #ff00ff;

animation:
logoSpin 10s linear infinite;

position:relative;
z-index:2;

}

/* LOGO ANIMATION */

@keyframes logoSpin{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}

/* TITLE */

.main-title{

text-align:center;

font-size:54px;

margin-top:24px;

color:#ff00ff;

text-shadow:
0 0 20px #ff00ff,
0 0 50px #ff00ff;

letter-spacing:4px;

animation:
fadeUp 1.2s ease;

position:relative;
z-index:2;

}

.sub-title{

text-align:center;

margin-top:12px;

margin-bottom:30px;

color:#bbbbbb;

letter-spacing:2px;

animation:
fadeUp 1.5s ease;

position:relative;
z-index:2;

}

/* INPUT */

.input{

width:100%;

padding:17px;

margin-bottom:16px;

border:none;

border-radius:18px;

background:#1a0a25;

color:white;

outline:none;

font-size:15px;

transition:0.3s;

position:relative;
z-index:2;

}

.input:focus{

box-shadow:
0 0 18px #ff00ff;

transform:scale(1.02);

}

/* BUTTON */

.btn{

width:100%;

padding:17px;

margin-top:8px;

border:none;

border-radius:18px;

background:
linear-gradient(
45deg,
#ff00ff,
#8a00ff
);

color:white;

font-size:16px;
font-weight:bold;

cursor:pointer;

transition:0.35s;

position:relative;
overflow:hidden;

z-index:2;

}

/* BUTTON EFFECT */

.btn::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.35),
transparent
);

transition:0.6s;

}

.btn:hover::before{

left:120%;

}

.btn:hover{

transform:
translateY(-5px)
scale(1.03);

box-shadow:
0 0 30px #ff00ff;

}

/* MESSAGE */

#msg{

margin-top:14px;

text-align:center;

font-size:14px;

position:relative;
z-index:2;

}

/* FADE */

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(45px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* MOBILE */

@media(max-width:700px){

.main-title{
font-size:40px;
}

.logo{
width:105px;
height:105px;
}

.login-box{
padding:32px 22px;
}

}