*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

html,body{
    height:100%;
    width:100%;
    font-family: chillax;
}

.main{
    background-image: url("https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
    height: calc(100% - 100px);
    width:100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}

.logo{
    height: 100px;
    width: 20%;
    margin-left: calc(50% - 10%);
}

.logo img{
    object-fit: cover;
    height: 100%;
    width: 100%;
    
}
.verification{
  height:55%;
  width:60%;
  background-color:rgba(255, 255, 255,0.01);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 1.5rem;
  border: 1px solid white;
  backdrop-filter: blur(10px);
  color: white;
}

.verification img {
    height: 250px;
    width: 250px;
}
.verification .form-input{
    display:flex;
    justify-content: space-evenly;
    flex-direction: column;
    height: 80%;
    width: 50%;
}

.form-input label{
    font-size: 1.4rem;
    font-weight: 500;
}

.form-input input{
    margin-top: -10px;
    border: none;
    font-size: large;
    border-bottom: 1px solid rgba(255, 255, 255,0.5);
    background-color: transparent;
    outline: none;
    color: white;
    caret-color: #A3D95D;
}

.form-input input::placeholder{
    color: rgba(255, 255, 255,0.5);
}

.verification #button {
     background-color:#A3D95D;
     color: black;
     padding: 0.5rem 1rem;
     font-size: 1rem;
     align-self: flex-end;
     border-radius: 0.5rem;
     cursor: pointer;
     text-decoration: none;
}


@media only screen and (max-width: 767px){
    .main{
        background-image: url("https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
        background-size: contain;
        background-position: center;
        height: calc(100% - 70px);

    }
    .logo{
        height: 70px;
        width: 50%;
        margin-left: calc(50% - 25%);
    }
    
    .verification{
        height:60%;
        width:90%;
      }
      
      .verification img {
          display: none;
      }
      .verification .form-input{
          height: 80%;
          width: 90%;
      }

}

@media only screen and (min-width: 768px) and (max-width:1024px){
    .main{
        background-image: url("https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
        background-size: contain;
        background-position: center;
        height: calc(100% - 90px);

    }
    .logo{
        height: 90px;
        width: 30%;
        margin-left: calc(50% - 15%);
    }
    .verification{
        height:70%;
        width:90%;
      }
      
      .verification img {
          display: none;
      }
      .verification .form-input{
          height: 80%;
          width: 80%;
      }

}