html {
  --max-container-size: var(--size-md);
  --link: var(--green-9);
  --link-visited: var(--green-7);
}

a[href] {
  text-decoration-color: var(--orange-3);
}

body {
  background-color: var(--brown-0);
  padding-inline: var(--size-3);
}

h3 {
  font-weight: var(--font-weight-5);
}

header {
  margin: 0 auto; 
  max-width: var(--max-container-size);
  padding-block: var(--size-5);
}

header h2 {
  font-weight: var(--font-weight-5);
}

header .logo {
  /*max-width: var(--size-15);*/
}

main {
  margin: 0 auto;
  max-width: var(--max-container-size);
}

main h1 {
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-5);
  max-inline-size: inherit;
}

main > *:not(:first-child) {
  margin-top: var(--size-4);
}

main .btn.buy {
  --_text: var(--_accent, var(--link)); 
  text-decoration-color: var(--orange-3);
}

main img.demo {
  border: 1px solid var(--brown-1);
}

pre:has(code) {
  background: #fdf6e3;
  color: #657b83;
  overflow-x: scroll;
  padding: var(--size-2);
}

footer {
  border-top: 1px solid var(--brown-1);
  font-size: var(--font-size-0);
  margin: 0 auto;
  margin-top: var(--size-5);
  max-width: var(--max-container-size);
  padding-top: var(--size-2);
  padding-bottom: var(--size-5);
}