body{
  background-color: #271E30;
 font-family:monospace;
 font-size:35px;
}

a {
 text-decoration:none;
 transition:0.5s ease-out;
}
a:hover{
 text-decoration:underline;
 filter:brightness(1.25);
 transition:0.5s ease-in;
}
.grid{
 display:grid;
 grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
 grid-auto-rows: 1fr;
}
.gridcard {
  border-width:5px;
  border-radius:8px;
  text-align:center;
  border-style:solid;
  margin:1em;
  gap:1em;
  grid-row: span 2;
}
.main{
 max-width:1000px;
 border-width:8px;
 border-style:double;
 font-size:30px;
 margin:auto;
 padding:5px;
}
h1{
  text-align:center;
  }
.nav{
  list-style:none;
  margin:0;
  padding:0;
  text-align: center;
}
.nav li{
 display: inline-block; 
 max-width:70%;
 font-size:30px;
}
.standard {
  background-color: #2E234A;
  color: #6046A3;
}
.moonview{
   background-color: #000A4D;
  color: #005AE3;
}
.sanctum {
  background-color: #3D0005;
  color: #DC1B4C;
}
.carnival {
  background-color: #22003D;
  color: #8E27C3;
}
.bastion {
  background-color: #50153D;
  color: #DC3CA4;
}
.pathopeir{
    background-color: #55265A;
  color: #D550E0;
}

.neofantasium {
    background-color: #5A5E63;
  color: #D2DDE3;
}

.icon{
 max-width:200px;
}

summary{
 list-style:none; 
}
summary:hover{
 filter: brightness(1.25);
 transition:0.5s ease-out;
}
@media (max-width: 600px){
  .grid{
 display:grid;
 grid-template-columns: repeat(auto-fill, minmax(150px, 2fr));
}
.main{
 max-width:350px;
 font-size:20px;
}
.icon{
 max-width:100px;
}
.gridcard {
  border-width:2px;
  border-radius:8px;
  text-align:center;
  border-style:solid;
  margin:1em;
  gap:1em;
  grid-row: span 2;
}

}