@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BNSonic";
  src: url("/assets/fonts/BNSonic.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --forest: #1c3c34;
  --evergreen: #122722;
  --yellow: #f7ec50;
  --cream: #f9f6e8;
  --mint: #d9f2e6;
  --muted: #4f746c;
  --line: rgba(28, 60, 52, 0.17);
}

body {
  color: var(--forest);
  background:
    radial-gradient(circle at 92% 7%, rgba(247, 236, 80, 0.35) 0 120px, transparent 122px),
    var(--cream);
  font-family: "Satoshi", sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  width: min(820px, calc(100vw - 40px));
  padding: 54px 0 90px;
}

.legal-logo {
  width: 132px;
  margin-bottom: 70px;
  display: block;
}

.legal-logo img {
  display: block;
  width: 100%;
}

h1 {
  max-width: 720px;
  margin-bottom: 26px;
  font-family: "BNSonic", "Satoshi", sans-serif;
  font-size: clamp(50px, 9vw, 82px);
  line-height: 0.92;
}

h2 {
  margin-top: 46px;
  color: var(--forest);
  font-family: "BNSonic", "Satoshi", sans-serif;
  font-size: 26px;
  line-height: 1;
}

p,
li {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

a {
  color: var(--forest);
  text-underline-offset: 3px;
}

.box {
  margin: 34px 0;
  padding: 28px;
  background: color-mix(in srgb, var(--mint) 62%, var(--cream));
  border: 1px solid var(--line);
  border-radius: 14px;
}

.box h2 {
  margin-top: 0;
}

::selection {
  color: var(--evergreen);
  background: var(--yellow);
}

:focus-visible {
  outline: 3px solid #ff9754;
  outline-offset: 4px;
}