html {
   background: #649173;
   background: radial-gradient(blue, orange, white);
   height: 100%;
   overflow: hidden;
}
body {
   font-family: Verdana;
   font-size: 13px;
   margin: 0;
   color: #0B375C;
   height: 100%;
   overflow: auto;
}
h1, a {
   color: #F88C15;
}
ul,ol {
   padding-inline-start: 30px;
}
#menu ul {
   padding: 0;
   padding-left: 8px;
}
#menu li {
   list-style-type: none;
}
.wrapper {
   display: grid;
   grid-template-columns: 1fr min(max(min(45vw,100%),85ch),100%) 1fr;
   padding-bottom: 40px;
   padding-top: 8px;
   overflow: auto;
}
.wrapper > * {
   grid-column: 2;
   background: rgba(255,255,255,0.75);
   padding: 8px;
   box-shadow: 0px 4px 4px rgba(0,0,0,0.125);
}
.full {
   width: 100%;
   grid-column: 1 / -1;
   background: transparent;
   box-shadow: none;
}
footer {
   text-align: center;
   font-size: 10px;
   font-style: italic;
}
.centered {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   flex-wrap: wrap;
   text-align: center;
}
img {
   margin-left: auto;
   margin-right: auto;
}
@media screen and (min-width: 992px) {
   #menu {
      grid-column: -1;
      grid-row: 1/6;
   }

}
img { max-width: 100%; }