:root {
  --kg-font-text: 'Owners Text', -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif;
  --kg-font-wide: 'Owners XXWide', -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif;
  --kg-font-logo: 'Owners', -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif;
  --kg-font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  --kg-color-primary: #00ff92;
  --kg-color-secondary: #ff0048;
  --kg-color-black: #000811;
  --kg-color-gray: #3d4c5e;
  --kg-color-white: #fff;
}

::selection {
  background: var(--kg-color-secondary);
  color: var(--kg-color-white);
}

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

body {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-family: var(--kg-font-text);
  font-size: 14px;
  color: var(--kg-color-black);
  background: var(--kg-color-primary);
  margin: 0;
  padding: 0;
}

svg {
  position: absolute;
  top: 1rem;
  left: 2rem;
  height: 32px;
  width: 32px;

  circle,
  path {
    fill: currentColor;
  }
}

h1 {
  position: relative;
  font-family: var(--kg-font-wide);
  font-weight: 500;
  font-size: 3.5em;
  line-height: 1;
  color: var(--kg-color-black);
  margin-top: 0;

  @media (width > 40rem) {
    font-size: 4em;
  }

  span {
    display: block;
    white-space: nowrap;
  }
}

h2 {
  font-family: var(--kg-font-text);
  font-weight: 400;
  font-size: 1.5em;
  margin-top: 0;
  margin-bottom: 0.625rem;
}

h3 {
  font-family: var(--kg-font-text);
  font-weight: 700;
  font-size: 1em;
  margin-top: 1rem;
  margin-bottom: 0.625rem;
}

h4 {
  font-family: var(--kg-font-text);
  font-weight: 700;
  font-size: 1em;
  margin-top: 1rem;
  margin-bottom: 0.15rem;
}

ul {
  list-style-type: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 1rem;

  li::before {
    content: '-';
  }
}

p {
  max-width: 60ch;
  margin-top: 0;
}

a {
  color: currentColor;
}

pre,
code {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-family: var(--kg-font-mono);
  color: var(--kg-color-black);
  background: var(--kg-color-primary);
  padding: 0.15em 0.25em;
  border-radius: 0.25em;
}

main {
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  height: 100vh;

  /* idk why this is needed but scroll snap breaks momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;

  /* hide scrollbars */
  scrollbar-width: none;
}

section {
  position: relative;
  scroll-snap-align: start;
  color: var(--kg-color-black);
  background: var(--kg-color-primary);
  height: 100vh;
  overflow: hidden;

  + section {
    flex-grow: 1;
    color: var(--kg-color-primary);
    background: var(--kg-color-black);
    overflow-y: scroll;

    /* idk why this is needed but scroll snap breaks momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;

    /* fix double scrollbars on mobile */
    @media (width <= 65rem) {
      height: unset;
      min-height: 100vh;
    }
  }
}

header {
  padding: calc(50vh - 5rem) 2rem 0;

  img {
    position: absolute;
    top: 1rem;
    left: 2rem;
    width: 32px;
    height: 32px;
  }
}

aside {
  padding: 0 2rem;
}

footer {
  color: var(--kg-color-primary);
  padding: 0 2rem;
  margin: 2rem 0;

  small {
    color: var(--kg-color-gray);
  }

  span {
    color: var(--kg-color-secondary);
  }

  a[href='https://keygen.sh'] {
    font-family: var(--kg-font-logo);
    font-weight: 500;
    color: var(--kg-color-white);
    text-transform: lowercase;
    text-decoration: none;
    padding-left: 1.15em;

    &:hover {
      text-decoration: underline;
    }
  }
}

a[href='https://keygen.sh'] {
  background-image: url("/?originalUrl=https%3A%2F%2Fassets.keygen.sh%2Flogos%2Flogomark.svg");
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 0.875em 0.875em;
  padding-left: 1.1em;
}

a[href='https://sentry.io'] {
  background-image: url("/?originalUrl=https%3A%2F%2Ffcl.dev%2Flogos%2Fsentry.svg");
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 0.875em 0.875em;
  padding-left: 1em;
}

a[href='https://elastic.co'] {
  background-image: url("/?originalUrl=https%3A%2F%2Ffcl.dev%2Flogos%2Felastic.svg");
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 0.875em 0.875em;
  padding-left: 1em;
}

a[href='https://github.com/keygen-sh/fcl.dev'] {
  background-image: url("/?originalUrl=https%3A%2F%2Ffcl.dev%2Flogos%2Fgithub.svg");
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 0.875em 0.875em;
  padding-left: 1em;
}