/* 
body{
    background-color: #f7f7f7;

}
#main{
    font-family: 'Times New Roman', Times, serif;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:20px;
    grid-auto-rows: minmax(100px,auto);
    grid-auto-columns: minmax(50px,auto);
     margin-top: 15%; 
    margin-left: 2%;
    margin-right: 2%; 
   
   
}
a{
    text-decoration: none;
    font-size: medium;
    color: black;
}
#sub{
    margin: 10px;
    padding:15px;
    background-color: #93deff;
    text-align: center;
    border-radius: 5px;
}
#sub:hover{
    background-color: #ff895d;
}
@media screen and(max-width:768px) {
    #main {
        grid-template-columns:repeat(1,1fr);
    }
} */
body{
    background-color:#f7f7f7;
}
h2{
    text-align: center;
}
#main{
    font-family:'Times New Roman', Times, serif;
  
    display: grid;
   
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    grid-gap:20px;
    grid-auto-rows: minmax(100px,auto);
    grid-auto-columns: minmax(50px,auto);
    margin-top: 15%;
    margin-left: 5%;
    margin-right: 5%;
 
}


a{
    text-decoration:none;
    font-size:medium;
    color:black;
     
   
}
#sub{
 
    margin:10px; 
    padding:15px;
    background-color:#93deff;
    text-align:center;
    border-radius:5px; 
}
#sub:hover{
    background-color:#ff895d; 
}
@media screen and(max-width:412px){
    #sub{
        width:80%;
    }
}