*{padding:0;margin:0;left:0;top:0;box-sizing:border-box;scrollbar-color:var(--f-weak) transparent}
.pixelart{image-rendering:pixelated}
.float-right{float:right}
code,pre{font-family:'JetBrains Mono',ui-monospace,"Cascadia Mono","Segoe UI Mono","Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Fira Mono","Droid Sans Mono","Courier New",monospace}

a{color:unset;text-decoration:none;font-weight:700}
a:hover:not(.no-deco){text-decoration:underline wavy currentColor 1px}
a:focus,[tabindex]:focus,a:focus-visible{outline:currentColor 3px solid}
@supports selector(:focus-visible){a:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){outline:none}}

p+p,p+dl{margin-top:1em}

:root {
  font-family: Cantarell, Inter, 'Noto Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  --b: #1f0d22;
  --f-border: #584355;
  --f-weak: #ac6087;
  --f-subtler: #fbccd7;
  background-color: var(--b);
  background-image: url('assets/bg/s0.png'), url('assets/bg/s1.png'), url('assets/bg/s2.png'), linear-gradient(to bottom, #091926, transparent 480px);
  background-size: 420px, 340px, 295px;
  background-repeat: repeat-x;
  color: #fffcf4;
}
::selection {background:#fff;color:#220d13;}

@media(prefers-reduced-motion:no-preference){@keyframes bg-move {
0%{background-position:0 0,0 0,0 0,0 0,0 0;}
100%{background-position:420px 0,340px 0,295px 0;}
}:root{animation:bg-move 42s linear 0s infinite forwards;}}

body {
  max-width: 640px;
  margin: 64px auto;
  margin-top: calc(100vh / 5);
  padding: 2em;
  border-radius: 2em;
}

section + section, header + section, header + nav + section, footer {
  margin-top: 4em;
}

.icon {
  height: 1.5em;
  width: 1.5em;
  min-height: 1.5em;
  min-width: 1.5em;
  vertical-align: top;
  text-align: center;
  font-weight: 700;
}

@media(prefers-color-scheme:light) {
  :root {
    --b: #ffebea;
    --f-border: #f4cbc6;
    --f-weak: #806865;
    --f-subtler: #472030;
    background-image: url('assets/bg/s0.png'), url('assets/bg/s1.png'), url('assets/bg/s2.png'), linear-gradient(to bottom, #ffc9d8, transparent 720px);
    color: #000;
  }
  ::selection {background:#220d13;color:#ffebea;}
}

footer { color: var(--f-subtler) }
footer nav {
  display: flex;
  justify-content: center;
}
footer nav > span {
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
}
footer nav > span:last-child { justify-content: end }
footer nav a { font-weight: unset }
footer nav a + a::before {
  content: "";
  border-left: 1px solid var(--f-border);
  margin: 0 1em;
}

@media(width <= 512px) {
  footer nav { display: block; }
  footer nav > span { display: block; }
  footer nav a { display: block; }
  footer nav a + a::before { content: none; }
}