*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
}
*, :after, :before {
    box-sizing: border-box;
    border: 0 solid;
}

body{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: white;
    background-image: url('./images/hwange2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
/*-------------------------body section-----------------------*/

/*------------------------------------scroll--------------------------------*/
html{
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;
}

/*------------------------------webkit scroll design--------------------------*/
::-webkit-scrollbar{
    width: 5px; 
    display: none;
}
::-webkit-scrollbar-track{
    background: #f1f1f1;
   
}
::-webkit-scrollbar-thumb{
    background: var(--body-blue);
    border-radius: 10px;
  
}
::-webkit-scrollbar-thumb:hover{
    background: #161616;
}
/*---------------------sign in------------------------*/
.sign{
    margin: 1rem;
    padding-bottom: 15rem;
}
.modal{
    width: 100%;
    
}
 .modal-content{
   background-color: #fefefe;
   margin: 5px auto;
   width: 100%;
   border-radius: 20px;
 
   
 }
 
 .login-b{
   background-color: #2d234e;
   color: white;
   padding: 14px 20px;
   border: none;
   border-radius: 20px;
   cursor: pointer;
   width: 100%;
   margin-bottom: 1rem;
 }
 .btn-login:hover{
   opacity: 0.8;
 }
 .login-b:hover{
   opacity: 0.8;
 }
 .close{
   display: none;
   position: absolute;
   left:25px;
   top: 0;
   color: #000;
   font-size: 35px;
   font-weight: bold;
 }
 .close:hover,.close:focus{
 color: red;
 cursor: pointer;
 }
 .animate{
   -webkit-animation: animatezoom 0.6s;
   animation: animatezoom 0.6s;
 }
 @-webkit-keyframes animatezoom{
   from{-webkit-transform: scale(0);}
   to{-webkit-transform: scale(1);}
 }
 @keyframes animatezoom{
   from{transform: scale(0);}
   to{transform: scale(1);}
 }
 .forms{
   border: 3px solid #f1f1f1;
 }
 .text-login,.password-login{
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: ipx solid #ccc;
   box-sizing: border-box;
   outline: none;
   border: 1px solid rgb(180, 177, 177);
   border-radius: 5px;
 }
 

 .cancelbtn{
   width: auto;
   padding: 10px 18px;
   background-color: #a11309;
   color: white;
   border-radius: 5px;
   border: none;
   cursor: pointer;
 }
 .imgcontainer{
   text-align: center;
   margin: 24px 0 12px 0;
 }
 img.avatar{
   width: 30%;
   border-radius: 50%;
   
 }
 .container{
   padding: 16px;
 }
 .psw{
   float: right;
   padding-top: 16px;
   
 }
 .error-message{
     display: none;
    color: red;
    font-size: 0.875rem;
 }
 @media screen and(max-width:300px){
   .psw{
       display: block;
       float: none;
   }
   .cancelbtn{
       width: 100%;
   }
 }
 @media screen and(max-width:800px){
   .modal-content{
    
   }
 }