@font-face {
  font-family: "OpenKogama";
  src: url(../fonts/OpenKogama.woff2) format("woff2");
  font-display: swap;
}

:root {
  --page: #ffffff;
  --text: #1b1b1f;
  --heading: #1e3460;
  --brand: #2a5a8e;
  --tagline: #1e3460;
  --download: #3b5e8c;
  --download-dark: #243f66;
  --play: #3a7a80;
  --play-dark: #23565b;
  --donate: #5c5794;
  --donate-dark: #3d3970;
  --primary: #0f0f0f;
  --primary-edge: #000000;
  --primary-text: #ffffff;
  --primary-hover: #272727;
  --secondary: #f2f2f2;
  --secondary-edge: #dedede;
  --secondary-text: #0f0f0f;
  --secondary-hover: #e5e5e5;
  --backdrop-color: #ffffff;
  --backdrop: var(--backdrop-color) url(../img/background-light.png);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0f0f0f;
    --text: #ececef;
    --heading: #ffffff;
    --brand: #6b9fdc;
    --tagline: #ffffff;
    --primary: #f1f1f1;
    --primary-edge: #ffffff;
    --primary-text: #0f0f0f;
    --primary-hover: #d9d9d9;
    --secondary: #272727;
    --secondary-edge: #3a3a3a;
    --secondary-text: #f1f1f1;
    --secondary-hover: #3f3f3f;
    --backdrop-color: #0f0f0f;
    --backdrop: var(--backdrop-color) url(../img/background-dark.png);
  }
}

* { box-sizing: border-box; }

html { background: var(--backdrop-color); }

body.home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--backdrop) center / cover;
  will-change: transform;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 24px 16px 20px;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
}

.top {
  display: flex;
  justify-content: flex-end;
}

.sections {
  display: flex;
  gap: 8px;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 6vh;
}

h1 {
  margin: 0 0 16px;
  font: 400 4.6rem/1 "OpenKogama", system-ui, sans-serif;
  color: var(--heading);
  text-align: center;
}

.tagline {
  max-width: 520px;
  margin: 0 auto 28px;
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: center;
  color: var(--tagline);
}

.links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
}

.links .icon {
  display: block;
  height: 26px;
  background: var(--heading);
  opacity: 0.8;
  -webkit-mask: var(--image) center / contain no-repeat;
  mask: var(--image) center / contain no-repeat;
}

.links .icon:hover { opacity: 1; }
.links .icon.github { --image: url(../img/github.svg); width: 27px; }
.links .icon.discord { --image: url(../img/discord.svg); width: 34px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.button {
  --corner: 7px;
  --edge: 2px;
  --cut: var(--corner);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 26px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink, #fff);
  text-decoration: none;
  background: var(--dark);
}

.button::before {
  --cut: calc(var(--corner) - 0.586 * var(--edge));
  content: "";
  position: absolute;
  inset: var(--edge);
  z-index: -1;
  background: var(--fill);
}

.button, .button::before {
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0,
    100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0 calc(100% - var(--cut)), 0 var(--cut)
  );
}

.button.download { --fill: var(--download); --dark: var(--download-dark); }
.button.play { --fill: var(--play); --dark: var(--play-dark); }
.button.donate { --fill: var(--donate); --dark: var(--donate-dark); }
.button.primary,
.button.nav[aria-current="page"] { --fill: var(--primary); --dark: var(--primary-edge); --ink: var(--primary-text); --fill-hover: var(--primary-hover); }
.button.secondary,
.button.nav { --fill: var(--secondary); --dark: var(--secondary-edge); --ink: var(--secondary-text); --fill-hover: var(--secondary-hover); }
.button.nav { --corner: 5px; padding: 5px 16px; font-size: 0.9rem; }

.button:hover { filter: brightness(1.1); }
.button:is(.primary, .secondary, .nav):hover { filter: none; }
.button:is(.primary, .secondary, .nav):hover::before { background: var(--fill-hover); }

footer {
  padding-top: 32px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--tagline);
}

footer p { margin: 4px 0 0; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  font: 400 1.5rem/1 "OpenKogama", system-ui, sans-serif;
  color: var(--heading);
}

.brand img {
  height: 1.15em;
}

@media (max-width: 600px) {
  h1 { font-size: 3rem; }
  .top { justify-content: center; }
}