body{
   font-size: 16pt;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   margin: 1.5em;
   line-height: 1.8em;
 }


body, main {
    background: whitesmoke;
    color: #111;
  }

  footer {
    background: #666;
    font-size: 80%;
  }

  img {max-width: 20%; float: right; margin: 1em; rotate: 12deg;}

  dt {font-weight: bold; margin-top: 1em;}


  .text-center {
    text-align: center;
  }

  .a11y-helper {
    position: fixed;
    top: 1rem;
    left: -999em;
    z-index: 11;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid black;
    border-radius: 0.6rem;
    box-sizing: border-box;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    max-width: 100%;
    display: inline-block;
    margin: 0;
    padding: 0.3em 0.8em;
    font-weight: 500;
    text-decoration: none;
    border-radius: 3rem;
    white-space: nowrap;
    background-color: transparent;
    color: blue !important;
    border: 1px solid red;
    transition: background-color 150ms ease;

    &:focus {
      left: 1rem;
      background: white;
      }
  }

  :focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px hsla(220, 100%, 50%, 80%);
    transition: box-shadow 0.6s ease;
  }

  @media (prefers-color-scheme: dark) {

    a:link {color: #00c5e9}
    a:hover {color: #ff48df !important}
    a:visited {color: #9b80ff}

    body,
    main {

      background: #111;
      color: whitesmoke;
    }
  }

  h2 {
    vertical-align: center;
    text-align: center;
  }

  html,
  body {
    margin: 0;
    height: 100%;
  }

  * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    box-sizing: border-box;
  }

  /*----------------------------------------
       Base styles that's useful in
       most projects.
   ----------------------------------------*/

  /*----------------------------------------
       Debug colors and class overlays.
   ----------------------------------------*/


  .main {
    grid-area: main;
    min-height: 700px;
    padding: 20px;
  }

  /* .aside { grid-area: aside; padding: 12px; } */
  .footer {
    grid-area: footer;
    padding: 12px;
    text-align: center;
  }

  .footer,
  .footer * {
    color: whitesmoke;
  }

  .footer a {color: lime !important}


  /*----------------------------------------
       tablet
   ----------------------------------------*/
  @media only screen and (min-width: 481px) and (max-width: 768px) {


    .menu-button-container {
      display: block;
      position: relative;
      top: 4px;
      right: 13px;
    }


  }

  /*----------------------------------------
       mobile
   ----------------------------------------*/
  @media only screen and (max-width: 480px) {


    footer,
    footer>ul {
      display: block !important;
    }

    footer>ul li {
      list-style: square;
    }

    footer>ul li a {
      display: inline-block;
      width: 100%;
      margin-bottom: 1em;
    }

    .menu-button-container {
      display: block;
      position: relative;
      top: 4px;
      right: 13px;
    }
  }

  .fixed-top{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #666;
    color: #FFF;
  }

  @media (prefers-color-scheme: dark) {
    .fixed-top {
      background: #2946a3;
      color: whitesmoke;
    }
  }

  .fixed-top h1 {
    letter-spacing: -1px;
    margin-left: 5px;
    padding-left: 10px;
    padding-top: 3px;
  }

  .fixed-top h1 a {
    color: white;
    text-decoration: none;
  }

  .menu,
  .footer-menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .menu>li,
  .footer-menu>li {
    margin: 0 1rem;
    overflow: hidden;
  }

  .menu>li a,
  .footer-menu>li a {
    color: white !important;
    text-decoration: none;
  }

  .menu>li a:hover,
  .footer-menu>li a:hover {
    color: yellow !important;
  }

  .menu-button-container {
    display: none;
    height: 100%;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #menu-toggle {
    display: none;
  }

  .menu-button,
  .menu-button::before,
  .menu-button::after {
    display: block;
    background-color: #fff;
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
  }

  .menu-button::before {
    content: '';
    margin-top: -8px;
  }

  .menu-button::after {
    content: '';
    margin-top: 8px;
  }

  #menu-toggle:checked+.menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
  }

  #menu-toggle:checked+.menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
  }

  #menu-toggle:checked+.menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
  }

  @media (max-width: 700px) {
    .menu-button-container {
      display: flex;
    }

    .menu {
      position: absolute;
      top: 0;
      margin-top: 50px;
      left: 0;
      flex-direction: column;
      width: 100%;
      just2ify-content: center;
      al2ign-items: center;
      z-index: 2;
    }

    #menu-toggle~.menu li {
      height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle:checked~.menu li {
      border: 1px solid #333;
      height: 2.5em;
      padding: 0.5em;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle:checked~.menu {
      height: 100%;
      background: black;

    }

    .menu>li {
      display: flex;
      justify-content: center;
      margin: 0;
      color: white;
      background-color: black;
      line-height: 3em;

      width: 100%;
      font-size: x-large;

    }

    .menu>li a {
      color: white !important;
      text-decoration: none;
      display: inline-block;
      width: 100%;
      text-align: left;
      padding: 0 1em;
      line-height: 2em;

    }

    .menu>li a:hover {
      text-decoration: underline;
    }

    .menu>li:not(:last-child) {
      border-bottom: 1px solid #444;
    }
  }