@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;700&family=Roboto:wght@400;700&display=swap');
*{
       margin: 0;
       padding: 0;
       box-sizing: border-box;

}

body{
       font-family: 'Lato', sans-serif;
}

/* .outer-box{
       width: 100vw;
       height: 100vh;
       background: linear-gradient(to top left, #3ed8ff, #a8f5ff);
} */

.outer-box {
       width: 100vw;
       height: 100vh;
       background: linear-gradient(to top left, #e71515, #bd62db);
       
   }
.inner-box{
       width: 400px;
       /*for center your content*/
       margin: 0 auto;
       position: relative;
       top: 40%;
       transform: translateY(-50%);
       padding: 20px 40px;
       /* background-color: white; */
       background: linear-gradient(to top left, #ffffffff, #ffffff33);
       border-radius: 8px;
       box-shadow: 2px 5px 13px #0f1214;
       z-index: 2;
       backdrop-filter: blur(8px);
} 



.signup-header h1{
       font-size: 2.5rem;
       color: #212121;
}

.signup-header p{
       font-size: 1.1rem;
       color: rgb(46, 45, 45);
}

.signup-body{
       margin: 20px 0;
}

.signup-body p{
       margin: 10px 0;
}

.signup-body p label{
       display: block;
       font-weight: bold;
}

.signup-body p input{
       width: 100%;
       padding: 10px;
       border: 2px solid #cccc;
       border-radius: 4px;
       font-size: 1rem;
       margin-top: 4px;
}

.signup-body p input[type="submit"]{
       background-color: #3498db;
       border: none;
       cursor: pointer;
       color: white;
       transition: 0.2s ease-out;
       font-weight: bold;

}

.signup-body p input[type="submit"]:hover{
       background-color: #216a9b;

}

.signup-footer p{
       color: rgb(46, 45, 45);
       text-align: center;

}

.signup-footer p a{
      
       color: white;
       border-radius: 4px;
       padding: 5px 7px;
       background-color: #3498db;
       text-decoration: none;
       cursor: pointer;
       transition: 0.2s ease-out;
       font-weight: bold;
}

.signup-footer p a:hover{
       background-color: #216a9b;


}

.circle{
       width: 200px;
       height: 200px;
       border-radius: 100px;
       background: linear-gradient(to top right, #ffffff33, #ffffffff);
       position: absolute;
       animation-name: chandan;
       animation-duration: 5s;
       animation-iteration-count:infinite; 
}
  


.c1{
       top: 100px;
       left: 40px;
       animation-name: c1;
       animation-duration: 5s;
       /* animation-delay: 1s; */
       animation-iteration-count:infinite;
}

@keyframes c1{
       0%{
              position: relative;
              top: -450px;
              background-color: rgb(255, 0, 200);
            
       }
       50%{
              position: relative;
              top: 100px;
              /* background-color: yellow; */
              background-color: aqua;
       }
       100%{
              position: relative;
              top: -450px;
              
              background-color: rgb(255, 15, 63);
              
              
       } 
}
/* @keyframes c1{
       0%{
        background-color: crimson;
      }
      25%{
       background-color: blue;
      }
      50%{
        background-color: yellow;
       
      } 
      75%{
        background-color:violet;
      }
      100%{
       background-color: aqua;
      }
    } */
  /*    75%{
       position: relative;
       top: 10px;
      }
      100%{
       position: relative;
        top: 1px;
      }
    } */

.c2{
       bottom: 200px;
       right: 40px;
       animation-name: c2;
       animation-duration: 5s;
       /* animation-delay: 1s; */
       animation-iteration-count:infinite;
}

@keyframes c2{
       0%{
              position: absolute;
              bottom: 0px;
              background-color: rgb(255, 15, 63);
       }
       50%{
              position: absolute;
              bottom: 550px;
              background-color: aqua;
       }
       100%{
              position: absolute;
              bottom: 0px;
              background-color: rgb(255, 0, 200);
              
              
       } 
}

@media (max-width:768px){
       .outer-box {
              width: 100vw;
              height: 100vh;
              background: linear-gradient(to top left, #e71515, #bd62db);
              
          }

          .inner-box{
              width: 300px;
             
              /*for center your content*/
              margin: 0 auto;
              position: relative;
              top: 40%;
              transform: translateY(-50%);
              padding: 20px 40px;
              /* background-color: white; */
              background: linear-gradient(to top left, #ffffffff, #ffffff33);
              border-radius: 8px;
              box-shadow: 2px 5px 13px #0f1214;
              z-index: 2;
              backdrop-filter: blur(8px);
       } 

       .c1{
              top: 100px;
              left: 40px;
              animation-name: c1;
              animation-duration: 5s;
              /* animation-delay: 1s; */
              animation-iteration-count:infinite;
       }

       @keyframes c1{
              0%{
                     position: relative;
                     top: -450px;
                     background-color: rgb(255, 0, 200);
                   
              }
              50%{
                     position: relative;
                     top: 70px;
                     /* background-color: yellow; */
                     background-color: aqua;
              }
              100%{
                     position: relative;
                     top: -450px;
                     
                     background-color: rgb(255, 15, 63);
                     
                     
              } 
       }

}