:root {
  --color-white: #fff;
  --color-black: #191919;
  --color-dark-gray: #262626;
  --color-gray: #666;
  --color-beige: #fbf7f0;
  --color-yellow: #ffe801;
  --color-teal: #5cd8e5;
  --color-pink: #e9509a;
  --color-blue: #317AF6;
  --color-text: var(--color-black);
  --color-text-subtle: var(--color-gray);
  --color-text-reversed: var(--color-white);
  --color-tint: var(--color-teal);
  --color-tint-alt: var(--color-yellow);
  --color-background-main: var(--color-white);
  --color-background-index: var(--color-beige);
  --color-sheet: var(--color-white);
  --color-neutral: var(--color-beige);
  --color-link: var(--color-tint);
  --color-accent: var(--color-yellow);
  --color-positive: var(--color-teal);
  --color-negative: var(--color-pink);
  --color-border: #DBDBDC;
  --space-xs: 0.25em;
  --space-s: 0.5em;
  --space-m: 1em;
  --space-l: 1.5em;
  --space-xl: 3em;
  --space-xxl: 4em;
  --space-xxxl: 6em;
  --font-main: -apple-system, "Helvetica Neue", helvetica, "Apple Color Emoji", arial, sans-serif;
  --type-base: max(1.7em, min(calc(1em + 0.9vw), 2.4em));
  --type-xxxs: 55%;
  --type-xxs: 65%;
  --type-xs: 75%;
  --type-s: 85%;
  --type-m: 100%;
  --type-l: 120%;
  --type-xl: 150%;
  --type-xxl: 200%;
  --type-xxxl: 300%;
  --type-xxxxl: 600%;
  --leading-s: 1.1;
  --leading-m: 1.4;
  --leading-l:1.7
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-pink: #ef7baa;
    --color-text: var(--color-white);
    --color-text-reversed: var(--color-black);
    --color-neutral: var(--color-dark-gray);
    --color-background-main: #000;
    --color-background-index: #000;
    --color-sheet: var(--color-dark-gray);
    --color-border: #555;
  }
}

@media (min-width: 45em) {
  :root {
      --type-xxxl:390%
  }
}

*, :after, :before {
  box-sizing:border-box
}

::-moz-selection, ::selection {
  color: var(--color-sheet);
  background-color:var(--color-text)
}

html {
  font-size: 10px;
  background-color: var(--color-background-main);
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 1em 0 0;
  font-family: var(--font-main);
  font-size: var(--type-base);
  /* font-variation-settings: "wdth" 180; */
  color: var(--color-text);
  background-color: transparent;
}

@media (min-width: 45em) {
  body { padding-top: 2em; }
}

h1, h2, h3, h4, h5, h6 {
  line-height:var(--leading-m)
}

h1 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--type-xxl);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: var(--leading-s);
  transition:font-weight .2s ease
}

h2 {
  margin: var(--space-l) 0 var(--space-s) 0;
  font-size: var(--type-l);
  font-weight: 600;
  text-transform: uppercase;
  font-style:italic
}

h3 {
  margin: var(--space-l) 0 var(--space-xs) 0;
  font-size: var(--type-m);
  font-weight:900
}

h4, h5, h6 {
  margin: var(--space-m) 0 0 0;
  font-weight:600
}

dl, h4, h5, h6, ol, p, ul {
  font-size:var(--type-m)
}

dl, ol, p, ul {
  margin: 0 0 var(--space-m);
  line-height: var(--leading-l);
  font-weight:350
}

code {
  padding: .2em .3em;
  color: var(--color-text);
  background-color: var(--color-neutral);
  border-radius: 0.2em;
  font-size: 0.95em;
}

blockquote {
  position: relative;
  margin: var(--space-l) 0;
  padding: 0;
  quotes: "\201C""\201D""\2018""\2019";
  text-transform: uppercase;
  font-size: var(--type-m);
  letter-spacing: .1em;
  font-weight: 200;
  font-style:italic
}

ol, ul {
  padding: 0;
  list-style-position:outside
}

ul {
  list-style-type:none
}

ol {
  list-style-type:decimal
}

ol li, ul li {
  margin-left: 0;
  margin-bottom: var(--space-xs);
  position:relative
}

ol li ol, ol li ul, ul li ol, ul li ul {
  margin-left: 1.25em;
  margin-bottom: 0;
  font-size:var(--type-m)
}

b, strong {
  font-weight:600
}

em, i {
  font-style:italic
}

small {
  font-size:var(--type-s)
}

a, a:visited {
  color: var(--color-text);
  text-decoration-thickness: .1em;
  text-decoration-width: .1rem;
  font-weight: 600;
}

a:hover {
  -webkit-text-decoration-color: var(--color-yellow);
  text-decoration-color: var(--color-yellow);
  text-decoration-thickness: .2em;
  text-decoration-width:.2em
}

embed, img, object, video {
  max-width: 100%;
  height:auto
}

hr {
  width: 100%;
  margin: var(--space-xl) 0;
  border: 0;
  border-top:.1rem solid var(--color-text)
}

input[type=text] {
  display: block;
  width: 100%;
  padding: 0.75em;
  margin: 0 0 var(--space-m);
  font-size: var(--type-m);
  color: var(--color-text);
  background: var(--color-sheet);
  border: 1px solid var(--color-border);
}

button,
.button,
.button:visited {
  display: block;
  width: 100%;
  padding: 0.75em 1.5em;
  margin: 0 0 var(--space-m);
  background: var(--color-tint);
  font-size: var(--type-m);
  color: var(--color-black);
  text-align: center;
  line-height: 1.25;
  border: 0;
  border-radius: 0.5em;
  text-decoration: none;
}

.button:active {
  background: var(--color-tint-alt);
}

.button:disabled {
  background: var(--color-gray);
}

@media (min-width: 45em) {
  button {
    width: auto;
  }
}