@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*{
    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 : #2600f5 ;
} 

.box{
    position : relative ;
    width : 380px ;
    height : 420px ;
    background : #2600f5 ;
    border-radius : 8px ;
    overflow: hidden;
    -webkit-box-shadow: 8px 8px 26px -4px rgba(0,0,0,0.5);
    -moz-box-shadow: 8px 8px 26px -4px rgba(0,0,0,0.5);
    box-shadow: 8px 8px 26px -4px rgba(0,0,0,0.5);
}

.box::before{
    content :'';
    position : absolute ;
    top : -50% ;
    left: -50% ;
    width : 380px ;
    height : 420px ;
    transform-origin: bottom right;
    background : linear-gradient( 0deg ,transparent ,#00a7ff, #00a7ff) ;
    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 ,#00a7ff, #00a7ff) ;
    animation : animate 6s linear infinite ;
    animation-delay: -3s;
}
.form{
    position : absolute ;
    inset : 2px ;
    border-radius : 8px ;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    z-index : 1000 ;
    width : 100% ;
    max-width : 1000px ;
    background : rgba( 255,255,255,0.1 ) ;
    box-shadow : 0 25px 45px rgba( 0,0,0,0.1 ) ;
    border : 1px solid rgba( 255,255,255,0.25 ) ;
    border-right : 1px solid rgba( 255,255,255,0.1 ) ;
    border-bottom : 1px solid rgba(255,255,255,0.1 ) ;
    backdrop-filter : blur(150px) ;
}
.form h2
{
    color : #00a7ff ;
    font-weight : 500 ;
    text-align : center ;
    letter-spacing : 0.1em ;
}
.inputBox
{
    position : relative ;
    width : 300px ;
    margin-top : 35px ;
}
 
.inputBox input
{
    position: relative ;
    width: 100% ;
    padding: 20px 10px 10px ;
    background : transparent ;
    border : none ;
    outline : none ;
    color : #23242a ;
    font-size : 1em ;
    letter-spacing : 0.05em;
    z-index: 10;
}
.inputBox span
{
    position : absolute;
    left : 0;
    padding : 20px 0px 10px;
    font-size : 1em ;
    color : #fff;
    pointer-events : none;
    letter-spacing : 0.05em;
    transition : 0.5s;
}
.inputBox input:valid ~ span,                   
.inputBox input:focus ~ span{
    color : #00a7ff;
    transform : translateX(0px) translateY(-34px);
    font-size : 0.75em ;
}
.inputBox i{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #00a7ff;
    border-radius: 4px;
    transition: 0.5s;
    pointer-events: none;
    z-index: 9;
}
.inputBox input:valid ~ i,                   
.inputBox input:focus ~ i{
    height: 40px;
}

.links{
    display : flex ;
    justify-content : space-between ;
}
.links a{
    margin : 10px 0 ;
    font-size : 0.75em ;
    color : #fff;
    text-decoration: none;
}
.links a:nth-child(2),
.links a:hover{
    color:#00a7ff;
}

input[type ="submit"]
{
    border : none ;
    outline : none ;
    background : #00a7ff ;
    padding : 11px 25px ;
    width : 100px ;
    margin-top : 10px ;
    border-radius : 4px ;
    font-weight : 600 ;
    cursor : pointer ;
    color: #08306B;
}
input[type ="submit"]:active{
    opacity: 0.8;
}

@keyframes animate
{
  0%
  {
   transform : rotate(0deg) ;
  }
  100%
  {
    transform : rotate(360deg);
  }

}