html {
      background: #649173;
    background: linear-gradient(to top, #6c5b7b, #c06c84, #355c7d );
   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%; }