html {
  --dark: #260c1a;
  --light: #f6f0ed;
  --ham: #b47597;
  --mustard: #b9913b;
  --peas: #349d32;
  --jello: #3b69b9;

  --background: var(--light);
  --font-color: var(--dark);

  --border-size: 1rem;

  --border: var(--border-size) solid;

  --large-font-size: 9rem;
  --large-font-line-height: 0.78;
  --blurb-font-size: 2rem;
  --small-font-size: 1rem;

  --box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.2);
  --filter-shadow: drop-shadow(0px 20px 30px rgba(0, 0, 0, 0.2));

  --banner-grid-row-height: 7rem;
  --headshot-margin-bottom: -4.3rem;
  --headshot-margin-bottom-hover: -2.3rem;

  --name-grid-row-height: 10rem;

  --headshot-size: 8rem;

  --anim-backOut: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --anim-circInOut: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --anim-cubicInOut: cubic-bezier(0.645, 0.045, 0.355, 1);

  --image-size: 160px;
  --hero-image-size: calc(calc(var(--image-size) * 3) + 1.3rem);
  --carousel-grid-template-columns: 8;

  --pi-description-grid-column: 2 / -2;
  --pi-description-grid-row-height: 10rem;
  --pi-example-grid-column: 1 / -1;
  --pi-description-margin: 50%;

  background-color: var(--background);
}

* {
  margin: 0;
  padding: 0;
}

body {
  overflow: auto;

  background-color: var(--background);

  display: flex;
  align-items: center;
  justify-content: center;

  padding-bottom: 5rem;
}

body.dark {
  --background: var(--dark);
  --font-color: var(--light);
}

h1 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;

  color: var(--font-color);
}

h2,
h3,
h4,
h5,
p {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;

  font-size: var(--small-font-size);

  color: var(--font-color);
}

#blurb {
  background-color: var(--background);

  align-self: stretch;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 5rem 0;
}

@keyframes blurb {
  0% {
    opacity: 0;
    margin-top: 1rem;
  }
  100% {
    opacity: 1;
    margin-top: 0rem;
  }
}

#blurb p {
  font-size: var(--blurb-font-size);

  opacity: var(--opacity);

  padding: 1rem;

  text-align: center;

  animation: blurb 2s calc(var(--n) * 2s) forwards;

  opacity: 0;
  margin-top: 1rem;
}

a {
  text-decoration: none;
}

.dividers {
  display: flex;

  align-items: center;

  gap: 1rem;
}

.dividers h4 {
  font-size: var(--small-font-size);
  color: var(--font-color);
}

.divider {
  height: 2rem;
  width: 0.3rem;
}

.divider.jello {
  background-color: var(--jello);
}

.divider.peas {
  background-color: var(--peas);
}

.divider.mustard {
  background-color: var(--mustard);
}

.divider.ham {
  background-color: var(--ham);
}