:root {
  --Black: #000000;
  --Gray: #757575;
  --White: #FFFFFF;
  --BrunswickGreen: #0C3F32;
  --Viridian: #1C8A6E;
  --Mint: #2AC9A0;
  --EnglishViolet: #403954;
  --PompPower: #7E70A3;
  --Wisteria: #B09CE2;
  --BlackOlive: #363326;
  --Coyote: #756D50;
  --Ecru: #D9CA95;
  --BarnRed: #750000;
  --OffRed: #e33135;
  --LightRed: #FF7979;  
}

html {
  background-color: var(--BlackOlive);
}

body {
  background-color: var(--EnglishViolet);
  color: var(--Wisteria);
  font-family: sans-serif;
  margin: 0 auto;
  margin-top: -1rem;
  max-width: 700px;
}

menu {
  text-align: center;
  color: var(--Mint);
}

menu a,
menu a:visited {
  color: yellow;
}

menu a:hover {
  color: var(--OffRed);
}

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

a:hover {
  color: var(--LightRed);
}

a.top-link {
  color: yellow;
  float: right;
  text-decoration: none;
  padding-top: 0.5rem;
}

h1, h3, h3 {
color: var(--LightRed);
}

h1 {
  border-bottom: thin solid var(--LightRed);
  padding-bottom: 0.5rem;
  text-align: center;
}

hr {
  border: 0;
  border-top: thin dashed var(--LightRed);
  margin: 0;
  height: 1px;
}

img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

time {
  font-weight: bold;
  font-family: monospace;
  color: var(--PompPower);
}

details {
  margin-bottom: 1rem;
  border: thin solid var(--OffRed);
  padding: 0.7rem;
}

details summary {
  font-weight: bold;
  color: var(--LightRed);
  cursor:pointer;
}

footer {
  text-align: center;
}