*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(#040165,#1f1013);
-webkit-overflow-y: hidden;
-moz-overflow-y: hidden;
overflow-y: hidden;
-webkit-animation: fadeIn 1 1s ease-out;
-moz-animation: fadeIn 1 1s ease-out;
-o-animation: fadeIn 1 1s ease-out;
animation: fadeIn 1 1s ease-out;
}
@keyframes fadeIn{
from{opacity: 0;}
to{opacity: 1;}
}

@-webkit-keyframes fadeIn{
from{opacity: 0;}
to{opacity: 1;}
}

@-moz-keyframes fadeIn{
from{opacity: 0;}
to{opacity: 1;}
}

@keyframes fadeOut{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: .9;}
100%{opacity: 0;}
}
@-webkit-keyframes fadeOut{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: .9;}
100%{opacity: 0;}
}

@-moz-keyframes fadeOut{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: .9;}
100%{opacity: 0;}
}
.light {
    position: absolute;
    width: 0px;
    opacity: .75;
    background-color: white;
    box-shadow: #ffffff 0px 0px 20px 2px;
    opacity: 0;
    top: 100vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}
.x1{
-webkit-animation: floatUp 4s infinite linear;
-moz-animation: floatUp 4s infinite linear;
-o-animation: floatUp 4s infinite linear;
animation: floatUp 4s infinite linear;
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);
}

.x2{
-webkit-animation: floatUp 7s infinite linear;
-moz-animation: floatUp 7s infinite linear;
-o-animation: floatUp 7s infinite linear;
animation: floatUp 7s infinite linear;
-webkit-transform: scale(1.6);
-moz-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
left: 15%;
}

.x3{
-webkit-animation: floatUp 2.5s infinite linear;
-moz-animation: floatUp 2.5s infinite linear;
-o-animation: floatUp 2.5s infinite linear;
animation: floatUp 2.5s infinite linear;
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);
left: -15%;
}

.x4{
-webkit-animation: floatUp 4.5s infinite linear;
-moz-animation: floatUp 4.5s infinite linear;
-o-animation: floatUp 4.5s infinite linear;
animation: floatUp 4.5s infinite linear;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
left: -34%;
}

.x5{
-webkit-animation: floatUp 8s infinite linear;
-moz-animation: floatUp 8s infinite linear;
-o-animation: floatUp 8s infinite linear;
animation: floatUp 8s infinite linear;
-webkit-transform: scale(2.2);
-moz-transform: scale(2.2);
-o-transform: scale(2.2);
transform: scale(2.2);
left: -57%;
}

.x6{
-webkit-animation: floatUp 3s infinite linear;
-moz-animation: floatUp 3s infinite linear;
-o-animation: floatUp 3s infinite linear;
animation: floatUp 3s infinite linear;
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
-o-transform: scale(.8);
transform: scale(.8);
left: -81%;
}

.x7{
-webkit-animation: floatUp 5.3s infinite linear;
-moz-animation: floatUp 5.3s infinite linear;
-o-animation: floatUp 5.3s infinite linear;
animation: floatUp 5.3s infinite linear;
-webkit-transform: scale(3.2);
-moz-transform: scale(3.2);
-o-transform: scale(3.2);
transform: scale(3.2);
left: 37%;
}

.x8{
-webkit-animation: floatUp 4.7s infinite linear;
-moz-animation: floatUp 4.7s infinite linear;
-o-animation: floatUp 4.7s infinite linear;
animation: floatUp 4.7s infinite linear;
-webkit-transform: scale(1.7);
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
transform: scale(1.7);
left: 62%;
}

.x9{
-webkit-animation: floatUp 4.1s infinite linear;
-moz-animation: floatUp 4.1s infinite linear;
-o-animation: floatUp 4.1s infinite linear;
animation: floatUp 4.1s infinite linear;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
left: 85%;
}
@-webkit-keyframes floatUp{
0%{top: 100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: -100vh; opacity: 0;}
}
@-moz-keyframes floatUp{
0%{top: 100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: -100vh; opacity: 0;}
}
@-o-keyframes floatUp{
0%{top: 100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: -100vh; opacity: 0;}
}
@keyframes floatUp{
0%{top: 100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: -100vh; opacity: 0;}
} 

.box
{
position: relative;
width: 380px;
height: 450px;
background: #252525;
border-radius: 8px;
overflow: hidden;
}
.box::before
{
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
transform-origin: bottom right;
background: linear-gradient(0deg,transparent,
transparent,#ffffff,#ffffff,#ffffff);
z-index: 1;
animation: animate 6s linear infinite;
}
.box::after
{
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
transform-origin: bottom right;
background: linear-gradient(0deg,transparent,
transparent,#ffffff,#ffffff,#ffffff);
z-index: 1;
animation: animate 6s linear infinite;
animation-delay: -3s;
}

@keyframes animate 
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}    
}
.box form
{
position: absolute;
inset: 2px;
padding: 20px 40px;
border-radius: 8px;
z-index: 2;
display: flex;
flex-direction: column;
background-image: url('gg.png');
background-position: center;
background-size: cover;
}
.box form h5
{
color: #fff;
font-weight: 500;
text-align: center;
letter-spacing: 0.1em;
}
.box form h2
{
color: #ffffff;
font-weight: 500;
text-align: center;
letter-spacing: 0.1em;
}
.box form .inputBox
{
position: relative;
width: 300px;
margin-top: 20px;
}
.box form .inputBox input
{
position: relative;
width: 100%;
padding: 20px 10px 10px;
background: transparent;
outline: none;
border: none;
box-shadow: none;
color: #23242a;
font-size: 1em;
letter-spacing: 0.05em;
transition: 0.5s;
z-index: 10;
}
.box form .inputBox span
{
position: absolute;
left: 0;
padding: 20px 0px 10px;
pointer-events: none;
color: #fdfdfd;
transition: 0.5s;
font-size: 1em;
letter-spacing: 0.05em;
transition: 0.5s;
}
.box form .inputBox input:valid ~ span,
.box form .inputBox input:focus ~ span
{
color: #fff;
font-size: 0.75em;
transform: translateY(-34px);
}
.box form .inputBox i
{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #ffffff;
border-radius: 4px;
overflow: hidden;
transition: 0.5s;
pointer-events: none;
}
.box form .inputBox input:valid ~ i,
.box form .inputBox input:focus ~ i
{
height: 44px;
}
.box form input[type="submit"]
{
border: none;
outline: none;
padding: 10px 25px;
background: #fff;
cursor: pointer;
font-size: 0.9em;
border-radius: 4px;
font-weight: 600;
width: 100px;
margin-top: 25px;
}
.box form input[type="submit"]:active
{
opacity: 0.8;
}