:root {
  --color-amber-50:             #fffbeb;
  --color-amber-700:            #b45309;
  
  --color-lime-50:              #f7fee7;
  --color-lime-700:             #4d7c0f;
  
  --color-green-50:             #f0fdf4;
  --color-green-700:            #15803d;
  
  --color-purple-50:            #faf5ff;
  --color-purple-100:           #f3e8ff;
  --color-purple-200:           #e9d5ff;
  --color-purple-300:           #d8b4fe;
  --color-purple-400:           #c084fc;
  --color-purple-500:           #a855f7;
  --color-purple-600:           #9333ea;
  --color-purple-700:           #7e22ce;
  --color-purple-800:           #6b21a8;
  --color-purple-900:           #581c87;
  --color-purple-950:           #3b0764;
  
  --color-sky-50:               #f0f9ff;
  --color-sky-100:              #e0f2fe;
  --color-sky-200:              #bae6fd;
  --color-sky-300:              #7dd3fc;
  --color-sky-400:              #38bdf8;
  --color-sky-500:              #0ea5e9;
  --color-sky-600:              #0284c7;
  --color-sky-700:              #0369a1;
  --color-sky-800:              #075985;
  --color-sky-900:              #0c4a6e;
  --color-sky-950:              #082f49;
  
  --color-slate-50:             #f8fafc;
  --color-slate-100:            #f1f5f9;
  --color-slate-200:            #e2e8f0;
  --color-slate-300:            #cbd5e1;
  --color-slate-400:            #94a3b8;
  --color-slate-500:            #64748b;
  --color-slate-600:            #475569;
  --color-slate-700:            #334155;
  --color-slate-800:            #1e293b;
  --color-slate-900:            #020617;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: fallback;
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/InterVariable-Italic.woff2') format('woff2');
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  background: var(--color-slate-800);
  color: var(--color-slate-100);
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  font-feature-settings: "kern";
  font-kerning: normal;
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
  line-height: 1.5;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  text-decoration-skip-ink: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
a {
  color: var(--color-sky-300);
}
a:visited {
  color: var(--color-purple-300);
}
a[href^="http"]:after {
  content: " ↗";
}
nav {
  background: var(--color-slate-900);
  color: var(--color-slate-100);
  padding: 1rem 2rem;
}
main {
  flex-grow: 1;
}
.personality {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 2rem;
}
img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(74%) saturate(833%) hue-rotate(178deg) brightness(103%) contrast(95%);
  width: 50%;
}
.dialogue {
  background: var(--color-slate-700);
  border-radius: 0.5rem;
  font-size: 1.2rem;
  padding: 1rem;
  position: relative;
  margin: 1rem;
  p {
    margin: 0;
  }
  p + p {
    margin-top: 1rem;
  }
}
.path {
  font-size: 1.2rem;
  padding: 1rem 2rem 0 2rem;
  margin-bottom: 4rem;
}
.choices {
  list-style: none;
  margin: 0;
  padding: 0;
  li + li {
    margin-top: 1rem;
  }
}
.credits {
  main {
    font-size: 1.8rem;
    padding: 2rem;
    p {
      margin: 0;
    }
    p + p {
      margin-top: 2rem;
    }
    .heavy {
      font-weight: 900;
      font-size: 1.2rem;
      font-style: italic;
      text-transform: uppercase;
    }
    .light {
      font-weight: 200;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .note {
      font-size: 1.2rem;
    }
  }
}
.references {
  main {
    font-size: 1.2rem;
    padding: 1rem 1rem 3rem 1rem;
    .ref {
      padding: 1rem;
    }
    .ref + .ref {
      margin-top: 1rem;
    }
    p {
      margin: 0;
      overflow-wrap: break-word;
      text-indent: 3rem hanging;
      word-break: break-word;
      word-wrap: break-word;
    }
    :target {
       background-color: var(--color-slate-700);
    }
  }
}
footer {
  background: var(--color-slate-900);
  padding: 2rem;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li + li {
      margin-top: 1rem;
    }
  }
}
.front {
  align-items: center;
  background: var(--color-purple-900);
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  h1 {
    color: var(--color-purple-800);
    font-size: 18.8vw;
    font-style: italic;
    font-weight: 900;
    margin: 0;
  }
}
@media (max-width: 1023px) {
 .dialogue:after {
   content: '';
   position: absolute;
   top: 0;
   left: 45%;
   width: 0;
   height: 0;
   border: 40px solid transparent;
   border-bottom-color: var(--color-slate-700);
   border-top: 0;
   border-right: 0;
   margin-left: -20px;
   margin-top: -40px;
 } 
}
  
@media (min-width: 1024px) {
  main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .personality {
    order: 2;
    min-width: 20rem;
    display: block;
    padding: 2rem;
  }
  img {
    width: 100%;
  }
  .words {
    flex-grow: 1;
    margin-top: 14rem;
    max-width: 40rem;
  }
  .dialogue {
    margin: 2rem;
  }
  .dialogue:after {
    content: '';
    position: absolute;
    right: 0;
    top: 4rem;
    width: 0;
    height: 0;
    border: 48px solid transparent;
    border-left-color: var(--color-slate-700);
    border-right: 0;
    border-top: 0;
    margin-top: -24px;
    margin-right: -48px;
  }
  .path {
    padding: 1rem 3rem 0 3rem;
  }
  .references, .credits {
    main {
      display: block;
      max-width: 40rem;
    }
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: var(--color-slate-100);
    color: var(--color-slate-800);
  }
  a {
    color: var(--color-sky-500);
  }
  a:visited {
    color: var(--color-purple-500);
  }
  img {
    filter: brightness(0) saturate(100%) invert(12%) sepia(60%) saturate(440%) hue-rotate(177deg) brightness(91%) contrast(91%);
  }
  .dialogue {
    background: var(--color-slate-300);
  }
  .references {
    main {
      :target {
         background-color: var(--color-slate-300);
      }
    }
  }
  nav, footer {
    background: var(--color-slate-700);
    a {
      color: var(--color-sky-300);
    }
    a:visited {
      color: var(--color-purple-300);
    }
  }
  .front {
    background: var(--color-purple-300);
    h1 {
      color: var(--color-purple-400);
    }
  }
  @media (max-width: 1023px) {
    .dialogue:after {
      border-bottom-color: var(--color-slate-300);
    }
  }
  @media (min-width: 1024px) {
    .dialogue:after {
      border-left-color: var(--color-slate-300);
    }
  }
}