@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

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

section{
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;

}
 .container{
    position: absolute;
    left: -10%;
    width: 120%;
    height: 100vh;
    background: url(images/bg.jpg);
} 

.container #scene .layer
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}
.container #scene .layer img
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.inputBox small {
  visibility: hidden;
}

.inputBox.error small {
  visibility: visible;
}

/* code for form */
.login-form{
  position: relative;
  background: rgba(67, 58, 58, 0.15);
  backdrop-filter: blur(35px);
  /* border:1px solid rgba(255, 255,255, 0.5); */
  border-bottom:2px solid rgba(255, 255,255, 0.25);
  border-left:1px solid rgba(255, 255,255, 0.25);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(34, 32, 32, 0.1);
  padding-top: 0;
}
.login{
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-bottom : 30px;
  margin-top: 1rem;
  padding-left: 30px ;
  padding-right: 30px;

}
.login-header{
  padding: 0.5rem;
  background-color: rgba(25, 44, 131, 0.7);
  position: relative;
  width: 100%;
  border-radius: 1rem 1rem 0 0;
  text-align: center;
  font-size: 2.5em;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}

 .Sumbit .inputBox{
    position: relative;
} 
 .login .inputBox input{
    position: relative;
    width:100%;
    padding: 0.8rem 1.6rem;
    outline: none;
    font-size: 1.25em;
    color: #fff;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.2);
    /* box-shadow:inset 0 0 15px rgba(0,0,0,0.25); */
    /* border: 1px solid rgba(0,0,0,0.5); */
    border: none;
      cursor: text;

}
input::placeholder{
  color: white;
}
.login .inputBox1 input{
    position: relative;
    width:100%;
    padding: 12px 24px;
    outline: none;
    font-size: 1.25em;
    color: #fff;
    border-radius: 1rem;
    background: rgba(0, 0,0, 0.1);
    background: rgba(255, 255, 255, 0.2);

    /* box-shadow:inset 0 0 15px rgba(0,0,0,0.25); */
    /* border: 1px solid rgba(0,0,0,0.5); */
    border: none;
    margin-bottom: 10px;
    background-color: #2745ca;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}
.login .inputBox1 input:hover{
  background-color: #192c83;

}
.login.inputBox #btn{
    position: relative;
    border: none;
    outline: none;
    
    /* background: linear-gradient(0deg,#2c3c99,#00b0ff); */
    color: #fff;
    font-weight: 500;
    box-shadow: none;
   

}
.login .group
{
    display: flex;
    justify-content: space-between;

}
.login.group a{
    font-size: 1.25em;
    color: #fff;
    text-decoration: none;


}
.login.group a:nth-child(2)
{
    text-decoration: underline;
}
.gender{
    font-size: 20px;
    font-weight: 400;
    color: white;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* For screens smaller than 600px */
@media (max-width: 600px) {
  .login-form{
    width: 90%;
    padding-top: 0;
  }
  .login {
    
    padding: 30px;
    padding-top: 0;
  }
  
  .login-header {
    font-size: 1.5em;
  }
    
  .login .inputBox input {
    font-size: 1em;
    font-weight: 500;
  }
  }
  
  /* For screens between 600px and 900px */
  @media (min-width: 600px) and (max-width: 900px) {
    .login-form {
      width: 70%;
      padding-top: 0;
    }
    .login{
      padding: 30px;
    }
    .login-header {
      font-size: 2.25em;
    }
    
    .login .inputBox input {
      font-size: 1.1em;
    }
  }
  
  /* For screens larger than 900px */
  @media (min-width: 900px) {
    .login-form {
      width: 500px;
      padding-top: 0;
    }
    .login{
      padding: 30px;

    }
    .login-header {
      font-size: 2em;
      padding: 0.5rem;
    }
    
    .login .inputBox input {
      font-size: 1.25em;
    }
  }

  /* Style the select element */
.login .inputBox select {
    width: 100%;
    padding: 0.8rem 1.2rem;
    outline: none;
    font-size: 1.25em;
    color: #fff;
    border-radius: 1rem;

    background: rgba(255, 255, 255, 0.2);
    /* box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.25); */
    border: none;
    /* border: 1px solid rgba(0, 0, 0, 0.5); */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  /* Style the select options */
  .login .inputBox select option {
    background-color: #000;
    /* border-radius: 2rem; */
    color: #fff;
  }