style.css

  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

body
{
    margin:0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
}

.main_container{
    margin-top: 4rem;
  width: 70%;
  height: max-content;
  
  box-shadow: 0px 0px 20px 1px blue;
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 25px ;
  background-image: linear-gradient(#c9b9b900,#0602ff5e,#00ffd03b,#26ff045d,#5100ff85);
  
  
}

#logo{
    height: 10rem;
    width: 10rem;
  
}
#logo_img{
    width: 100%;
    
}


.ver_text{
    height: fit-content;
    width: 80%;
    
    text-align: center;
}

.ver_text h1{
 font-weight: 800;
text-shadow: 1px 2px white;
font-size:40px
}

.ver_text p{
   font-weight: 800;
  
   text-shadow: 1px 2px white;
}

.otp{
    height:7rem;
    width: 80%;
    
    display: flex;
    padding: auto;   
}

@media only screen and (max-width: 1079px) {
    

    input[type="text"]
{
   transform: scale(0.5);
    
    font-size:4rem;
    
}
  }


  @media only screen and (max-width: 803px) {
    

    input[type="text"]
{

    
    font-weight: 1;
    display: flex;
    height: auto;

    
}


.otp{
    height:4rem;
    width: 80%;
    
    display: flex;
    padding: auto;   
}

  }

input[type="text"]
{
    height:6rem;
    width: 6rem;
    margin: auto; 
     font-size:3rem;
     text-align: center;
     box-shadow: 1px 1px 20px 1px rgb(28, 4, 250);
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
    color: blue;
    font-weight: 700;
    
   
}


input[type="text"]:hover{
    background-color: antiquewhite;
}

input[type="text"]:active{
    background-color: rgb(0, 255, 157);
}



.confirmation{
    margin-top: 10px;
    height: 8rem;
    width: 70%;
    
    text-align: center;
    font-size: large;
}

.confirmation p{
font-weight: 800;
color:rgb(48, 47, 47);
text-shadow: 1px 2px white;
margin-bottom: 5px;
}

.confirmation a{
    color: red;
    font-weight: 800;
    font-size: 1.5rem;
    text-shadow: 1px 1px pink;
}


.confirmation a:hover{
    color: blue;
}