:root {
  /* Fonts & Sizing */
  --header-font-family: "Montserrat", sans-serif;
  --body-font-family: "Montserrat", sans-serif;
  --accent-font-family: 'Meow Script', serif;
  --bodyFontSize: 1rem;
  --topperFontSize: clamp(1.6rem, 2.6vw, 2.2rem);
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);

  /* Colors */
  --zr-fg: #000000;
  --zr-bg: #ffffff;
  --zr-soft-gray: #F2F2F2;
  --zr-primary-lilac: #D2B3F2;
  --zr-accent-bubblegum: #f9c8e0;
  --zr-accent-mint: #A8E6CF;
  --zr-dark-plum: #4B264a;
  --primary: oklch(81.0% 0.0929 306.84);
  --primary-base: .03;
  --primary-10: oklch(from var(--primary) 10% calc(var(--primary-base) + (sin(1.0 * pi) * c)) h);
  --primary-20: oklch(from var(--primary) 20% calc(var(--primary-base) + (sin(0.9 * pi) * c)) h);
  --primary-30: oklch(from var(--primary) 30% calc(var(--primary-base) + (sin(0.8 * pi) * c)) h);
  --primary-40: oklch(from var(--primary) 40% calc(var(--primary-base) + (sin(0.7 * pi) * c)) h);
  --primary-50: oklch(from var(--primary) 50% calc(var(--primary-base) + (sin(0.6 * pi) * c)) h);
  --primary-60: oklch(from var(--primary) 60% calc(var(--primary-base) + (sin(0.5 * pi) * c)) h);
  --primary-70: oklch(from var(--primary) 70% calc(var(--primary-base) + (sin(0.4 * pi) * c)) h);
  --primary-80: oklch(from var(--primary) 80% calc(var(--primary-base) + (sin(0.3 * pi) * c)) h);
  --primary-90: oklch(from var(--primary) 90% calc(var(--primary-base) + (sin(0.2 * pi) * c)) h);
  --primary-100: oklch(from var(--primary) 100% calc(var(--primary-base) + (sin(0.1 * pi) * c)) h);

  /* Borders & Shadows */
  --button-border-radius: 2rem;
  --img-border-radius: 50px;
  --button-border-stroke: 2px;
  --header-border-stroke: 4px;
  --emphasis-shadow-offset: 3px;
  --sectionPadding: clamp(0.75rem, 1.75vw, 1.25rem) 2rem;
}

*,
*:before,
*:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}


body {
  font-family: var(--body-font-family);
  font-size: var(--bodyFontSize);
  color: var(--zr-fg);
  background-color: var(--zr-bg);
}


h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  font-weight: 700;
  text-align: left;
  margin: 0 0 1rem 0;
  color: var(--zr-dark-plum);
}

h1 {
  font-size: var(--headerFontSize);
  line-height: 1.2em;
  color: var(--zr-dark-plum);
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1rem 0;
}

h2 {
  font-size: var(--headerFontSize);
  line-height: 1.2em;
  text-align: left;
  position: relative;
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4,
h5,
h6 {
  font-size: 1.25rem;
}

@media (min-width: 0rem) {
  h1 {
    text-align: center;
    margin: 0 auto 0.75em auto;
    font-size: 1.75em;
  }

  h2 {
    text-align: center;
    margin: 0 auto 0.75em auto;
    font-size: 1.5em;
  }
}

@media (min-width: 48rem) {

  h1,
  h2 {
    text-align: left;
    margin: 0 0 0.75em 0;
  }
}

p {
  line-height: 1.5em;
  margin: 0 0 1rem 0;
  font-size: var(--bodyFontSize);
  text-align: left;
  width: 100%;
  color: var(--zr-fg);
}

p a {
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  color: var(--zr-dark-plum);
}

section {
  padding: var(--sectionPadding);
}

@media only screen and (min-width: 0rem) {
  section {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
}