@font-face {
  font-family: "Libertinus Sans";
  src:
    local("Libertinus Sans"),
    url("../fonts/LibertinusSans-Bold.woff2") font-weight("bold"),
    url("../fonts/LibertinusSans-Italic.woff2") font-style("italic"),
    url("../fonts/LibertinusSans-Regular.woff2");
}
@font-face {
  font-family: "Libertinus Math";
  src: local("Libertinus Math"), url("../fonts/LibertinusMath-Regular.woff2");
}

html {
  scrollbar-color: var(--gray-6) var(--gray-10);
  --size-content-4: 100ch;
}

body {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: var(--size-4);
  font-family: "Libertinus Sans", var(--font-humanist);
  font-size: var(--font-size-2);
  background: #000;
  color: #fff;
  text-wrap-style: pretty;
}

h1 {
  font-size: var(--font-size-4);
  font-variant-caps: small-caps;
  letter-spacing: var(--font-letterspacing-2);
}

nav {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-entry {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: var(--size-2);
  width: var(--size-fluid-6);
  margin: 0;
  padding: var(--size-1);
  color: unset;
  text-decoration: unset;
}

img {
  image-rendering: pixelated;
}

.index-entry > img {
  width: var(--size-fluid-5);
  aspect-ratio: 1;
}

.index-entry > span {
  text-align: center;
  font-size: var(--font-size-2);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--font-letterspacing-1);
}

@keyframes squish {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.1, 0.9);
  }
}

.index-entry:hover > img {
  animation: 0.5s ease-in-out infinite alternate squish;
}

section {
  width: min(100%, var(--size-content-4));
  margin-block-start: var(--size-3);
}

h2 {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-3);
  margin: 0;
}

h2 > img {
  width: var(--size-7);
  aspect-ratio: 1;
  image-rendering: pixelated;
}

p {
  margin-block: var(--size-2);
}
p:first-child {
  margin-block-start: 0;
}
p:last-child {
  margin-block-end: 0;
}

h3 {
  font-size: var(--font-size-2);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--font-letterspacing-1);
  margin: 0;
}

.example {
  border-left: var(--border-size-3) solid var(--purple-6);
  border-radius: var(--radius-2);
  padding: var(--size-1);
  margin-block: var(--size-2);
}
.proof {
  border-left: var(--border-size-3) solid var(--blue-6);
  border-radius: var(--radius-2);
  padding: var(--size-1);
}

math {
  font-family: "Libertinus Math";
}

td {
  padding: var(--size-1);
}

td.event-yes {
  background: var(--green-10);
}
td.event-no {
  background: var(--red-10);
}

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

.row {
  display: flex;
  flex-flow: row wrap;
  gap: var(--size-2);
  margin-block: var(--size-2);
}

.tic-tac-toe {
  display: inline-block;
}
.tic-tac-toe tbody {
  display: flex;
  flex-flow: column nowrap;
}
.tic-tac-toe tr {
  display: flex;
  flex-flow: row nowrap;
}
.tic-tac-toe td {
  padding: 0;
  width: 30px;
  height: 30px;
}
.tic-tac-toe img {
  width: 33px;
}

@media (prefers-color-scheme: light) {
  body {
    background: #fff;
    color: #000;
  }
  .example {
    background: var(--purple-4);
  }
  .proof {
    background: var(--blue-6);
  }
  td.event-yes {
    background: var(--green-6);
  }
  td.event-no {
    background: var(--red-6);
  }
}