@font-face {
  font-family: "Ari-W9500";
  src: url("/fonts/ari-w9500.otf.woff2");
  font-display: swap;
}
@font-face {
  font-family: "Ari-W9500 Bold";
  src: url("/fonts/ari-w9500-bold.otf.woff2");
  font-display: swap;
}
@font-face {
  font-family: "Arial";
  src: local("Arial");
  size-adjust: 106.7%;
}
@font-face {
  font-family: "Helvetica";
  src: local("Helvetica");
  size-adjust: 105%;
}

:root {
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-500: #ec4899;
  --pink-950: #500724;
  --pink-1000: #32010D;
}
html {
  font-size: 16pt;
  font-family: "Ari-W9500", "Helvetica", "Arial", sans-serif;
  font-weight: normal;
  overflow-y: overlay;
}
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--pink-1000);
  background-image: url("/bg.png");
  background-size: 60px;
  image-rendering: pixelated;
  backdrop-filter: blur();
  color: var(--pink-100);
  animation: bg-move 2s linear infinite;
}
@keyframes bg-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 88px;
  }
}
code {
  font-family: "Ari-W9500", "Helvetica", "Arial", sans-serif;
}
.normal {
  color: var(--pink-100);
}
#root {
  margin: 0 auto;
  width: calc(100% - 20 * 2px);
  max-width: 600px;
  /*height: 100%;*/
  /*background: var(--pink-950);*/
  box-sizing: content-box;
}
header, footer {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
}

nav {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}
nav ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: var(--pink-1000);
}
nav ul li:not(:last-child)::after {
  content: "|";
  margin: 0 8px;
}
nav ul li {
  float: left;
  font-size: 1rem;
}
main {
  background: var(--pink-950);
  padding: 20px;
  border: 2px dashed var(--pink-500);
}
a, em, b {
  color: var(--pink-300);
}
*, *::before, *::after {
  box-sizing: border-box;
}

section:not(:last-child) {
  margin-bottom: 20px;
}
h1, h2 {
  font-weight: bold;
  font-family: "Ari-W9500 Bold", "Helvetica", "Arial", sans-serif;
  font-size: 1rem;
  margin-top: 0;
}
body.font-loaded h1, body.font-loaded h2 {
  font-weight: normal;
}
h1 {
  margin-bottom: 4px;
}
h2 {
  color: var(--pink-300);
}
h2::before {
  content: "#";
  position: relative;
  margin-right: 6px;
  color: var(--pink-200);
}
em {
  font-style: normal;
}
.container_88x31 img {
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
  box-sizing: content-box;
  border: 2px solid var(--pink-1000);
  transition: transform 0.2s;
}
.container_88x31 img:hover {
  transform: scale(1.3);
}
pre {
  background: var(--pink-1000);
  margin-bottom: 0;
  padding: 4px;
  white-space: pre-wrap;
  width: 100%;
  counter-reset: line;
}
pre span:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  color: var(--pink-300);
  width: 12px;
  text-align: right;
  margin-right: 6px;
}
ul {
  list-style-type: "– ";
  padding-left: 20px;
}