:root {
  --bg: hsl(33.79deg 56.86% 80%); /* "burlywood" light brown */
  --bg-darker: hsl(33.79deg 40.86% 71%); /* darker */
  --bg-lighter: hsl(33.79deg 40.86% 90%); /* darker */
  --fg: hsl(0deg 0% 17%); /* dark, dark gray */
  --fg-lighter: hsl(0deg 0% 27%); /* dark, dark gray */
  --phi: 1.618;
  --space: 1rem;
  --space-phi: calc(var(--space) * var(--phi));
  --space-2: calc(var(--space) * 2);
  --space-half: calc(var(--space) * 0.5);
  --space-quarter: calc(var(--space) * 0.25);
  --space-eigth: calc(var(--space) * 0.125);
  --fancy: monospace;
  --prose: "Times New Roman";

  font-size: 20px;
}

html,
body {
  height: 100dvh;
  padding: 0;
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--prose);
  line-height: 1.4;
  scrollbar-color: var(--fg-lighter) var(--bg-darker);
}

ul {
  list-style: circle;

  li:not(:last-child) {
    margin-bottom: var(--space-quarter);
  }

  ::marker {
    font-size: 0.8em;
  }
}

header,
footer {
  background-color: var(--bg-darker);

  & nav {
    width: 100%;
    padding-block: var(--space-half);
    display: flex;
    flex-flow: row wrap;
    column-gap: var(--space-2);
    align-items: center;

    & ul {
      margin: 0;
      max-width: 100%;
      list-style: none;
      display: flex;
      flex-flow: row wrap;
      column-gap: var(--space);
      padding-inline-start: 0;
    }
  }
}

header {
  box-shadow: 0 0 12px -1px rgb(0 0 0 / 48%);
}

footer {
  box-shadow: 0 0 12px -1px rgb(0 0 0 / 48%) inset;
}

main {
  padding-block: var(--space-half);
}

body {
  display: grid;
  grid:
    "header"
    "main" 1fr
    / 1fr;

  header- {
    grid-area: header;
    display: block;
  }

  main- {
    grid-area: main;
    display: contents;
  }
}

center-column-layout {
  display: block;
  box-sizing: border-box;
  padding-inline: var(--space);
  width: 100%;
  max-width: 60ch;
  margin-inline: auto;
}

code {
  font-size: 0.9em;
  font-family:
    Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
    "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
    monospace;
}

pre {
  /* This is wild. Only solution I found to take this out of the calc for the
   * container width. If you don't have this (and overflow-x: auto on the code
   * tag), then p tags will have their width pushed out to the width of the pre
   * code combo */
  display: grid;
}

pre code {
  overflow-x: auto;
  padding-block: var(--space-half);
  padding-inline: var(--space);
}

a {
  color: steelblue;

  &:visited {
    color: rebeccapurple;
  }

  &[href^="http"]::after {
    content: " 🌐";
    font-size: 0.8em;
    padding-block-end: 0.1em;
    vertical-align: text-top;
  }

  &[target="_parent"]::after {
    content: " 🡙";
  }

  &[logo] {
    text-decoration: none;
    color: var(--fg);
    font-size: 2rem;
    font-family: var(--fancy);
  }

  &[icon] {
    text-decoration: none;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fancy);
  font-weight: normal;
}

h3 {
  font-size: 1.4em;
  color: var(--fg-lighter);
}

p {
  margin-block: 1.4em;
}

blockquote {
  font-style: italic;
}

textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 1rem;
  resize: both;
  padding: var(--space-half);
  font-size: 0.8rem;
  background-color: var(--bg);
  border: none;
  box-shadow: 0 0 8px -3px rgb(0 0 0 / 89%) inset;

  &:focus {
    outline: none;
  }
}

input {
  padding: var(--space-half);
  font-size: 0.8rem;
  background-color: var(--bg);
  border: none;
  box-shadow: 0 0 8px -3px rgb(0 0 0 / 89%) inset;

  &:focus {
    outline: none;
  }
}

toast-message {
  padding: var(--space);
  background-color: darkkhaki;
  color: var(--fg-lighter);
  box-shadow: 0 0 12px -1px rgb(0 0 0 / 48%);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

button {
  border-radius: 0.4rem;
  background-color: var(--bg);
  border: none;
  box-shadow: 0 0 12px -1px rgb(0 0 0 / 89%);
  padding-inline: var(--space-half);
  padding-block: var(--space-eigth);

  &:hover {
    box-shadow: 0 0 12px 1px rgb(0 0 0 / 89%);
  }

  &:active {
    box-shadow: 0 0 6px -1px rgb(0 0 0 / 89%);
  }

  &:not([disabled]) {
    cursor: pointer;
  }

  &[clean] {
    background: inherit;
    border: none;
    padding-inline: var(--space);
    padding-block: var(--space-quarter);
    cursor: pointer;
    box-shadow: none;

    &:hover {
      filter: brightness(1.1);
    }
  }
}

details summary {
  cursor: pointer;
}

/*
 * Utilities
 */

.sticky-top {
  position: sticky;
  top: 0;
}

.relative {
  position: relative;
}

.lower {
  z-index: -1;
}

.higher {
  z-index: 1;
}

.flex-row {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.h-full {
  height: 100%;
}