@font-face {
   font-family: quikhand;
   font-display: swap;
   src: url(/css/fonts/quikhand.ttf);
}

@font-face {
   font-family: ryan;
   font-display: swap;
   src: url(/css/fonts/ryan_print.ttf);
}

/* Set everything to have a margin, padding, and border of 0 so the display on all browsers will look the same. Different browsers tend to have different defaults. */
html, body, section, div, p, li, blockquote, .menu, a, figure, img, .caption, .quote, form, pre, hr {
   margin: 0;
   padding: 0;
   border-width: 0;
}

*, *::before, *::after {
   max-width: 100%;
   box-sizing: border-box;
}

#mapCanvas * {
   max-width: initial;
}

:root {
   scrollbar-color: #9aa6bc #ffffff;
   --primary-color: #b33b00;
   --secondary-color: #0a1f5c;
   --highlight-color: #ffff00;
   --a-color: #AD3A00;
   --a-visited-color: #0a1f5c;
   --lighter-color: #ffffff0d;
   --lightest-color: #ffffff1a;
   --darken-color: #00000020;
   --darker-color: #00000030;
   --darkest-color: #00000040;

   --header-primary-color: #0a1f5c;
   --header-secondary-color: #ff661a; /* #993300 a53904 c40 */
   --header-highlight-color: #ffff00;
   --header-fonts: quikhand, 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive; 

   --hamburger-menu-size: 2em;
   --hamburger-menu-bar-height: 3px;
}

html {
   font: 100%/1.4 verdana, arial, helvetic, sans-serif;
   scroll-behavior: smooth;
   scroll-padding: 5em 0 0 0;
}

body {
   width: 100vw;
   min-height: 100vh;
   background-color: var(--secondary-color);
}

::selection {
   color: black;
   background: var(--highlight-color);
}


:target {
   border: 1px solid #ccc;
   background-color: rgba(0,0,0, 0.05);
   padding-block: 0.5rem;
   padding-right: 1rem;
}

main { /* Only necessary for IE as far as I can tell! */
   display: block;
   display: flow-root;
}

p, ul {
   max-width: 70em;
   margin-bottom: 0.8em;
}

h1, h2, h3 {
   color: var(--primary-color);
   text-shadow: none;
   
   font-family: var(--header-fonts);
   font-weight: normal;
   margin-top: 1.5em;
   margin-bottom: 0.25em;
   letter-spacing: 0.05em;
   text-wrap: balance;
}

h1 {
   font-size: 2.5rem;
   font-weight: bold;
   margin-top: 0.5em;
}

h1 > * {
   vertical-align: middle;
}

h2 {
   font-size: 1.8rem;
   clear: both;
}

* + h2 {
   margin-top: 1.8em;
}

h3 {
   font-size: 1.4rem;
   font-weight: bold;
}

.noGap {
   margin-top: 0.5em;
}

summary {
   font-size: 1.2rem;
   cursor: pointer;
}

.accent {
   color: #8b0000;
}

a {
   color: var(--a-color);
   display: inline-block;
   text-decoration: none;
   transition: 0.1s ease;
   border: 1px solid transparent;
}

a:visited {
   color: var(--a-visited-color);
}

a:hover, a:focus-visible {
   background: rgba(255, 255, 0, 0.3);
   border-color: rgba(0,0,0, 0.25);
   border-radius: 0.2em;
   text-decoration: underline;
}

.tableWrapper {
   overflow: auto;
}

.tableWrapper, table {
   border-spacing: 0;
   margin: 0.5em 0 1em;
}

.tableWrapper > table {
   margin: 0;
}

table caption {
   font-weight: bold;
}

table caption.top {
   caption-side: top;
}

table caption.bottom {
   caption-side: bottom;
}

table th, table td {
   padding: 0.2em 0.4em;
}

table.lock {
   position: relative;
   z-index: 0;
}

table.lock.head thead > tr:last-child > * {
   position: sticky;
   top: 0;
   z-index: 2;
   border-bottom: 1px solid #888;
}

table.lock.column tr > *:first-child {
   position: sticky;
   left: 0;
   z-index: 1;
   border-right: 1px solid #888;
}

table.lock.head.column thead > tr > *:first-child {
   z-index: 3;
}

table.lock tfoot > tr:first-child > * {
   border-top: 1px solid #888;
}

.toggleTable tr:nth-child(odd), .toggleTable tr:nth-child(odd) > *:first-child,
.toggleTable > div:nth-child(odd) {
   background: #f0f0f0;
}

.toggleTable tr:nth-child(even), .toggleTable tr:nth-child(even) > *:first-child,
.toggleTable > div:nth-child(even) {
   background: #e0e0e0;
}

.toggleTable thead tr:nth-child(n), .toggleTable thead tr:nth-child(n) > *:first-child,
.toggleTable tfoot tr:nth-child(n), .toggleTable tfoot tr:nth-child(n) > *:first-child,
.toggleTable caption {
   background: #d0d0d0;
   padding: 0.4em;
}

input, select, textarea {
   border: 1px solid #888;
   border-radius: 0.2em;
   padding: 0.1em 0.2em 0.2em;
}

input[type="date"] {
   padding: 0.3em;
}

#mapCanvas * {
   border: initial;
   border-width: 0;
   border-radius: initial;
   box-shadow: none;
}

#mapCanvas button {
   background-color: transparent;
}

label:not(.checkbox), legend {
   background: #eee;
   padding: 0.1em 1em 0em 0.5em;
   font-size: 0.9rem;
   font-weight: normal;
   display: inline-block;

   border: 1px solid gray;
   border-bottom: 0;
   border-top-right-radius: 1em 2em;
}

label:not(.checkbox)+span {
   font-style: italic;
   font-size: 0.9rem;
}

label:not(.checkbox)~input, label~select, label~textarea {
   border-top-left-radius: 0;
}

label:not(.checkbox)~input, label~select, label:not(.checkbox)~textarea, label:not(.checkbox)~div {
   display: block;
   margin: 0 0 0.5em;
   font-size: 1.1rem;
}

label:not(.checkbox)~div, fieldset {
   border: 1px solid gray;
   margin: 0;
   padding: 0.5em;
   border-radius: 0 0.5em 0.5em 0.5em;
}

label.checkbox {
   margin-bottom: 0.5em;
   padding: 0.5em;
   display: block;
   cursor: pointer;

   border: 1px solid transparent;
   border-radius: 0.2em;
}

label.checkbox:hover, label.checkbox:focus-visible {
   background: #ffa none;
   border: 1px solid gray;
}

textarea {
   field-sizing: content;
   min-height: 5em;
   max-height: 80vh;
}

ul {
   list-style-type: square;
}

li + li {
   margin-top: 0.7em;
}

li + li.break {
   margin-top: 2em;
}

img {
   height: auto;
   font-style: italic;
}

blockquote {
   margin: 1em;
}

#errorList {
   position: relative;
   margin: 1em 0;
   background: rgba(255,0,0, 0.05);
   border-radius: 0.1em;
   padding: 0 0 0.5em 0.5em;
}

#errorList > div {
   display: table-cell;
   vertical-align: middle;
   padding-right: 0.5em;
   min-width: 48px;
}

#errorList ol.hide {
   list-style: none;
   margin: 0;
   padding: 0;
}

#errorList * {
   color: #333;
   background: transparent none;
   font-weight: normal;
   text-decoration: none;
   margin: 0.3em 0;
   border: none;
}

#errorList h2 {
   padding: 0;
}

#errorList a {
   font-style: normal;
   display: inline;
}

#errorList a:hover, #errorList a:focus-visible {
   text-decoration: underline;
}

.linkList li {
   margin: 0.2em;
}

@media all and (min-width:30em) {
   textarea {
      min-height: 10em;
   }
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
   background: #ffd none;
}

fieldset {
   background: #f2f2f2 none;
   margin: 0 0 1em;
   padding: 1em 0.5em 0;
   border-radius: 0.2em;
}

fieldset legend {
   background: #ffffff none;
   border: 1px solid gray;
   padding: 0.1em 0.5em;
}

.footnote {
   color: #444;
   font-size: 0.9rem;
   margin: 1em 0;
}

.gm-style img { /* This line is necessary for Google Map controls to work correctly--setting a max-width to 100% would break it! */
   max-width: none !important;
}

/***************************/
/** CUSTOM HTML CLASSES *****/
a:hover, a:focus-visible {
   background: transparent none;
   border-color: transparent;
}

a img {
   display: block;
}

a:hover img, a:focus-visible img {
   filter: brightness(125%) saturate(200%) drop-shadow(0 0 0.5em var(--highlight-color));
}

button, a.buttonLink, button:disabled, button:disabled:hover {
   color: black;
   background: #ddd linear-gradient(#ccc, #eee, #ccc);

   border: 1px solid gray;
   border-radius: 0.2em;

   text-decoration: none;
   text-shadow: none;
   text-align: center;
   font-size: 1.2rem;
   font-weight: normal;
   font-family: verdana, arial, helvetica, sans-serif;
   font-style: normal;

   margin: 0.2em 0;
   padding: 0.2em 0.3em 0.25em;
   display: inline-block;
   vertical-align: middle;
   cursor: pointer;
   box-shadow: 0 0 0.2em gray;
   transition: 0.3s ease;

   position: relative;
   overflow: hidden;
}

button:disabled, button:disabled:hover {
   color: #888;
   background-image: none;
   border: lightgray;
   filter: grayscale(1);
   cursor: not-allowed;
}

@keyframes sheen {
   100% {
      transform: translateX(100%) rotateZ(-60deg);
   }
}

button::after, a.buttonLink::after, .glowLinks a::after {
   position: absolute;
   content: '';
   top: 0;
   bottom: 0;
   left: -50%;
   right: -50%;
   background: transparent linear-gradient(to bottom, rgba(128,128,128,0), rgba(255,255,255, 0.3), rgba(128,128,128,0));
   transform: translateX(-100%) rotateZ(-60deg);
}

button:hover::after, a.buttonLink:hover::after, .glowLinks a:hover::after,
button:focus-visible::after, a.buttonLink:focus-visible::after, .glowLinks a:focus-visible::after {
   animation: sheen 0.5s forwards linear;
}

button img, a img {
   max-width: initial;
}

button > *, a.buttonLink > * {
   display: inline-block;
   vertical-align: middle;
}

button > img, a.buttonLink > img {
   padding-right: 0.1em;
}

button > span, a.buttonLink > span {
   font-size: 1rem;
}

button.go, a.buttonLink.go,
button.cancel, a.buttonLink.cancel {
   padding-left: 1.5em;
   border: 1px outset gray;
   background: #f0f0f0 none;
}

button.go, a.buttonLink.go {
   color: #3B7100;
   background: url(/css/images/ok-icon.png) 0.3em 50% no-repeat, #F0F0F0;
   background-size: 1em, 100%;
}

button.go:hover, a.buttonLink.go:hover,
button.go:focus-visible, a.buttonLink.go:focus-visible {
   color: #0B4100;
   border: 1px outset green;
   background: url(/css/images/ok-icon.png) 0.1em 50% no-repeat, #E0FFE0;
   background-size: 1.5em, 100%;
   text-decoration: underline;
}

button.cancel, a.buttonLink.cancel {
   color: #B3310F;
   background: url(/css/images/cancel-icon.png) 0.3em 50% no-repeat, #F0F0F0;
   background-size: 1em, 100%;
}

button.cancel:hover, a.buttonLink.cancel:hover, 
button.cancel:focus-visible, a.buttonLink.cancel:focus-visible {
   color: #830100;
   border: 1px outset red;
   background: url(/css/images/cancel-icon.png) 0.1em 50% no-repeat, #F0E0E0;
   background-size: 1.5em, 100%;
   text-decoration: underline;
}

button {
   line-height: 1.4;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea {
   width: 50em;
}

input[type="file"] {
   background: rgba(0,0,0, 0.1) none;
}

button:hover, a.buttonLink:hover,
button:focus-visible, a.buttonLink:focus-visible {
   color: black;
   background: #ff8 linear-gradient(#dd8, #ffc, #dd8);
   border: 1px solid black;
   text-decoration: none;
   box-shadow: 0 0 0.2em black;
}

a.buttonLink:hover, a.buttonLink:focus-visible {
   text-decoration: underline;
}

.premiumIcon {
   display: inline-block;
   position: relative;
}

.premiumIcon > img + img {
   position: absolute;
   top: 0;
   right: 0;
}

figure, .caption {
   color: #444;
   margin: 0 0.5em 0.5em;
   font-size: 0.95rem;
   page-break-inside: avoid;
}

.frame {
   background: #f8fff8 none;
   border: 2px solid #008000;
   border-radius: 0.5em;

   padding: 0;
   margin: 0.5em;
}

.frame h2 {
   background:#f6f6f6 linear-gradient(#eee, #fff, #eee, #ddd, #ccc);
   box-shadow:0 2px 2px gray;
   border: 2px solid #0000f0;
   border-radius:1em 0 1em 0.2em / 2em 0 2em 0.2em;
   margin: 0.2em -0.5em 0.25em;
   padding: 0.1em 0.5em 0 0.75em;
}

.frame p, .frame div {
   margin-left: 0.5em;
   margin-right: 0.5em;
}

.trailPhoto {
   margin-bottom: 0.5em;
   position: relative;
}

.trailPhoto img {
   border-radius: 0.2em;
}

.videoIcon {
   position: absolute;
   top: 0.5em;
   right: 0;
}

.videoIcon a:hover, .videoIcon a:focus-visible {
   background: transparent none;
   border: 1px solid transparent;
   filter: saturate(400%) drop-shadow(0 0 0.5em yellow);
}

.columnized {
   column-width: 20em;
}

.columnized p {
   text-indent: 2em;
}

fieldset, li, .block, .inline, .noBreaks, .caption, .checkbox {
   page-break-inside: avoid;
}

.slides {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}

.slides > * {
   margin: 1em;
}

.block, .inline {
   display: block;
   margin: 0 0 1em;
}

.inline {
   display: inline-block;
   vertical-align: middle;
   margin-right: 1em;
}

.top {
   vertical-align: top;
}

.bottom {
   vertical-align: bottom;
}

.table {
   display: table;
}

.table > * {
   display: table-row;
}

.table > * > * {
   display: table-cell;
   padding: 0.2em 1px;
}

.table > * > * + * {
   padding-left: 0.5em;
}

.table.inline {
   display: inline-table;
}

.table > * > *:first-child, .label {
   font-variant: small-caps;
   font-size: 0.9rem;
   white-space: nowrap;
}

a.psa {
   border: 1px solid #aaa;
}

a.psa img {
   display: block;
   max-width: 100%;
}

.error {
   background: #fee none;
   border: 1px solid red;
}

.progress {
   color: black;
   text-shadow: 2px 2px 3px white;

   background: #ddd linear-gradient(to bottom, #ddd, white, #ddd);
   display: block;
   border: 1px inset #555;
   border-radius: 0.15em;

   text-align: center;
   font-size: 0.95rem;
   font-weight: bold;
   height: 1.5em;
}

.progress .completed {
   background: #23D433 linear-gradient(to bottom, #B3FFB4, #23D433, #B3FFB4);
   float: left;
   height: 100%;
}

label:not(.checkbox)+div, label:not(.checkbox)+span+div {
   background: #f0f0ff none;
}

.redBold {
   color: red;
   font-weight: bold;
}

label.error {
   background: #fdd none;
   box-shadow: inset 0 0 0.1em 0.1em red;
}

label.error+input, label.error+textarea {
   background: #fee none;
   box-shadow: 0 0 0.1em 0.1em #f99;
}

.thinBorder {
   border: 1px solid black;
}

.memberInfo div {
   margin: 0.5em 0;
}

.pill, a.pill {
   display: inline-block;
   
   color: white;
   background: #000066 none;
   border: 1px solid #0000aa;
   border-radius: 1em;
   box-shadow: 0.1em 0.2em 0.3em rgba(0,0,0, 0.3);

   font-size: 90%;
   font-variant: small-caps;
   line-height: 1;
   padding: 0.25em 0.5em;
   margin: 0.5em 0.25em 0.5em 0;
}

a.pill:hover, a.pill:focus-visible {
   border-radius: 1em;
   background-image: linear-gradient(rgba(255, 255, 0, 0.1), rgba(255, 251, 0, 0.1));
   box-shadow: 0.05em 0.1em 0.1em rgba(0,0,0, 0.4);
}

a.pill.premium {
   background-color: #004400;
   border-color: #008800;
}

a.pill.active {
   background-color: #ff4000;
   border-color: #802000;
}

.pill.new {
   background-color: #ff0000;
   border-color: #802000;
}

/*************************/
/**** HEADER ****/
#skipToContent a {
   position: absolute;
   top: 0;
   z-index: -99999999;
   opacity: 0;
   color: white;
   text-shadow: 0 1px 1px black;
   font-weight: normal;
   background: #800000;
   border: 1px solid white;
   border-radius: 0.1em;
   padding: 0.5em;
   outline: none;
}

#skipToContent a:focus-visible {
   z-index: 99999999;
   opacity: 1;
}

/***************************/
/***** HEADER **************/
.mainHeader {
   color: white;
   text-shadow: 0 1px 1px black;
   background: var(--header-primary-color);
   position: fixed;
   top: 0;
   width: 100%;
   padding: 0.2em;
   opacity: 0.95;
   z-index: 9999;
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-align: center;
}

.mainHeader a {
   color: var(--header-secondary-color);
}

.mainHeader a:hover, .mainHeader a:focus-visible {
   color: var(--header-highlight-color);
   text-decoration: none;
}

.mainHeader img {
   filter: drop-shadow(0 1px 0 black);
}

a.hamburgerIcon {
   color: white;
   min-width: 1em;
   display: inline-block;
   cursor: pointer;
   width: var(--hamburger-menu-size);
   height: var(--hamburger-menu-size);
   margin: calc(var(--hamburger-menu-size) / 5);
}

a.hamburgerIcon:hover, a.hamburgerIcon:focus-visible {
   color: white;
   outline: 1px dotted var(--header-highlight-color);
}

.hamburgerIcon .bar {
   display: block;
   width: 100%;
   height: var(--hamburger-menu-bar-height);
   margin: calc(var(--hamburger-menu-size) / 6) 0;
   border-radius: var(--hamburger-menu-bar-height)/50%; 
   background-color: currentColor;
   transform-origin: center;
   transition: 0.4s;
}

.hamburgerIcon.isOpened .bar:nth-child(1) {
   transform: translate(0, calc(var(--hamburger-menu-bar-height) + var(--hamburger-menu-size) / 6)) rotate(-135deg);
}

.hamburgerIcon.isOpened .bar:nth-child(2) {
   opacity: 0;
   transform: rotate(-360deg);
}

.hamburgerIcon.isOpened .bar:nth-child(3) {
   transform: translate(0, calc(0em - var(--hamburger-menu-bar-height) - var(--hamburger-menu-size) / 6)) rotate(135deg);
}

.hamburgerIcon ~ .mainMenu:focus-within,
.hamburgerIcon.isOpened ~ .mainMenu {
   transform: scale(1,1);
}

.hamburgerIcon ~ .mainMenu:focus-within a,
.hamburgerIcon.isOpened ~ .mainMenu a {
   opacity: 1;
   transition: opacity 150ms ease-in-out 150ms;
}

.mainHeader .logo {
   display: flex;
   flex-direction: column;
   justify-items: start;
   align-items: center;
   background: transparent none;
   border: none;
   padding: 0;
}

.websiteName {
   font-family: var(--header-fonts);
   font-size: 1.3rem;
}

.tagline {
   font-size: 0.7rem;
   font-variant: small-caps;
   display: none;
}

.mainMenu {
   background: var(--header-primary-color);
   position: absolute;
   top: 100%;
   left: 0;
   width: 10em;
   height: calc(100vh - 100%);
   overflow: auto;
   transform: scale(1, 0);
   transform-origin: top;
   transition: transform 300ms ease-in-out;
}

.mainMenu ul, .mainMenu li {
   margin: 0;
   padding: 0;
   list-style: none;
}

.mainMenu ul {
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--lightest-color);
}

.mainMenu a {
   color: white;
   font-weight: normal;
   font-size: 0.9rem;
   font-variant: small-caps;
   text-align: left;
   padding: 0.8em;
   opacity: 0;
   transition: opacity 150ms ease-in-out;
   display: block;
   border-bottom: 1px solid var(--lightest-color);
   position: relative;
}

.mainMenu a.selected {
   color: var(--header-highlight-color);
   font-weight: bold;
}

.mainMenu a:hover, .mainMenu a:focus-visible {
   background-color: var(--lighter-color);
}

.mainMenu a::before {
   content: '';
   display: block;
   background: var(--header-highlight-color);
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 0.3em;
   border-radius: 0.2em;
   transform: scale(1, 0);
   transition: transform ease-in-out 50ms;
}

.mainMenu a:hover::before, .mainMenu a:focus-visible::before {
   transform: scale(1,1);
   transition: transform ease-in-out 250ms;
}

.mainHeader .actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
   grid-area: headerActions;
}

.mainHeader .actions a {
   margin: 0.3em;
}

.mainHeader .actions img {
   margin: 0.2em;
   min-width: 32px;
}

@media all and (min-width:395px) {
   .homeLink > * {
      display: inline-block;
      vertical-align: top;
   }

   .tagline {
      display: block;
   }
}

@media all and (min-width:45em) {
   a.hamburgerIcon {
      display: none;
   }

   .mainHeader {
      display: grid;
      grid-template-areas: "menuLogo mainMenu headerActions";
      grid-template-columns: auto 1fr auto;
      align-items: center;
   }

   .mainHeader .logo {
      grid-area: menuLogo;
      padding-left: 0.5em;
   }

   .mainMenu {
      position: relative;
      left: initial;
      top: initial;
      height: initial;
      width: initial;
      transition: none;
      transform: scale(1,1);
      grid-area: mainMenu;
   }

   .mainMenu ul {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      border: none;
   }

   .mainMenu a {
      opacity: 1;
      padding: 0.2em 0.4em;
      margin: 0.3em;
      border: none;
   }

   .mainMenu a:hover, .mainMenu a:focus-visible {
      background-color: transparent;
   }

   .mainMenu a::before {
      width: calc(100% - 0.8em);
      height: 0.2em;
      left: auto;
      transform: scale(0,1);
      transform-origin: left;
   }

   .mainHeader .actions {
      margin-left: 1em;
   }
}

/*************************/
/**** SUBMENU *************/
nav.submenu {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   white-space: nowrap;
   letter-spacing: 0.05em;
   background: rgb(255, 252, 240) none;
   border: 1px solid var(--darkest-color);
   border-width: 1px 0;
}

nav.submenu a {
   display: inline-block;
   color: var(--secondary-color);
   text-shadow: 0 1px 1px white;
   padding: 0.5em 2em;
   white-space: nowrap;
   line-height: 1.3;
   border-radius: 0;
}

nav.submenu a.selected {
   color: #a30;
   text-shadow: 0 1px 1px white;
   outline: 1px dotted #611d09;
   background: #ffa;
}

nav.submenu a:hover,
nav.submenu a:focus-visible {
   color: yellow;
   background: #6a8dc3 none;
   text-shadow: 0 1px 1px black;
   outline: 1px dotted #611d09;
}

/*************************/
/**** PAGINATION *********/
nav.pages {
   display: block;
   margin: 1em 0;
}

nav.pages a {
   display: inline-block;
   padding: 0.5em 1em;
   text-decoration: none;
   font-size: 1.1rem;
   font-style: normal;
   background: rgba(0,0,0, 0.15) none;
   transition: background-color 0.2s;
   border: 1px solid rgba(0,0,0, 0.3);
   border-radius: 0;
}

nav.pages a:first-child {
   border-radius: 0.2em 0 0 0.2em;
}

nav.pages a:last-child {
   border-radius: 0 0.2em 0.2em 0;
}

nav.pages a.active {
   background-color: #39833b;
   color: white;
   text-shadow: -1px 2px 1px black;
}

nav.pages a:hover:not(.active),
nav.pages a:focus-visible:not(.active) {
   background-color: rgba(0,0,0, 0.2);
}

.announcements {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   color: maroon;
   background-color: hsl(24, 100%, 90%);
   border-bottom: 1px solid var(--darkest-color);
   text-align: center;
   padding: 0.5em;
}

/*************************/
/*** CONTENT *************/
#headerLinkAd {
   width: 100%;
   max-width: 468px;
   display: none;
}

@media all and (min-width:31.25em) { /* 500px */
   #headerLinkAd {
      display: block;
   }
}

main {
   background: #fff none;
   padding: 4.5em 0.5em 0.5em;
}

main a {
   font-style: italic;
}

main a:focus-visible {
   outline: 1px solid red;
   border-radius: 0;
}

main .linkList a {
   color: #000060;
   font-style: normal;
}

main .linkList a:visited {
   color: #600060;
}

@media all and (min-width:45em) {
   main {
      padding: 9em 1em 1em;
   }
}

@supports (position:sticky) or (position:-webkit-sticky) {
   .mainHeader {
      position: -webkit-sticky;
      position: sticky;   
   }

   main {
      padding-top: 0;
   }
}

#randomPhoto {
   background: #eee none;
   display: inline-block;

   border: 1px solid gray;
   border-radius: 0.35em;
   box-shadow: 0.1em 0.1em 0.3em gray;
}

#randomPhoto img {
   border-radius: 0.25em 0.25em 0 0;
}

#randomPhoto .caption {
   padding: 0 0.5em;
   text-align: left;
}

.googleAd.content {
   width: 100%;
   margin: 1em 0;
   clear: both;
}

.googleAd.header-adlink {
   display: none;
   margin: 0.5em 0;
}

@media all and (min-width:500px) {
   .googleAd.header-adlink {
      display: block;
   }
}

/*************************/
/**** SITEMAP *************/
#sitemap {
   margin-top: 5em;
   column-width: 20em;
   column-gap: 5em;
   clear: both;
}

#sitemap .section {
   max-width: 20em;
   margin: 0 1em 5em 0;
   page-break-inside: avoid;
}

#sitemap h2 {
   margin: 0;
}

#sitemap li a {
   padding: 0.3em;
   line-height: 1.6;
   display: block;
}

#sitemap li a img {
   display: inline-block;
   vertical-align: middle;
}

/*************************/
/**** FOOTER ****/
footer {
   color: white;
   text-shadow: 1px 1px 2px black;
   font-variant: small-caps;
   background-color: #1d2e49;
   background-color: var(--header-primary-color); 
   opacity: 0.9;
   padding: 1em 0.5em;
   clear: both;
}

footer > * {
   text-align: center;
   margin: 2em 0.2em;
}

footer a, footer a:link, footer a:visited {
   color: white;
   text-shadow: 1px 1px 2px black;
   text-decoration-thickness: 1px;
   border: 1px solid transparent;

   font-size: 1.1rem;
   line-height: 1.5em;
   padding: 0.2em 1em 0.4em;
}

footer a:hover, footer a:focus-visible {
   color: yellow;
   background: #1d2e49 linear-gradient(#7b71cf 10%, #3d4e69 80%);
   border: 1px solid rgba(255,255,255, 0.15);
}

.glowLinks a, .glowLinks a:link, .glowLinks a:visited {
   padding: 0;
   margin: 0.4em 0.5em 0;
   line-height: 1em;
   filter: saturate(80%) drop-shadow(0 1px 0 black);
   border: none;

   /* These are needed for the 'sheen' effect--don't' remove them! */
   position: relative;
   overflow: hidden;
}

.glowLinks a:hover, .glowLinks a:focus-visible, .glowLinks a:active {
   filter: saturate(200%) drop-shadow(0 0 0.5em yellow);
   background: none;
}

footer #pageStats {
   text-align: left;
   font-variant: normal;
}

.userPhoto {
   display: inline-block;
   vertical-align: middle;
   border-radius: 0;
   background: #105f5f;
}

a[target="_blank"]::after {
   content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
   margin: 0 3px 0 5px;
}

.circleClip { border-radius: 50%; -webkit-clip-path: circle(50%); clip-path: circle(50%); }
.vEllipseClip { -webkit-clip-path: ellipse(35% 50% at 50% 50%); clip-path: ellipse(35% 50% at 50% 50%); }
.hEllipseClip { -webkit-clip-path: ellipse(50% 35% at 50% 50%); clip-path: ellipse(50% 35% at 50% 50%); }
.triangleClip { -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.trapezoidClip { -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); }
.parallelogramClip { -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); }
.diamondClip { -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.pentagonClip { -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.hexagonClip { -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.heptagonClip { -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); }
.octagonClip { -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
.nonagonClip { -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%); clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%); }
.decagonClip { -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); }
.bevelClip { -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }
.rabbetClip { -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); }
.leftArrowClip { -webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); }
.rightArrowClip { -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); }
.leftPointClip { -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%); clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%); }
.rightPointClip { -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); }
.leftChevronClip {  -webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); }
.rightChevronClip { -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }
.starClip { -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.crossClip { -webkit-clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%); clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%); }
.messageClip { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); }
.closeClip { -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); }