body {
     background-color: rgb(248, 178, 178);
     font-family: 'kanit', sans-serif;
 }
 
 .main {
     background-color: #e9c46a;
     width: 400px;
     height: 420px;
     margin: 7em auto;
     border-radius: 1.5em;
     box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
 }
 
 .sign {
     padding-top: 40px;
     color: #202C45;
     font-family: 'Kanit', sans-serif;
     font-weight: bold;
     font-size: 40px;
 }
 
 .un {
 width: 76%;
 color: rgb(38, 50, 56);
 font-weight: 700;
 font-size: 18px;
 letter-spacing: 1px;
 background: #f0e7d0;
 padding: 10px 20px;
 border: none;
 border-radius: 20px;
 outline: none;
 box-sizing: border-box;
 border: 2px solid rgba(0, 0, 0, 0.02);
 margin-bottom: 50px;
 margin-left: 46px;
 text-align: center;
 margin-bottom: 27px;
 font-family: 'Kanit', sans-serif;
 }
 
 form.form1 {
     padding-top: 40px;
 }
 
 .pass {
 width: 76%;
 color: rgb(38, 50, 56);
 font-weight: 700;
 font-size: 18px;
 letter-spacing: 1px;
 background: #f0e7d0;
 padding: 10px 20px;
 border: none;
 border-radius: 20px;
 outline: none;
 box-sizing: border-box;
 border: 2px solid rgba(0, 0, 0, 0.02);
 margin-bottom: 50px;
 margin-left: 46px;
 text-align: center;
 margin-bottom: 27px;
 font-family: 'Kanit', sans-serif;
 }
 
 
 .un:focus, .pass:focus {
     border: 2px solid rgba(0, 0, 0, 0.18) !important;
 
 }
 
 .submit {
   cursor: pointer;
     border-radius: 5em;
     color: #fff;
     background: linear-gradient(to right, #e76f51 , #f4a261
);
     border: 0;
     padding-left: 40px;
     padding-right: 40px;
     padding-bottom: 10px;
     padding-top: 10px;
     font-family: 'Kanit', Kanit;
     margin-left: 30%;
     font-size: 18px;
     box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
 }
 
 .forgot {
     text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
     color: #264653;
     padding-top: 15px;
 }
 
 a {
     text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
     color: #264653;
     text-decoration: none
 }