/* RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  overflow-x: hidden;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  flex-direction: column;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
#root, #__next { isolation: isolate; }

/* BEGIN KIKFLIP */

:root {
    /* Color palette */
    --color-slate: #303030;
    --color-frost: #F5F5EF;
    --color-vril: #DA574E;

    /* Font default */
    --font-stack: "Soehne", -apple-ui, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
    --font-display: "Soehne Breit";
  }

/*
  Theme definitions

  Apply themes to entire pages, or only sections of UI that need an alternate look.
  Work in terms of "accent", "text", "background" to give a layer of indirection vs
  the root tokens. This lets themes be swapped easily as needed per-element without
  affecting other UI.
*/

.kikflip {
  --token-accent: var(--color-vril);
  --token-text: var(--color-slate);
  --token-background: var(--color-frost);

  font-family: var(--font-stack);

  /* Use the tokens */
  background-color: var(--token-background);
  color: var(--token-text);
}

.kikflip * {
  /* Use the tokens */
  background-color: var(--token-background);
  color: var(--token-text);
}

a {
  text-decoration: underline;
  cursor: pointer;
  max-width: fit-content;
}

a:visited {
  color: currentColor;
}

h1, h2, .display {
  font-family: 'Soehne Breit';
  font-weight: 800;
}

.kikflip hr {
  height: 2px;
  background-color: var(--token-text);
  border: none;
}

main {
  margin-top: 64px;
}

li {
  list-style-type: none;
}

ul {
  padding: 0;
}

p + p {
  margin-top: 1em;
}

/*
  Theme utilities

  Utility classes that use the values exposed in the theme.
*/

/* .regular-theme, .accent-theme, .dark-theme {
  background-color: var(--token-background);
  color: var(--token-text);
} */

.regular-theme {
  --token-text: var(--color-slate);
  --token-background: var(--color-frost);
}

.accent-theme {
  --token-text: var(--color-frost);
  --token-background: var(--color-vril);
}

.dark-theme {
  --token-text: var(--color-frost);
  --token-background: var(--color-slate);
}

.color-accent { color: var(--token-accent); }
.color-background { color: var(--token-background); }
.color-text { color: var(--token-text); }

.bg-accent { background-color: var(--token-accent); }
.bg-background { background-color: var(--token-background); }
.bg-text { background-color: var(--token-text); }

/*
  Utilities

  Stuff missing from Tachyons
*/

.flex-grow {
  flex-grow: 2;
}

.min-vw-100 {
  min-width: 100vw;
}

.gap {
  gap: 1em;
}

.sticky { position: sticky; }

/* Tachyons technically has this, but this name is clearer in use */
.scroll-lock {
  overflow: hidden;
  position: fixed;
}

.transform-y--100, .transform-y-0 {
  transition: transform .233s ease-in-out;
}

.transform-y--100 { transform: translateY(-100%); }
.transform-y-0 { transform: translateY(0); }

.transform-x-100, .transform-x-0 {
  transition: transform .177s ease-in-out;
}

.transform-x-100 { transform: translateX(100%); }
.transform-x-0 { transform: translateX(0); }

.glass {
  backdrop-filter: blur(35px);
  opacity: 0.95;
}