*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Poppins,sans-serif;

}

body{

background:#07070d;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

color:white;

}

.background{

position:absolute;

width:100%;

height:100%;

overflow:hidden;

}

.circle{

position:absolute;

border-radius:50%;

filter:blur(80px);

animation:float 10s infinite alternate;

}

.c1{

width:300px;

height:300px;

background:#7b2cff;

left:-50px;

top:-50px;

}

.c2{

width:250px;

height:250px;

background:#00c6ff;

right:-50px;

bottom:-50px;

}

.c3{

width:180px;

height:180px;

background:#ff00ff;

left:40%;

top:60%;

}

@keyframes float{

100%{

transform:translateY(-80px) rotate(40deg);

}

}

.container{

position:relative;

z-index:2;

}

.card{

width:420px;

padding:35px;

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

backdrop-filter:blur(20px);

border-radius:25px;

text-align:center;

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

box-shadow:0 0 40px rgba(0,0,0,.5);

}

.logo{

width:100px;

margin-bottom:15px;

}

h1{

font-size:35px;

}

p{

opacity:.7;

margin-bottom:25px;

}

input{

width:100%;

padding:15px;

margin-top:15px;

border:none;

outline:none;

border-radius:12px;

background:#12121b;

color:white;

font-size:16px;

}

button{

width:100%;

margin-top:20px;

padding:15px;

border:none;

border-radius:12px;

background:#7b2cff;

color:white;

font-size:17px;

cursor:pointer;

transition:.3s;

}

button:hover{

background:#9f57ff;

transform:scale(1.03);

}

#pairCode{

margin-top:15px;

font-size:30px;

color:#00ff95;

}

#status{

margin-top:20px;

font-weight:bold;

color:#ffc107;

}

.hidden{

display:none;

}