@font-face {
      font-family: Whitehall;
      src:
        url('../fonts/Whitehall.woff') format('woff'),
        url('../fonts/Whitehall.ttf') format('truetype');
    }

    @font-face {
      font-family: ErasMedium;
      src:
        url('../fonts/ITCErasStd-Medium.woff') format('woff'),
        url('../fonts/ITCErasStd-Medium.ttf') format('truetype');
    }

    :root {
      --pagewidth: 1000px;
      --themeColorLight: #91C1CC;
      --themeColorDark: #468795;
      --storyColorFrom: #FFD;
      --storyColorTo: #E6C749;
    }

    body {
      margin: 0;
      font-family: Verdana, Geneva, sans-serif;
      line-height: 1.6em;
    }

    #main {
      width: var(--pagewidth);
      height: 100%;
      margin: 120px auto 60px auto;
      padding: 1em;
    }

    /* pertaining header  ------------------------------------ */

    header {
      height: 60px;
    }
    #main::before {
      height: 30px;
    }
    header {
      position: fixed;
      z-index: 99;
      top: 0;
      width: 100%;
      margin: auto;
      background: linear-gradient(180deg, #91C1CC, #468795);
      border-bottom: 1px solid black;
    }
    header div {
      width: var(--pagewidth);
      margin: 0 auto;
      padding: 0;
    }
    header div p {
      float: right;
      margin-top: 16px;
      margin-right: 100px;
      font-family: Whitehall, Verdana, Geneva, sans-serif;
      font-size: 2.5em;
      color: white;
      user-select: none;
    }

    /* pertaining 'more' div ------------------------------- */

    div#more {
      margin-top:50px;
      font-size:85%;
    }
    div#more hr {
      width:120px;
      border:1px solid var(--themeColorDark);
      margin-left:0;
      margin-bottom:-16px;
    }
    div#more ul {
      margin-top:-18px;
      list-style-type:square;
    }
    div#more li {
      margin-top:-6px;
      margin-bottom:-6px;
      margin-left:-22px;
    }
    div#more li::marker {
      color:var(--themeColorDark);
    }

    /* pertaining footer ------------------------------------ */

    #container::after {
      content: "";
      display: block;
    }
    footer, #main:after {
      height: 40px;
    }
    footer {
      position: fixed;
      z-index: 99;
      bottom: 0;
      width: 100%;
      margin: auto;
      background: linear-gradient(0, #91C1CC, #468795);
      border-top: 1px solid black;
    }
    footer div {
      width: var(--pagewidth);
      margin: auto;
      padding: 1em;
      color: white;
    }
    #departments {
      float: left;
      margin: -8px 0 0 -14px;
      padding: 0 1em;
      font-size: 85%;
    }

    #departments a {
      margin-right: 0.5em;
      padding: 3px 12px;
      border: 2px solid white;
      border-radius: 12px;
    }
    #departments a:link, #departments a:visited {
      text-decoration: none;
      color: white;
    }

    #moddate {
      float: right;
      margin: -8px -14px 0 0;
      padding: 0 1em;
      font-size: 85%;
    }


    #belowmenu * a {
      /*
      background-color: rgba(241, 238, 136, 1.0);
      background: linear-gradient(0deg, rgba(241, 238, 136,1) 0%, rgba(241, 238, 136,0) 16%, rgba(241, 238, 136,1) 16%, rgba(241, 238, 136,1) 41%, rgba(241, 238, 136,0) 41%);
      */

      background: linear-gradient(0, rgba(249,255,157,1) 0%, rgba(249,255,157,1) 55%, rgba(249,255,157,0) 56%, rgba(249,255,157,0) 100%);
      text-decoration: none;
    }

    h1, h2, h3, h4 {
      font-family: ErasMedium, Verdana, Geneva, sans-serif;
      color: var(--themeColorDark);
    }

    h2:has(+ p) {              /* h2 immediately followed by p */
      margin-bottom:-6px;
    }
    h3:has(+ p) {              /* h3 immediately followed by p */
      margin-bottom:-12px;
    }

    div.story {
      margin: auto; border: 1px solid black; border-radius: 3px; padding: 15px;

      background: linear-gradient(160deg, #FFD, #E6C749);
      /* background: linear-gradient(160deg, var(--storyColorFrom), var(--storyColorTo)); */
    }

    abbr { text-underline-position: under; }