body {
  background-color:#810095;
  font-family: serif;
}
.main {
 background-color:#4F2E6D;
 color:#EA146A;
 border-style: dotted;
 border-width:10px;
 width:700px;
 max-width:100%;
 height:auto;
 margin:auto;
 padding:20px;
 font-size:30px;
}
.nav {
  margin:auto;
  padding:10px;
  
}
ul{
   font-size:30px;
   text-align:center;
      }
li{
  display:inline;
  list-style-type:none;
  background-color:#3B1367; 
  padding:5px;
      }

hr{
 border-color:#D22268;
}
      
a{
 color:#D22268;
 text-decoration:none;
}
a:hover{
  color:#FF6A48;
 text-decoration:underline;
}
.iconholder{
  font-size:20px;
  margin:10px;
  max-width:250px;
  display:inline-block;
  text-align:center;
}
.icon {
 max-width:100%;
 font-size:20px;
 border-radius:50%;
 border-width:15px;
 border-style:double;
}
.grid {
 display:grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-auto-rows: 1fr;
}
.gridcard {
 border-radius:50% ;
 transition:0.5s ease-out;
 text-align:center;
}
.gridcard:hover {
 filter:brightness(1.5); 
}
 @media (max-width: 600px) {    
 .main{
   max-width:500px;
   font-size:20px;
   padding:10px;
 }
 .main{
   max-width:300px;
   font-size:20px;
   padding:10px;
 }
 .grid {
 display:grid;
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	grid-auto-rows: 1fr;
	gap: 2em;
	margin: 2em 0;
}
.icon{
 border-width:5px; 
text-align:center;
}
 }