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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* general font settings and layout sizing */
:root {
  font: var(--step-0) /1.5 var(--font-serif);
  --font-serif: system-ui, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  --step--3: clamp(0.61rem, calc(0.61rem + 0.02vw), 0.63rem);
  --step--2: clamp(0.87rem, calc(0.86rem + 0.04vw), 0.88rem);
  --step--1: clamp(1.04rem, calc(1.00rem + 0.21vw), 1.10rem);
  --step-0: clamp(1.25rem, calc(1.16rem + 0.45vw), 1.38rem);
  --step-1: clamp(1.50rem, calc(1.34rem + 0.78vw), 1.72rem);
  --step-2: clamp(1.80rem, calc(1.55rem + 1.25vw), 2.15rem);
  --step-3: clamp(2.16rem, calc(1.78rem + 1.88vw), 2.69rem);
  --step-4: clamp(2.59rem, calc(2.05rem + 2.73vw), 3.36rem);
  --step-5: clamp(3.11rem, calc(2.34rem + 3.88vw), 4.20rem);

  --white: #fff;
  --lightest-grey: #f1f2f3;
  --black: #222;
  --gold: #857047;
  --gold-1: #9d8d6c;
  --purple: #a9439a;
  --navy: #001f35;
  --navy-1: #334c5d;
  --navy-2: #667986;
  --navy-3: #99a5ae;
  --navy-4: #ccd2d7;
  --navy-5: #e5e9eb;

  color-scheme: light dark;
  --site-padding-left: 1rem;
  --site-padding-right: 1rem;

  background-color: var(--lightest-grey);
  color: var(--navy);
}

@media (prefers-color-scheme: dark) {
  :root {
    background-color: var(--navy);
    color: var(--navy-4);
  }
}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

body {
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}


/* Navigation */
nav {
  display: inline-block;
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: inline-flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-around;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  gap: 1rem;
  flex-wrap: wrap;
}

nav li {
  font-weight: 200;
  list-style: none;
}

nav a,
h1-actionbar a {
  color: var(--secondary-font-color);
}

nav a:hover,
h1-actionbar a:hover {
  color: var(--font-color);
}

nav li a.selected,
nav li a:hover {
  padding-bottom: 3px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

main {
  flex-grow: 1;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}