:root{
  --lightblue:#afeeee;
  --darkblue:#00008b;
  --fontsize:18px
}
@font-face {
  font-family: "Pixel Operator";
  src: url(/fonts/PixelOperator.ttf)
}
body,html{
  padding:0;
  margin:0
}
body{
  color:#000;
  font-family:"Pixel Operator","Courier New", "Lucida Console";
  font-size:var(--fontsize)
}
h1{
  background-color:var(--lightblue);
  border-bottom:1px solid var(--darkblue);
  margin-top:0
}
h2,h3{
  background-color:var(--lightblue);
  border-bottom:1px solid var(--darkblue)
}
article{
  padding:3px
}
section{
  margin:5px 0px;
  padding:3px;
  background-color:rgba(255,255,255,.85);
  border:3px solid var(--darkblue);
  border-radius:7px
}
.list{
  list-style-position:outside;
  list-style-image:url(/images/bullet.webp)
}
.list ul{
  padding-left:20px
}
.center{
  display:block;
  margin:0 auto;
  max-width:99%;
  height:auto
}
.pic-credit{
  position:absolute;
  bottom:0;
  left:10%;
  text-shadow:-1px 0 #fff,0 1px #fff,1px 0 #fff,0 -1px #fff;
  text-decoration:underline auto;
  font-size:22px
}
.mytable{
  border:3px solid var(--darkblue);
  border-radius:7px;
  margin:3px;
  background-color:#fff
}
.mytable th,.mytable td{
  border:1px solid var(--darkblue);
  border-radius:7px;
  padding:5px
}
.mytable th{
  background-color:#afeeee
}
.r-18{
  color:#ff0000;
  text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000
}
.r-15{
  color:#ffaa11;
  text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000
}
@media only screen and (max-width:811px){
  .two-column-grid{
    display:flex;
    flex-direction:column
  }
  .left-column,.right-column{
    max-width:99%
  }
  .large-item{
    display:none
  }
  .small-item{
    display:block
  }
  h1,h2,h3{
    text-align:center
  }
}
@media only screen and (min-width:811px){
  .small-item{
    display:none
  }
  .two-column-grid{
    display:grid;
    grid-template-columns:50% 50%;
    grid-template-areas:'left right'
  }
  .left-column{
    grid-area:left
  }
  .right-column{
    grid-area:right
  }
}