header{
  max-height:500px;
  max-width:100%;
  margin-bottom:10px
}
#maingrid{
  display:grid;
  gap:10px 3px;
  grid-template-columns:300px 900px 300px;
  grid-template-rows:310px 310px 310px 26px;
  grid-template-areas:
  'nav main webring'
  'updates main webring'
  'updates main linkback'
  'footer footer footer';
  justify-content:space-around;
  align-content:start
}
main{
  grid-area:main;
  margin:0
}
#nav{
  grid-area:nav;
  margin:0
}
#updates{
  grid-area:updates;
  margin:0
}
#webrings{
  grid-area:webring;
  margin:0
}
#webring-section{
  margin:0 auto;
  text-align:center;
  max-height:500px;
  overflow:auto
}
#link-back{
  grid-area:linkback;
  margin:0
}
footer{
  grid-column:1 / 4;
  grid-area:footer;
  padding:3px;
  font-size:calc(var(--fontsize) - 3px);
  text-align:center;
  background-color:var(--lightblue);
  border:3px solid var(--darkblue);
  border-radius:7px
}
.subtitle{
  font-size:calc(var(--fontsize) + 3px);
  text-transform:uppercase;
  background-color:var(--lightblue);
  border-bottom:1px solid var(--darkblue)
}
#icon1,#icon2,#icon3,#icon4,#icon5{
  width:30px;height:30px
}
#icon1{background:url(/images/bullet.png) 0 0}
#icon2{background:url(/images/bullet.png) -30px 0}
#icon3{background:url(/images/bullet.png) -60px 0}
#icon4{background:url(/images/bullet.png) -90px 0}
#icon5{background:url(/images/bullet.png) -120px 0}
.flex{
  display:flex;
  justify-content:center
}

@media only screen and (max-width:811px){
  #maingrid{
    display:flex;
    flex-direction:column
  }
  #nav,#updates,#webrings,#link-back{
    max-height:250px;
    margin:0px;
    text-align:center;
    overflow:auto
  }
  #webring-section{
    overflow:visible
  }
  .subtitle{
    text-align:center
  }
  #mainframe{
    height:500px
  }
}
@media only screen and (min-width:811px){
  #mainframe{
    height:930px
  }
  #webrings{
    overflow:hidden
  }
}