:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --radius: 0.4rem;

  --off-black: #111;
  --off-white: #eee;
  --dark-gray: #2e2e2e;
  --primary: #c58c46;
  --secondary: #032e67;
  --error: #d20909;
}

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

body {
  margin: var(--space-lg) auto var(--space-md) auto;
  background: var(--off-black);
  color: var(--off-white);
}

main {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--space-md);
}

h1 {
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

h2 {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

h3, h4 {
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 600;
}

input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 0.06rem solid var(--off-white);
  background: var(--dark-gray);
  border-radius: var(--radius);
  font: inherit;
  color: var(--off-white);
}

button.button {
  margin-top: var(--space-md);
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background-color: var(--primary)
}

.error {
  color: var(--error);
  font-weight: 700;
}

.text-center {
  text-align: center;
}

.text-small {
  font-size: 80%;
}

.text-muted {
  opacity: 0.75;
}

.width-shorter {
  max-width: 40rem;
}

a {
  color: #c58c46;
}

a:hover {
  opacity: 0.75;
}

#logo {
  width: 5rem;
  margin-bottom: var(--space-md);
}

.video-wrapper {
    position: relative;
    box-shadow: 0 0 3rem 1.25rem rgba(32, 54, 87, 0.4);
    margin-top: var(--space-lg)
}

#table-of-contents .lessons, #table-of-contents .supplements {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

#table-of-contents dt {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    font-weight: bold;
    text-decoration: underline;
}

#table-of-contents dd {
    margin-left: 0;
}

#table-of-contents .description-links {
    font-style: italic;
    margin-top: var(--space-md);
}

#table-of-contents .description-links a {
    cursor: pointer;
}

#title-footer {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
}