:root {
  font-size: 1rem;

  --medium-gray: #ddd;
  --gray: #6a6a6a;

  --content-width: 500px;
  --content-padding: 20px;
}

/* ------------------------------
   Base Layout
------------------------------ */

html,
body {
  margin: 0;
  padding: 0;
  min-height: 90%;
  overflow-y: scroll;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 90vh;

  color: #000;
  background: #fff;
	line-height: 1.3;
}

/* ------------------------------
   Font Definition
------------------------------ */

@font-face {
  font-family: monospace;
}

/* ------------------------------
   Links
------------------------------ */

a {
  color: black;
  text-decoration: none;
  border-bottom: 1.5px solid var(--medium-gray);
}

a:hover {
  border-bottom: 1.5px solid var(--gray);
  background-color: #fafad2;
}

a img,
sub a {
  border-bottom: none;
}

a img {
  display: block;
}

/* ------------------------------
   Layout Containers
------------------------------ */

#header,
#main,
aside {
  width: 100%;
  max-width: var(--content-width);

  margin: 0 auto;
  padding: var(--content-padding);

  box-sizing: border-box;
}

#main {
  flex: 1;
}

/* ------------------------------
   Header
------------------------------ */

#header {
  font-family: monospace;
  text-align: center;
}

.center {
  text-align: center;
}

.termfont {
  text-align: center;
  font-size: 1.2rem;
}

.datefont {
  text-align: center;
  font-style: italic;
  font-size: 0.7rem;
}

/* ------------------------------
   Lists
------------------------------ */

li {
  list-style: none;
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.6;
}

li::before {
  content: "▸";
  padding-right: 5px;
}

/* ------------------------------
   Body Text
------------------------------ */

.thoughtbody {
  line-height: 1.3;
  font-size: min(2.5vw, 1rem);

  max-width: 80ch;
  width: auto;

  margin: 20px auto;
  padding: 20px;

  font-family: "DraftingMono", monospace;

  white-space: pre-wrap;

  overflow-x: auto;
  overflow-y: visible;

  display: block;

  box-sizing: border-box;
}

/* ------------------------------
   Images
------------------------------ */

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

/* ------------------------------
   Footer
------------------------------ */

footer {
  width: 100%;

  padding: 1rem 0;

  text-align: center;
  font-size: small;

  color: #000;

  box-sizing: border-box;
}

/* ------------------------------
   Effects
------------------------------ */

.grayscale {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}

.abyss {
  color: gray;

  text-shadow:
    1px 1px 3px black,
    -1px -1px 3px black,
    1px -1px 3px black,
    -1px 1px 3px black,
    0 0 2em black,
    0 0 0.8em black,
    0 0 5px black,
    0 0 10px black,
    0 0 15px black;
}