@media (max-width: 480px) {
  body,
  html {
    width: 320px;
    font-size: 100%;
  }
}

/* Small */
@media (min-width: 480px) and (max-width: 720px) {
  body,
  html {
    width: 460px;
    font-size: 105%;
  }
}

/* Medium */
@media (min-width: 720px) and (max-width: 1080px) {
  body,
  html {
    width: 640px;
    font-size: 110%;
  }
}

/* Large */
@media (min-width: 1080px) and (max-width: 1280px) {
  body,
  html {
    width: 960px;
    font-size: 115%;
  }
}

/* Extra Large */
@media (min-width: 1280px) and (max-width: 1920px) {
  body,
  html {
    width: 1220px;
    font-size: 120%;
  }
}

/* Humongous */
@media (min-width: 1920px) {
  body,
  html {
    width: 1440px;
    font-size: 125%;
  }
}

:root {
  /* Light Colors */
  --color-background: #f9decd;
  --color-link: #460f64;
  --color-active: #ca6226;
  --color-text: #1a0e01;
  --color-code-bg: rgb(230, 204, 194);

  --color-first-nav-bg: rgb(194, 194, 147);
  --color-secondary-nav-bg: rgb(230, 204, 194);

  /* Web Safe Fonts */
  --font-family-header: Helvetica, Arial, sans-serif;
  --font-family-body: Arial, sans-serif;
  --font-family-monospace: "Courier New", Courier, monospace;
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
  :root {
    --color-active: #e7a267;
    --color-link: #dac6f5;
    --color-background: #20283e;
    --color-text: #dadce0;
    --color-code-bg: rgb(90, 46, 71);

    --color-first-nav-bg: rgb(61, 70, 39);
    --color-secondary-nav-bg: rgb(90, 46, 71);
  }
}

a,
a:visited {
  color: var(--color-link);
  text-decoration: none;
}
a.active,
a:hover {
  color: var(--color-active);
}

body,
html {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin: 0 auto;
  padding: 0;

  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-body);
  line-height: 1.5;
}

header {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  width: 100%;
  gap: 10px;

  margin-top: 20px;

  font-weight: bold;
  font-family: var(--font-family-header);
  font-size: 1.75em;

  nav {
    display: flex;
    flex-flow: row wrap;
    font-size: 0.7em;
    gap: 10px;

    a {
      padding: 5px;
    }
  }

  /* Primary Nav */
  nav:first-of-type {
    a {
      background-color: var(--color-first-nav-bg);
    }
  }

  /* Secondary Nav */
  nav:nth-of-type(2) {
    a {
      font-size: 0.9em;
      background-color: var(--color-secondary-nav-bg);
    }
  }
}

main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: inherit;

  font-family: var(--font-family-main);

  a {
    font-weight: 600;
  }

  pre code,
  code {
    font-family: var(--font-family-monospace);
    font-weight: 600;
  }

  pre {
    overflow-x: scroll;
    background-color: var(--color-code-bg);
    padding: 10px;
  }

  img {
    max-width: 100%;
  }
}

footer {
  display: flex;
  flex-flow: row nowrap;
  align-self: flex-start;
  margin: 40px 0;
  opacity: 0.5;
  gap: 10px;
}