body {
    background-image: url("img/Frontpage.png");
    background-repeat: no-repeat;
    background-size: cover; 
    background-position:center;
    background-attachment: fixed; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.thebox1{
   
    margin-top:35%;
    height:35%;
    width:15%;
    background-color: white;
    border: solid rgb(234, 255, 47);
    min-width: 15%;
    min-height:35%;
}




.thebox2{
    margin:auto;
    margin-top:30%;
    height:35%;
    width:24%;
    background-color: white;
    border: solid rgb(255, 47, 47);
    padding-left: 1%;
    min-width: 400px;
}
.hdr1{
    font-size: 20px;
    font-weight: bold;
}
.mtb1{
    margin: auto;
}
.tb1{
    height:25px;
    width:80%;
    margin: auto;
}





.wrapper1{
    margin: auto;
    height: 180%;
    width: 60%;
}
.wrapper2{
    margin: auto;
    height: 200%;
    width: 100%;
}

.wrapper3{
    margin: auto;
    height: 100%;
    width: 100%;
    border: solid rgb(0, 0, 0) 1px;

}





    .success{
    color: green;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    margin-top: -25px;
    text-align:center;
    }
    
    .fail{
    color: red;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-top: -25px;
    text-align:center;
    }

    @media screen and (max-width: 768px) {
        body {
          font-size: 16px;
          padding: 10px;
        }
      }
      
      /* For screens smaller than 480px (mobile) */
      @media screen and (max-width: 480px) {
        body {
          font-size: 14px;
          background-size: 145%; /* Adjust the background size for smaller screens */
          background-attachment: scroll; /* Let the background scroll for better performance */
          padding: 0px; /* Add some padding to avoid content touching the edges */
        }
          .thebox1{
              padding-top:1%;
              margin-top:1000px;
              height:35%;
              width:18%;
              background-color: white;
              border: solid rgb(255, 47, 47);
              min-width: 60%;
              min-height:42%;
          }
              .thebox1.tb1{
                height:6%;
                width:30%;
              
              }
              .tb1{
                height:25px;
                width:100%;
                margin: auto;
            }
          
          .thebox2{
              margin:auto;
              
              margin-top:80%;
              height:35%;
              width:30%;
              background-color: white;
              border: solid rgb(255, 47, 47);
              min-width: 100%;
          }
      }