/*
  Hi! If you're reading this you're probably thinking of making your
  own website. You're welcome to use this stylesheet as-is or
  customize it to taste.
*/
:root {
  /* let's use fonts people already have on their computers, shall we? */
  --sans-stack: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --serif-stack: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --mono-stack: ui-monospace, 'Cascadia Code', Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  --font-family: var(--sans-stack);
  /* set a reasonable baseline since we size with rem units */
  --size: medium;
  /* mobile-first margin and width. we'll adjust when we hit a desktop breakpoint */
  --margin: 10px;
  --width: auto;
  --thin: 1px;
  --medium: 2px;
  --thick: 4px;
  --border-thin: var(--thin) solid var(--color);
  --border-medium: var(--medium) solid var(--color);
  --border-thick: var(--thick) solid var(--color);
  --dotted-border-thin: var(--thin) dotted var(--color);
  --column-count: 1;
  --column-width: auto;
  --shadow-dimension: 10px 10px 0 .2px;
  --indent: 2rem;

}

html {
  border-top: var(--border-thick);
  font-size: var(--size);
}

body {
  margin: var(--margin);
  max-width: var(--width);
  font: 1rem/1.62 var(--font-family);
  background: var(--background);
  color: var(--color);
}

hr {
  border: var(--border-medium);
}

blockquote, .line-block {
  border-left: var(--border-thick);
  padding-left: var(--indent);
  padding-bottom: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

blockquote > p:first-of-type {
  margin-top: 0;
}

blockquote > p:last-of-type {
  margin-bottom: 0;
}

h1 {
  padding-bottom: 0;
  margin-bottom: 1rem;
}

h1, h2, h3 {
  line-height: 1.2;
}

a {
  text-underline-offset: .35rem;
}

a:focus {
  outline: 2px dotted var(--outline);
}

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

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

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

dt {
  margin-bottom: .5rem;
}

dt:not(:first-child) {
  margin-top: .5rem;
}

cite {
  font-style: normal;
  font-weight: bold;
}

figcaption {
  margin-top: 1rem;
  font-weight: bold;
}

pre, code {
  font-family: var(--mono-stack);
}

pre {
  text-align: left !important;
  padding: .2rem !important;
  white-space: pre-wrap;
  background: var(--background-accent);
  border: var(--border-medium);
}

nav menu ul {
  margin: 0;
  padding-left: .1rem;
}

img, video {
  max-width: 100%;
  height: auto;
  background: var(--background-accent);
  border: var(--border-thin);
}

summary, dt, abbr {
  font-weight: bold;
}

details {
  margin: 1rem 0;
  padding: .5rem;
  border: var(--border-medium);
}

li {
  margin-bottom: .25rem;
}

time {
  font-weight: bold;
}

/* adapted from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd */

kbd {
  background-color: var(--background-accent);
  border-radius: 3px;
  border: var(--border-thin);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: var(--color);
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

/* table formatting taken from simple.css by Kev Quirk <https://simplecss.org> */
table {
  border-collapse: collapse;
  margin: 1.5rem 0;
}

td, th {
  border: var(--border-thin);
  text-align: left;
  vertical-align: top;
  padding: 0.5rem;
}

th {
  background: var(--background-accent);
  font-weight: bold;
}

tr:nth-child(even) {
  /* Set every other cell slightly darker. Improves readability. */
  background: var(--background-accent);
}

table caption {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* not a standard HTML tag yet */
rant {
  display: inline;
  font-weight: bold;
  font-style: italic;
  color: var(--outline);
}

/* custom CSS Classes */
.breadcrumbs {
  margin-top: 1rem;
}
.breadcrumbs, .sitenav {
  background: var(--background-accent);
  font-weight: bold;
  border: var(--border-thin);
  padding: .5rem;
}

.external-link::after {
  content: "\21D7";
  text-decoration: none;
}

.toc, .indent {
  padding-left: var(--indent);
}

.dt-published {
  font-weight: bold;
}

.list-style-none {
  list-style: none;
}

.multicolumn {
  column-count: var(--column-count);
  column-width: var(--column-width);
}

.black {
  color: var(--color);
}

.bottom-border {
  border-bottom: var(--border-medium);
}

.vpadded {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.notice {
  background: var(--background-accent);
  font-weight: bold;
  border: var(--border-thick);
  padding: .5rem;
  display: inline-block;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.borderless {
  border: none;
  box-shadow: none;
}

.neg-top-margin {
  margin-top: -1rem;
}

.index-link {
  font-weight: bold;
}

.bordered-header > h2 {
  border-bottom: var(--border-medium);
  padding-bottom: .5rem;
}

@media only screen and (prefers-color-scheme: light) {
  :root {
    --color: #16161d;
    --background: #FFFFFF;
    --background-accent: #F0F8FF;
    --link: #4B6A88;
    --hover: #34515E;
    --visited: #28282F;
    --shadow: rgba(40, 40, 47, 0.3);
    --outline: red;
  }

  img,
  video {
    opacity: 1;
  }
}

@media only screen and (prefers-color-scheme: dark) {
  :root {
    --color: #FFFFFF;
    --background: #16161D;
    --background-accent: #0F0800;
    --link: #D1FAE0;
    --hover: #98FB98;
    --visited: #63E9CE;
    --shadow: rgba(215, 215, 215, 0.3);
    --outline: yellow;
  }

  img,
  video {
    opacity: .85;
  }

  .melonland {
    padding: 10px;
    background: white;
    width: 120px;
    height: 120px;
  }
}

@media only screen and (min-width: 1280px) {
  :root {
    --width: 40rem;
    --margin: 2rem auto;
    --font-family: var(--serif-stack);
    --size: large;
  }

  html {
    border: none;
    background: repeating-linear-gradient(
      45deg,
      var(--background),
      var(--background) 100px,
      var(--background-accent) 100px,
      var(--background-accent) 200px);
  }

  body {
    border: var(--border-thick);
    padding: .2rem 1rem;
    box-shadow: var(--shadow-dimension) var(--shadow);
  }

  nav {
    margin-bottom: 1rem;
  }

  .breadcrumbs menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .breadcrumbs menu li, .buttons > li {
    display: inline-block;
    margin-right: .2rem;
  }

  blockquote, .line-block {
    background: var(--background-accent);
    padding: 1rem;
    border: var(--border-thin);
    margin-left: 0;
  }

  cite {
    padding: .5rem;
    background: var(--color);
    color: var(--background);
  }

  cite > a, cite > a:visited, cite > a:hover, cite > a:active {
    color: var(--background);
  }

  .breadcrumb::before {
    content: " / ";
  }

  .buttons > li {
    display: inline-block;
    margin-right: .5rem;
    margin-bottom: .5rem;
  }

  .flush-left {
    margin-left: 0 !important;
  }

  .breadcrumbs, .sitenav, .colophon {
    font-size: .75rem;
  }

  .clear {
    clear: left;
  }

  .float-right {
    float: right;
  }
}

@media only screen and (min-width: 1440px) {
  :root {
    --size: x-large;
  }
}

@media only screen and (min-width: 1920px) {
  :root {
    --size: xx-large;
  }
}

@media only screen and (min-width: 2560px) {
  :root {
    --size: xxx-large;
  }
}

@media only print {
  :root {
    --width: 100%;
    --size: 12px;
    --font-family: var(--serif-stack);
    --color: black;
    --background: white;
    --link: black;
    --hover: black;
    --visited: black;
  }

  html {
    border: none;
    background: var(--background);
  }

  body {
    margin: 0 1in;
    padding: 0;
    font-size: 1rem !important;
    border: none;
  }

  blockquote {
    background: var(--background);
  }

  cite {
    padding: .5rem;
    background: var(--background);
    color: var(--color);
  }

  img,
  video,
  details {
    box-shadow: none;
  }

  a {
    font-weight: bold;
    text-decoration: underline;
  }

  .no-print {
    display: none;
  }
}