:root {
  --nau-blue: #00274d;
  --nau-gold: #ffd200;
  --monsoon: #c3b8b2;
  --fall-aspen: #ffd200;
  --sunset: #f47722;
  --summer-shade: #00853f;
  --red-rock: #e86d1f;
  --supai: #00adb5;
  --sky: #009ddc;
  --twilight: #0066b2;

  font-size: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  line-height: 1.4;
  color: #212529;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5rem 0;
  font-weight: normal;
}

p {
  margin: 0 0 1rem 0;
}

h1 {
  font-size: 2.125rem;
}

h2 {
  font-size: 1.875rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.75rem;
}

header nav {
  width: 100%;
  color: var(--nav-color);
  background-color: var(--nav-background-color);

  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    list-style-type: none;
    gap: 0 1.5rem;

    li {
      display: flex;
      align-items: center;
      position: relative;
    }

    li>* {
      display: block;
      padding: 0.5rem 0;
      color: inherit;
      text-decoration: none;
    }

    a.active {
      color: var(--nav-color-active);
      font-weight: bold;
    }

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

main {
  flex: 1;
  margin: 0;
  padding: 1rem;

  .container {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0;
  }

  img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: scale-down;
  }
}

/* Primary layout page styles */

.page--main {
  --page-width: 960px;
  --nav-color: var(--nau-blue);
  --nav-color-active: var(--nau-blue);
  --nav-color-hover: var(--nau-gold);
  --nav-background-color: white;

  header {
    color: white;
    background-color: var(--nau-blue);

    h1 {
      margin: 0;
      padding: 0.25rem 1rem;
      font-size: 3rem;
      line-height: 1.2;
      text-align: center;

      small {
        display: block;
        color: var(--nau-gold);
        font-size: 1.5rem;
        line-height: 1.2;
        text-align: center;
      }
    }

    nav {
      ul {
        max-width: var(--page-width);
        padding: 0;

        a {
          padding-left: 1rem;
          padding-right: 1rem;

          &.active {
            background-color: #ffffbf;
            border-left: solid 1px var(--nau-blue);
            border-right: solid 1px var(--nau-blue);
          }

          &:hover {
            background-color: var(--nau-blue);
          }
        }
      }
    }
  }

  main {
    background-color: var(--twilight);
    color: white;
    text-align: justify;

    a {
      color: white;

      &:hover {
        color: var(--nau-gold);
      }
    }
  }
}

/* Home page styles */

#page--home {
  .name-expanded {
    color: var(--nau-gold);
    text-align: left;
  }

  #sparsemod-logo {
    float: left;
    margin: 0 1rem 1rem 0;
  }

  #az-figure {
    max-width: 150px;
    margin: 0 0 0 1rem;
    float: right;
    color: var(--nau-gold);
    text-align: center;

    img {
      width: 100%;
    }

    figcaption {
      margin: 0.5rem -0.5rem;
    }
  }
}

/* 404 page styles */

#page--404 {
  .error-panel {
    max-width: 600px;
    margin: 2rem auto;
  }

  .error-code {
    color: var(--nau-gold);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
}

/* R markdown document page styles */

.page--rmd {
  --page-width: 700px;
  --nav-color: white;
  --nav-color-active: var(--nau-gold);
  --nav-color-hover: var(--nau-gold);
  --nav-background-color: var(--nau-blue);

  header nav ul li {
    >span {
      font-weight: bold;
    }

    a:hover {
      text-decoration: underline;
    }

    &.home-logo {
      width: 56px;
      height: 56px;

      a {
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: auto;
        overflow: hidden;

        img {
          display: block;
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          border: 0;
          object-fit: contain;
          background-color: var(--nau-blue);
        }
      }
    }
  }

  @media only screen and (min-width: 1200px) {
    header nav ul li.home-logo {
      width: 150px;
      align-items: flex-start;

      a {
        position: absolute;
        width: 150px;
        border-radius: 15px;

        img {
          padding: 5px;
        }
      }
    }
  }
}