:root {
  --color-bg: #111;
  --color-text: #fff;
  --color-text-muted: #8e979e;
  --color-accent: #00e4ff;
  --color-border: #3a3a3a;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 2rem;
  --space-l: 3rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --color-link: var(--color-text);
  --grid-gutter: var(--space-s);
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  font-size: 50%;
  box-sizing: border-box;
  height: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 2rem;
  line-height: 1.5em;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote {
  margin: var(--space-) 0;
}

section {
  padding: var(--space-xl) 0;
}

section > *:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-text);
}
a:hover {
  text-decoration: none;
}

button {
  border: none;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-m);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--grid-gutter) / -2);
}

.col {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 calc(var(--grid-gutter) / 2);
  margin: calc(var(--grid-gutter) / 2) 0;
}

@media (min-width: 600px) {
  .col {
    flex: 1;
    max-width: none;
  }
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-13,
.col-14,
.col-15,
.col-16 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 calc(var(--grid-gutter) / 2);
  margin: calc(var(--grid-gutter) / 2) 0;
}

@media (min-width: 600px) {
  .col-1 {
    flex: 0 0 6.25%;
    max-width: 6.25%;
  }
  .col-2 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
  .col-3 {
    flex: 0 0 18.75%;
    max-width: 18.75%;
  }
  .col-4 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-5 {
    flex: 0 0 31.25%;
    max-width: 31.25%;
  }
  .col-6 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
  .col-7 {
    flex: 0 0 43.75%;
    max-width: 43.75%;
  }
  .col-8 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-9 {
    flex: 0 0 56.25%;
    max-width: 56.25%;
  }
  .col-10 {
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
  .col-11 {
    flex: 0 0 68.75%;
    max-width: 68.75%;
  }
  .col-12 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-13 {
    flex: 0 0 81.25%;
    max-width: 81.25%;
  }
  .col-14 {
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }
  .col-15 {
    flex: 0 0 93.75%;
    max-width: 93.75%;
  }
  .col-16 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: var(--grid-gutter);
  margin-bottom: var(--grid-gutter);
}

.full {
  grid-column: span 16;
}

.span-1 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-1 {
    grid-column: span 1;
  }
}

.span-2 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-2 {
    grid-column: span 2;
  }
}

.span-3 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-3 {
    grid-column: span 3;
  }
}

.span-4 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-4 {
    grid-column: span 4;
  }
}

.span-5 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-5 {
    grid-column: span 5;
  }
}

.span-6 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-6 {
    grid-column: span 6;
  }
}

.span-7 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-7 {
    grid-column: span 7;
  }
}

.span-8 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-8 {
    grid-column: span 8;
  }
}

.span-9 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-9 {
    grid-column: span 9;
  }
}

.span-10 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-10 {
    grid-column: span 10;
  }
}

.span-11 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-11 {
    grid-column: span 11;
  }
}

.span-12 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-12 {
    grid-column: span 12;
  }
}

.span-13 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-13 {
    grid-column: span 13;
  }
}

.span-14 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-14 {
    grid-column: span 14;
  }
}

.span-15 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-15 {
    grid-column: span 15;
  }
}

.span-16 {
  grid-column: span 16;
}
@media (min-width: 600px) {
  .span-16 {
    grid-column: span 16;
  }
}

:root {
  --color-doc-accent: #000000;
}

body {
  font-family: "Space Mono", monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Geist", sans-serif;
  font-weight: 300;
}

body > .container {
  max-width: 960px;
}

section {
  position: relative;
}

section:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}

.card {
  width: 100%;
  text-align: center;
  background-color: var(--color-doc-accent);
  padding: var(--space-xs);
  color: var(--color-text-muted);
  font-size: 1.5rem;
}
.card.center {
  text-align: center;
}

.logo {
  width: 5rem;
}

.title {
  margin: var(--space-m) 0;
}

.hero {
  text-align: center;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3rem;
}

h4 {
  font-size: 1.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
input,
textarea {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

button {
  font-size: 2rem;
  padding: var(--space-m) var(--space-m);
  color: var(--color-text);
  background-color: var(--color-body);
  border: 1px solid var(--color-border);
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 #ffffff;
  transition: box-shadow 0.4s ease, transform 0.1s ease, color 0.4s ease;
}
button:hover:not(:disabled) {
  box-shadow: inset 0 -3.5em 0px #ffffff;
  color: var(--color-body);
}
button:active:not(:disabled) {
  transform: scale(0.95);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button:focus {
  outline: none;
}

button.primary {
  background-color: var(--color-border);
}

input {
  font-size: 2rem;
  padding: var(--space-m) var(--space-m);
  color: var(--color-text);
  background-color: var(--color-body);
  border: 1px solid var(--color-border);
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-1 {
  margin-top: var(--space-s);
}

.mb-1 {
  margin-bottom: var(--space-s);
}

/*# sourceMappingURL=index.css.map */