:root {
  --main-color: white;
  --main-bg-color: #212121;
  --code-color: #353535;
  --header-bg-color: #2b2b2b;
  --hyperlink-color: #7dcfff;
  --hyperlink-hover-color: #0d72ad;
  --shadow-color: black;
  --search-box-bg-color: #4d4d4d;
  --search-box-text-color: white;
  --tr-odd: #3e3e3e;
  --tr-even: #2f2f2f;
  --table-outline-color: #555555;
  --nav-link-button-color: #4d4d4d;
  --nav-link-button-hover-color: #555;
  --nav-link-button-focus-color: #6e6e6e;
  --logo-path: url('logo-dark.svg');

  /* Accent colors */
  --blue: #1a5fb4;
  --green: #26a269;
  --yellow: #f6d32d;
  --orange: #c64600;
  --red: #a51d2d;
  --purple: #613583;
  --brown: #63452c;

  /* Global */
  --global-fade-animation: 0.125s;
  --margin-size: 11.25px;
  --content-max-width: 900px;
}

@media (prefers-color-scheme: light) {
  :root {
    --main-color: #323232;
    --main-bg-color: #fafafa;
    --code-color: #dadada;
    --header-bg-color: #ebebeb;
    --header-select-color: black;
    --header-active-text-color: black;
    --header-text-color: black;
    --text-select-bg-color: black;
    --hyperlink-color: #3b80ae;
    --hyperlink-hover-color: #000076;
    --shadow-color: gray;
    --search-box-bg-color: #d7d7d7;
    --search-box-text-color: black;
    --tr-odd: #eaeaea;
    --tr-even: #f0f0f0;
    --table-outline-color: #c3c3c3;
    --nav-link-button-color: #dadada;
    --nav-link-button-hover-color: #b9b9b9;
    --nav-link-button-focus-color: #989898;
    --logo-path: url('logo.svg');

    /* Accent colors */
    --blue: #99c1f1;
    --green: #8ff0a4;
    --yellow: #f9f06b;
    --orange: #ffbe6f;
    --red: #f66151;
    --purple: #dc8add;
    --brown: #cdab8f;
  }
}

@media (prefers-contrast: more) {
  :root {
    --main-bg-color: black;
    --line-color: white;
    --hyperlink-color: lightblue;

    /* Global */
    --nav-link-button-color: unset;
    --header-bg-color: unset;
    --shadow-color: unset;
    --search-box-bg-color: unset;
    --opacity: 1;
    --high-contrast-bar-color: var(--table-outline-color);
    --nav-link-button-color: unset;
    --nav-link-button-hover-color: unset;
    --nav-link-button-focus-color: unset;
    --tr-odd: unset;
    --tr-even: unset;
    --table-outline-color: var(--line-color);
    --search-box-text-color: var(--line-color);
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root {
    --main-bg-color: white;
    --line-color: black;
    --hyperlink-color: darkblue;
  }
}

@media (prefers-reduced-motion) {
  :root {
    --global-fade-animation: 0;
  }
}

html {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background: var(--main-bg-color);
  color: var(--main-color);
  scroll-behavior: smooth;
  overflow-wrap: break-word;
}

.logo {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 50px;
  pointer-events: none;
  content: var(--logo-path);
}

.nav-grid {
  display: grid;
  gap: 1.5em;
  max-width: 1250px;
  margin: 0 auto;
}

.nav-column-align-center {
  margin: auto 0;
}

.main-content {
  position: absolute;
  transform: translateY(-300%);
  margin: 0 auto;
  z-index: 999;
}

.main-content:focus {
  transform: translateY(0);
}

nav {
  background: var(--header-bg-color);
  padding: 1.25em;
  border-radius: 6px;
  box-shadow: 0px 10px 20px -15px var(--shadow-color);
  border-bottom: 3px solid var(--high-contrast-bar-color);
  font-size: larger;
}

main, .footer-text {
  margin: 0 auto;
  padding: 0 5vw;
}

main {
  margin-bottom: 2em;
  line-height: 1.45;
}

footer {
  padding: 0.5em;
  /* This is the simplest hack for eliminating margins */
  box-shadow: 0 0 0px 8px var(--header-bg-color) ;
  background-color: var(--header-bg-color);
  bottom: 0;
  border-top: 3px solid var(--high-contrast-bar-color);
}

.backlinks-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.backlinks-row b {
  padding: 6px 0;
}

a {
  color: var(--hyperlink-color);
  transition: var(--global-fade-animation);
}

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

li, ul {
  margin-top: var(--margin-size);
  margin-bottom: var(--margin-size);
}

td {
  padding: .2em .4em;
}

tr:nth-child(odd) {
  background-color: var(--tr-odd);
}

tr:nth-child(even) {
  background-color: var(--tr-even);
}

.dim-label {
  opacity: var(--opacity, 0.7);
}

.nav-link-button {
  color: var(--main-color);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  background-color: var(--nav-link-button-color);
  outline: .5px dotted var(--line-color);
  font-weight: bold;
  font-size: medium;
}

.nav-link-button:hover {
  color: unset;
  background-color: var(--nav-link-button-hover-color);
  opacity: 1;
  outline: 2px dotted var(--line-color);
}

.nav-link-button:focus {
  background-color: var(--nav-link-button-focus-color);
  outline: solid var(--line-color);
}

#searchbox {
  font-size: large;
  padding: 0.6em 1em;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--search-box-bg-color);
  color: var(--search-box-text-color);
  border-style: none;
  border-radius: 6px;
  outline: .5px dotted var(--line-color);
  text-transform: capitalize;
}

code {
  font-size: larger;
}

pre {
  background-color: var(--code-color);
  border-radius: 3px;
  overflow: auto;
  padding: 16px;
  overflow: scroll;
}

code:not(pre code) {
  position: relative;
  padding: 0 0.5em 0;
  max-height: 750px;
  border-radius: 5px;
  background-color: var(--code-color);
}

.done {
  background-color: var(--green);
}

.todo {
  background-color: var(--red);
}

.stalled {
  background-color: var(--blue);
}

.extfw {
  background-color: var(--purple);
}

.mostly {
  background-color: var(--yellow);
  color: black;
}

.wip {
  background-color: var(--orange);
}

table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

th, td {
  border: 1px solid var(--table-outline-color);
}

@media (min-width: 720px) {
  .logo {
    margin: initial;
    max-width: 350px;
  }

  .nav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .5em;
  }

  #searchbox {
    padding: 0.5em 6em 0.5em 1em;
    width: unset;
  }

  .nav-column-align-right {
    justify-self: end;
  }
}

@media (min-width: 900px) {
  /* This is a hack to break out of the content's max-width
  Credit to https://css-tricks.com/full-width-containers-limited-width-parents */

  .full-width {
    display: flex;
    margin-left: calc(-100vw / 2 + var(--content-max-width) / 2);
    margin-right: calc(-100vw / 2 + var(--content-max-width) / 2);
    justify-content: center;
  }

  main, .footer-text {
    max-width: var(--content-max-width);
  }
}