@import url(./styles/reset.css);

@font-face {
  font-family: "National Park";
  src: url('../public/assets/fonts/NationalPark-Variable-Webfonts/woff/NationalPark-VariableVF.woff') format('woff');
  src: url('../public/assets/fonts/NationalPark-Variable-Webfonts/woff2/NationalPark-VariableVF.woff2') format('woff2');
}

:root {
  /* Colors taken from "Ice Cream Penguins" by SeesawSiya, submitted to the @color-palettes Tumblr
   * https://www.tumblr.com/color-palettes/624541186603008000/ice-cream-penguins-submitted-by-seesawsiya
   */
  --strawberry: #fca1b3;
  --vanilla: #fbeece;
  --milk-chocolate: #8d5b38;
  --dark-chocolate: #442216;

  --extra-light: 200;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 800;
  
  background: var(--vanilla);
  padding: 1rem;

  color: var(--dark-chocolate);

  font-family: "National Park", sans-serif;
  font-weight: var(--regular);
  font-size: 16px;
}

a {
  color: var(--milk-chocolate);
  text-decoration: underline;
}

body {
  margin: auto;
  max-width: 480px;
}

header {
  text-align: center;
  margin-bottom: 1em;
}

h1 {
  font-weight: var(--bold);
  margin-bottom: 1rem;
}

.wordmark {
  font-size: calc(1rem/21);
  line-height: 1em;
  text-transform: uppercase;

  & > span {
    display: block;
  }

  & > .wordmark-line-1 {
    font-size: 72em;
    font-weight: var(--semi-bold);
    line-height: 1em;
  }

  & > .wordmark-line-2 {
    font-size: 34.25em;
    font-weight: var(--extra-bold);
    line-height: 0.75em;
  }
  & > .wordmark-line-3 {
    font-size: 96em;
    font-weight: var(--semi-bold);
    line-height: 1em;

    color: var(--strawberry);
  }
  & > .wordmark-line-4 {
    font-size: 77em;
    font-weight: var(--bold);
    line-height: 0.6em;

    color: var(--milk-chocolate);
  }
}

.age-range {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-wrap-style: balance;
}

.when-where {
  font-size: 1.5rem;
  font-weight: var(--extra-bold);
  text-transform: uppercase;

  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 1em;
}

.invitation {
  text-align: center;
  text-wrap-style: balance;
  font-weight: var(--bold);
}

footer {
  margin-top: 1em;

  font-size: 0.8em;
  text-align: center;
  text-wrap-style: balance;
}