body{
     
     background: linear-gradient(to right,rgb(224, 246, 147),rgb(240, 237, 150));
     text-align: center;
     display:flex;
     flex-direction: column;
     align-items: center;
     min-height: 100vh;
     margin:0;
}
.heading{
     
     text-align: center;
     font-family: "Kaushan Script", cursive;
     font-size: 40px;
  font-weight: 500;
  font-style: normal;
  background: linear-gradient(to left,rgb(194, 247, 5),rgb(201, 195, 3));
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  padding:20px 0;
}
.mainBox{

     
     width:90%;
     max-width: 500px;
     border: 2px none ;
     border-radius: 10px;
     box-sizing: border-box;
     padding:30px 15px;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-bottom: 20px;
     background:rgb(253, 253, 178);  
}
label{
     font-size: 1.1em;
}
input[type=text]{
     border-radius: 8px;
     border:none;
     width:280px;
     max-width: 400px;
     height:5vh;
     min-height: 40px;
     border:1px solid rgb(154, 154, 64);
     background:rgb(251, 251, 204);
     padding:0 10px;
     box-sizing: border-box;
}
input::placeholder{
color:rgb(154, 154, 64);
font-style: italic;
text-align: center;
font-size: 0.9em;
}
input[type=text]:hover{
     border-color:rgb(245, 245, 234);
     box-shadow: 5px 5px 10px rgb(142, 140, 20),-5px -5px 10px rgb(244, 244, 176);
     border:none;
     background:linear-gradient(to right,rgba(251, 251, 204),rgba(251, 251, 204, 0.354));
}
input[type=text]:focus{
     outline:none;
}
.button-group{
     display:flex;
     justify-content: center;
     flex-wrap:wrap;
     margin-bottom: 20px;
}
button{
     border-radius: 8px;
     width:100px;
     height:40px;
     border:none;
     border:1px solid rgb(247, 247, 108);
     background:rgb(194, 247, 5);
     margin:10px 5px;
     font-size: 1em;
     cursor:pointer;
}
button:hover{
     border:1px solid rgb(28, 28, 17);
     width:110px;
     font-weight:normal;
     border:none;
     background:rgb(209, 253, 51);
}
#qrcode{
     box-sizing: border-box;
     height:240px;
     width:250px;
     border:1px dashed rgb(154, 154, 64);
     background:rgb(251, 251, 204) ; 
     text-align: center;
     margin:20px auto 0;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow:hidden;
}
#qrImage{
   max-height:100%;
   max-width:100%; 
   object-fit: contain;  
}
#qrText{
     padding:0;
     font-size:0.9em !important;
     text-align: center;
} 
#redNote{
     color:red;
}
/*Responsiveness for tablets*/
@media (max-width:760px){
     .heading{
          font-size: 36px;
     }
     .mainBox{
          width:95%;
          padding:25px 10px;
     }
     input[type=text]{
          height:45px;
     }
     button{
          width:110px;
          height:40px;
     }
     #qrcode{
          width:220px;
          height:220px;
     }
}
/*Responsiveness for phone*/
@media (max-width:480px){
     .heading{
          font-size: 30px;
          padding:15px 0;
     }
     .mainBox{
          width:95%;
          padding:20px 10px;
     }
     input[type=text]{
          width:calc(100%-20px);
          height:40px;
          font-size: 1em;
     }
     input::placeholder{
          font-size: 0.8em;
     }
     button{
          width:100px;
          height:38px;
          font-size: 0.9em;
          margin:8px 3px;
     }
     #qrcode{
          width:200px;
          height:200px;
     }
     #qrText{
          font-size: 0.8em !important;
     }
}