*{
    font-family: 'Lato',sans-serif;
  }
  #logo{
    /* border: 1px solid red; */
    width: 12%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
   }
   #logo>img{
     width: 100%;
     height: 100%;

   }
   
#outerbox{
    width: 40%;
    height: 700px;
    margin: auto;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    /* border: solid 1px red; */
}
#head{
    width: 90%;
    /* border: solid 1px red; */
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2,49%);
    justify-content: center;
    align-items: center;
    gap: 1%;
   padding: 15px;
   }
   #head>div{
    height: 40px;
    /* border: solid 1px green; */
    text-align: center;
    padding-top: 12px;
    font-size: 20px;
    
   }
   #head>div a{
    text-decoration: none;
    color: black;
   }
   #head>div:hover{
    color: rgb(108, 104, 104);
    
   }
   #head>div:nth-child(2){
    color: rgb(108, 104, 104);
    border-bottom: solid 1px;
    border-bottom-color: blue;
    
   }
   #head>div a:hover{
    color: rgb(108, 104, 104);
    border: none;
   }
#innerbox{
    width: 60%;
    height: 400px;
    /* border: solid 1px green; */
    margin: auto;
}
h4{
   margin-left: 5%;
   color: grey;
}
input{
    display: block;
    width: 90%;
    height: 35px;
    margin: auto;
}
#signin{
    margin-top: 15%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: aliceblue;
    background-color: black;
    border: none;
    
}
p{
    text-align: center;
    color: grey;
}
h1{
    text-align: center;
    font-size: 120%;
}

#firstbox{
    width: 80%;
    /* height: 2%; */
    margin: auto;
    /* border: solid 1px green; */
    display: grid;
   grid-template-columns: repeat(2,48%);
   justify-content: center;
   gap: 2%;
   /* margin-top: -%; */
}
#firstbox>div{
    width: 90%;
    display: flex;
    justify-content: space-evenly;
    border: solid 1.5px rgb(193, 189, 189);
    margin: 2%;
    padding: 2%;
}
#firstbox>div:hover{
    border: solid 1px rgb(193, 186, 186);
    color: gray;
}
#firstbox>div>div{
    width: 50%;
    /* border: solid 1px teal; */
    /* height: 50%; */
}
#firstbox>div>div:nth-child(1){
    width: 40%;
    margin: auto;
}
#firstbox>div>div:nth-child(2){
    margin: auto;
    width: 100%;
    padding: 2%;
}
#firstbox>div>div>img{
  width: 50%; 
  height: 50%; 
}
#firstbox>div>div>a{
    font-size: 1vw;
    margin: 5%;
    text-decoration: none;
    /* font-weight: bold; */
    color: black;
}
a{
    text-align: center;
    /* text-decoration: underline; */
    display: block;
    margin: auto;
    color: grey;
    margin-top: 2%;
}

@media all and (min-width:540px) and (max-width: 720px){
    #outerbox{
        width: 90%;
        height: 600px;   
    }
    
    #firstbox>div>div>h5{
        font-size: 70%;
        /* margin: 30%; */
    }
    h1{
        font-size: 100%;
    }
    h4{
        font-size: 90%;
    }
    p{
        font-size: 90%;
    }
    a{
        font-size: 90%;
    }
    #firstbox>div>div>a{
        font-size: 1.5vw;
    }
    #firstbox>div>div:nth-child(1){
        width: 50%;
        /* margin: auto; */
    }
    #firstbox>div>div>img{
        width: 40%; 
        height: 40%; 
      }
    #firstbox>div>div{
        width: 90%;
    }
    #firstbox>div{
        width: 100%;
        margin: 0%;
        padding: -1%;
        height: 80%;
    }
    #firstbox{
        margin-top: -10%;
    }
    
}  
@media all and (min-width:320px) and (max-width: 539px){
    #outerbox{
        width: 100%;
        height: 580px;
        /* height: auto;        */
    }    
    
    #firstbox>div>div{
        width: 30%;
    }
    h1{
        font-size: 100%;
    }
    h4{
        font-size: 80%;
    }
    p{
        font-size: 75%;
    }
    a{
        font-size: 75%;
        margin-top: 10%;
    }
    #firstbox>div>div>a{
        font-size: 2vw;
    }
    #firstbox>div>div:nth-child(1){
        width: 50%;
        /* margin: auto; */
    }
    #firstbox>div>div>img{
        width: 40%; 
        height: 40%; 
      }
    #firstbox>div>div{
        width: 90%;
    }
    #firstbox>div{
        width: 100%;
        margin: -2%;
        padding: -2%;
        height: 80%;
    }
    #firstbox{
        margin-top: -10%;
    }
   
}