@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

:root {
  --brand: var(--choco-8);
  --brand-secondary: var(--choco-6);
  --primary: var(--stone-8);
  --primary-border: var(--stone-5);
  --muted: var(--stone-5);
  --surface-bright: #fff;


  --size-content-4: 80ch;

  font-family: var(--font-antique);
  color: var(--primary);
}


@media (prefers-color-scheme: dark) {
  :root {
  --brand: var(--choco-2);
  --brand-secondary: var(--choco-4);
  --primary: var(--stone-4);
  --primary-border: var(--stone-7);
  --muted: var(--stone-6);
  --surface-bright: #000;
  }
}

a {
  color: var(--brand);
  text-decoration: none;
  text-underline-offset: var(--size-1);
}

header h1 {
  font-size: var(--font-size-6);
  font-weight: var(--font-weight-1);
  font-family: 'Great Vibes', cursive;
  padding-top: var(--size-4);
  margin: auto;
  text-align: center;
}

h2 {
  font-size: var(--font-size-7);
  font-weight: var(--font-weight-9);
  font-family: 'Great Vibes', cursive;
  padding-bottom: var(--size-7);
}

h3 {
  font-size: var(--font-size-6);
  font-family: 'Great Vibes', cursive;
  font-weight: var(--font-weight-2);
  padding-bottom: var(--size-1);
  background-color: var(--surface-bright);
  border-radius: var(--radius-3);
  padding: var(--size-4);
  text-align: center;
  max-width: var(--size-content-4);
  margin: auto;
  margin-top: var(--size-9);
  margin-bottom: var(--size-6);
}


a:visited {
  color: var(--brand);
}

a:hover {
  text-decoration: underline;
  color: var(--brand-secondary);
}

p {
  padding-bottom: var(--size-2);
  text-align: justify;
  max-inline-size: unset;
}

input {
  padding: var(--size-3);
}

textarea {
  padding: var(--size-3);
  }

  button {
    color: var(--brand);
}

footer {
   clear: both;
   padding-top: var(--size-8);
 }

footer div {
   color: var(--muted);
   border-top: solid;
   border-top-width: var(--size_0);
   max-width: var(--size-content-4);
   padding-top: var(--size-8);
}