/*--------------- Variables ----------------- */

:root {
  --day: steelblue;
  --goldenhour: gold;
  --pinksun: violet;
  --civiltwilight: slateblue;
  --nauticaltwilight: navy;
  --night: #223;
}


.night {
background-image: linear-gradient(black 3px, transparent 3px), linear-gradient(90deg, black 3px, transparent 3px), linear-gradient(black 1.5px, transparent 1.5px), linear-gradient(90deg, black 1.5px, transparent 1.5px);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px;
background-attachment: fixed;
		}

.dawn-early {
background-color: transparent;
background-image: linear-gradient(black 3px, transparent 3px), linear-gradient(90deg, black 3px, transparent 3px), linear-gradient(black 1.5px, transparent 1.5px), linear-gradient(90deg, black 1.5px, transparent 1.5px), radial-gradient(circle farthest-side at bottom left, var(--civiltwilight) 0%, var(--nauticaltwilight) 30%, var(--night) 100%);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px, cover;
background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px, 0px 0px;
background-attachment: fixed;
		}

.dawn-late {
background-color: transparent;
background-image: linear-gradient(var(--night) 3px, transparent 3px), linear-gradient(90deg, var(--night) 3px, transparent 3px), linear-gradient(var(--night) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--night) 1.5px, transparent 1.5px), radial-gradient(circle farthest-side at bottom left, var(--pinksun), var(--civiltwilight) 30%, var(--nauticaltwilight) 60%, var(--night) 100%);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px, cover;
background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px, 0px 0px;
background-attachment: fixed;
		}

.sunrise {
background-color: transparent;
background-image: linear-gradient(navy 3px, transparent 3px), linear-gradient(90deg, navy 3px, transparent 3px), linear-gradient(navy 1.5px, transparent 1.5px), linear-gradient(90deg, navy 1.5px, transparent 1.5px), radial-gradient(circle farthest-side at bottom left, var(--goldenhour), var(--pinksun) 20%, var(--day) 100%);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px, cover;
background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px, 0px 0px;
background-attachment: fixed;
		}

.day {
background-color: transparent;
background-image: linear-gradient(navy 3px, transparent 3px), linear-gradient(90deg, navy 3px, transparent 3px), linear-gradient(navy 1.5px, transparent 1.5px), linear-gradient(90deg, navy 1.5px, transparent 1.5px), linear-gradient(var(--civiltwilight), var(--day));
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px, cover;
background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px, 0px 0px;
background-attachment: fixed;
		}

.sunset {
background-color: transparent;
background-image: linear-gradient(navy 3px, transparent 3px), linear-gradient(90deg, navy 3px, transparent 3px), linear-gradient(navy 1.5px, transparent 1.5px), linear-gradient(90deg, navy 1.5px, transparent 1.5px), radial-gradient(circle farthest-side at bottom right, var(--goldenhour), var(--pinksun) 20%, var(--day) 100%);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px, cover;
background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px, 0px 0px;
background-attachment: fixed;
		}

.dusk-early {
background-color: transparent;
background-image: linear-gradient(var(--night) 3px, transparent 3px), linear-gradient(90deg, var(--night) 3px, transparent 3px), linear-gradient(var(--night) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--night) 1.5px, transparent 1.5px), radial-gradient(circle farthest-side at bottom right, var(--pinksun), var(--civiltwilight) 30%, var(--nauticaltwilight) 60%, var(--night) 100%);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px, cover;
background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px, 0px 0px;
background-attachment: fixed;
		}

.dusk-late {
background-color: transparent;
background-image: linear-gradient(black 3px, transparent 3px), linear-gradient(90deg, black 3px, transparent 3px), linear-gradient(black 1.5px, transparent 1.5px), linear-gradient(90deg, black 1.5px, transparent 1.5px), radial-gradient(circle farthest-side at bottom right, var(--civiltwilight) 0%, var(--nauticaltwilight) 30%, var(--night) 100%);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px, cover;
background-position: -3px -3px, -3px -3px, -1.5px -1.5px, -1.5px -1.5px, 0px 0px;
background-attachment: fixed;
		}

/*--------------- Basic Section Structure ----------------- */

		* {
			margin: 0;
			padding: 0;
			text-indent: 0;
			line-height: 1;
			max-width: 100vw;
		}

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

		body {
width: 100%;
position: static center;
text-indent: 0;
left: auto;
right: auto;
color: white;
		}
#subhead {
opacity: 1;
		}

#main {
opacity: 1;
		overflow-x: hidden;
		overflow-y: auto;	
		}

div {
margin: 0 auto;
}

footer {
width: 100%;
margin: 0;
background:  black;
}

/*--------------- Hyper-Active Links ----------------- */

		a {
			text-decoration: underline;
			color: inherit;
			text-decoration-style: wavy;
			text-decoration-color: DeepSkyBlue;
			text-decoration-thickness: 8%;
			text-shadow: 0 0 1px #000, 0 0 12px DeepSkyBlue;
		}

		a:hover {
			text-shadow: 0 0 1px lightcyan, 0 0 5px DeepSkyBlue;
		}

a:visited {
  color: inherit;
}

a:active {
  color: inherit;
}

/*--------------- Headers and Text: Standard ----------------- */

h1 {
			font-family: 'Instrument Serif', Georgia, serif;
			font-weight: 400;
			text-align: center;
			text-indent: 0;
			color: white;
			font-size: calc(20px + 3vw);
			letter-spacing: 0.05ch;
			padding-top: 10vh;
			padding-bottom: 0;
			padding-left: 5vw;
			padding-right: 5vw;
			opacity: 1;
		}

		h2 {
			text-align: center;
			color: silver;
			text-indent: 0;
			font-family: 'IM Fell DW Pica', Georgia, serif;
			letter-spacing: 0.2ch;
			opacity: 1;
			font-size: calc(16px + 1.7vw);
			padding-top: 1vh;
			padding-bottom: 2vh;
			padding-left: 5vw;
			padding-right: 5vw;
		}

		h3 {
			text-align: center;
			text-indent: 0;
			color: white;
			font-family: 'RocknRoll One', sans-serif;
			letter-spacing: 0.1ch;
			font-size: calc(15px + 1vw);
			padding-top: 2vh;
			padding-bottom: 2vh;
			padding-left: 5vw;
			padding-right: 5vw;
		}

p {
  font-size: 140%;
/*			font-size: calc(15px + 1vw); */
			font-family: 'Gupter', serif;
			color: white;
			line-height: 1.7;
			text-indent: 0;
			text-align: center;
			padding-top: 1vh;
			padding-bottom: 1vh;
			padding-left: 5vw;
			padding-right: 5vw;
			margin: 0 auto;
			margin-block-start: 0;
			margin-block-end: 0;
			max-width: 1100px;
  color: white;
}

kbd {
  border-radius: 20px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 4px;
  margin-right: 4px;
  background-color: black;
  box-shadow: 2px 2px 0px 1px black, 0px 0px 2px 3px black inset;
}


/*--------------- Headers and Text: Custom ----------------- */

.what {
 color: black;
 background-color: palegoldenrod;
}

.whatcol {
 color: palegoldenrod;
 background-color: transparent;
}

.when {
 color: black;
 background-color: paleturquoise;
}

.whencol {
 color: paleturquoise;
 background-color: transparent;
}

.where {
 color: black;
 background-color: palegreen;
}

.wherecol {
 color: palegreen;
 background-color: transparent;
}

.and {
 font-family: 'RocknRoll One', sans-serif;
 font-size: calc(15px + 1vw);
}

/*--------------- Quotes, Blocks, Lines ----------------- */

blockquote {
  border: 3px dashed SlateGray;
  text-align: center;
  font-family: 'Cutive Mono', Courier, monospace;
  letter-spacing: -0.02em;
  padding: 1vh 1vw;
  max-width: 50%;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1vh;
  margin-bottom: 1vh;
  line-height: 1.4;
  font-size: calc(15px + 1vw);
}

.codequote {
  color: black;
  background: white;
  border-radius: 3px;
  border: 0px;
  box-shadow: 2px 2px 0px 1px black;
  text-align: center;
  font-family: 'Cutive Mono', Courier, monospace;
  letter-spacing: -0.04em;
  padding: 1vh 1vw;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1vh;
  margin-bottom: 1vh;
  line-height: 1.4;
  font-size: calc(15px + 1vw);
}

.notequote {
  color: lavender;
  background: transparent;
  border-radius: 50%;
  border: 0px;
box-shadow: 2px 2px 4px dodgerblue, 2px 2px 8px midnightblue;
  text-align: center;
  font-family: 'Cutive Mono', Courier, monospace;
  letter-spacing: -0.04sem;
  padding: 0;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1vh;
  margin-bottom: 1vh;
  line-height: 1.2;
  font-size: calc(15px + 1vw);
}

		hr {
			border: none;
			border-top: 6px dashed grey;
			text-align: center;
			width: 90vw;
			opacity: 1;
			margin-top: 1vh;
			margin-bottom: 1vh;
			margin-left: auto;
			margin-right: auto;
		}

.arrow {
font-family: 'Rampart One';
font-size: 8rem;
color: DeepSkyBlue;
}