:root {
  --eggshell: hsl(46, 48%, 89%);
  --umber-light-2: hsl(20, 15%, 60%);
  --umber-light-1: hsl(20, 15%, 50%);
  --umber: hsl(20, 15%, 40%);
  --umber-dark-1: hsl(20, 15%, 30%);
  --umber-dark-2: hsl(20, 15%, 20%);
  --shadow-1: rgba(0, 0, 0, 0.1);
  --shadow-2: rgba(0, 0, 0, 0.2);
  --shadow-3: rgba(0, 0, 0, 0.3);
  --shadow-4: rgba(0, 0, 0, 0.4);
  --shadow-5: rgba(0, 0, 0, 0.5);
  --shadow-6: rgba(0, 0, 0, 0.6);
  --shadow-7: rgba(0, 0, 0, 0.7);
  --shadow-8: rgba(0, 0, 0, 0.8);
  --shadow-9: rgba(0, 0, 0, 0.9);
  --shadow-10: rgba(0, 0, 0, 1);
  --drop-shadow-7: 1px 1px 2px var(--shadow-7);
  --gradient-overlay-dark-1: linear-gradient(to bottom, transparent, var(--shadow-1));
  --gradient-overlay-dark-2: linear-gradient(to bottom, transparent, var(--shadow-2));
  --gradient-overlay-dark-3: linear-gradient(to bottom, transparent, var(--shadow-3));
  --gradient-overlay-dark-4: linear-gradient(to bottom, transparent, var(--shadow-4));
  --gradient-overlay-dark-5: linear-gradient(to bottom, transparent, var(--shadow-5));
  --british-racing-green-light-5: hsl(151, 87%, 40%);
  --british-racing-green-light-4: hsl(151, 87%, 35%);
  --british-racing-green-light-3: hsl(151, 87%, 30%);
  --british-racing-green-light-2: hsl(151, 87%, 25%);
  --british-racing-green-light-1: hsl(151, 87%, 20%);
  --british-racing-green: hsl(151, 87%, 15%);
  --shamrock-green: hsl(139, 35%, 47%);
  --moonstone: hsl(185, 84%, 38%);
  --text-light: #ffffff;
  --text-dark: #000000;
  --font-family-body: Georgia, "Times New Roman", Times, serif;
}

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

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--british-racing-green-light-3);
  border-radius: 5px;
}

::-webkit-scrollbar-track {
  background: var(--umber-dark-2);
}

body {
  background-color: var(--eggshell);
  color: var(--text-dark);
  margin: 0;
  font-family: var(--font-family-body);
}

main {
  padding: 1rem 2rem 3rem;
}

header {
  background-image: var(--gradient-overlay-dark-3);
  background-color: var(--british-racing-green-light-1);
  color: var(--text-light);
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
}
header > div {
  display: flex;
  align-items: center;
}
header .nav-brand-box {
  justify-content: space-between;
}
header .nav-brand-box .nav-brand {
  font-size: 2rem;
}
header .nav-brand, header .nav-link {
  color: inherit;
  text-decoration: none;
}
header .nav-link {
  margin: 0 0.5rem;
}
header .nav-link:hover {
  text-decoration: underline;
}
header #nav-toggler {
  display: none;
}
header label[for=nav-toggler] {
  display: none;
  cursor: pointer;
}
header label[for=nav-toggler] > svg {
  height: 2rem;
  width: 2rem;
  vertical-align: middle;
}

/* Mobile mode */
@media (width < 575px) {
  header {
    flex-direction: column;
    /* State of animated elements when dropdown is expanded */
  }
  header .nav-brand-box {
    transition: margin-bottom 0.4s ease-in-out;
  }
  header .nav-link-box {
    flex-direction: column;
    align-items: normal;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
  }
  header .nav-link-box .nav-link {
    margin-bottom: 0.4rem;
  }
  header label[for=nav-toggler] {
    display: block;
    transition: transform 0.4s ease-in-out;
  }
  header:has(#nav-toggler:checked) > .nav-brand-box {
    margin-bottom: 1rem;
  }
  header:has(#nav-toggler:checked) > .nav-link-box {
    max-height: 4.5rem;
  }
  header:has(#nav-toggler:checked) label[for=nav-toggler] {
    transform: rotate(90deg);
  }
}
footer {
  background-color: var(--umber);
  color: var(--text-light);
  padding: 0.5rem 1rem;
  text-align: center;
}

/*# sourceMappingURL=base.css.map */