:root {
  --yellow: #f3dd93;
  --yellow-50: #f3dd9382;
  --orange: #ff9d62;
  --orange-25: #ff9e6242;
  --pink: #f999ba;
  --green: #b3d084;
  --blue: #7ac2eb;
  --purple: #d6beea;
  --purple-med: #a061d3;
  --orange-med: #cc5200;
  --pink-med: #d62261;
  --green-med: #466e17;
  --blue-med: #1a75ab;
  --text-yo: #2c2543;
  --text-gp: #1b3b32;
  --text-by: #4a2834;
  --background: #fffdf6;
  --bgblue: #f4f7f6;
}
@font-face {
  font-family: "Mondwest";
  src: url(../fonts/PPMondwest-Regular.woff2);
}
@font-face {
  font-family: "NeueBit";
  src: url(../fonts/PPNeueBit-Bold.woff2);
}
@font-face {
  font-family: "VT";
  src: url(../fonts/VT323-Regular.woff2);
}
@font-face {
  font-family: "Dreamer";
  src: url(../fonts/DreamerTM-Regular.woff2);
}
footer {
  font-family: "VT";
  position: relative;
}
footer * {
  background-color: transparent;
  text-decoration: none;
  color: var(--purple);
  text-shadow: 1px 1px 1px var(--purple-med);
}
footer a:hover {
  color: var(--purple-med);
  text-shadow: 1px 1px 1px var(--purple);
}
footer s {
  color: var(--green);
  font-size: small;
}
.section {
  background-color: var(--yellow-50);
  padding: 10px;
  color: var(--text-by);
  font-family: "VT";
  position: relative;
  margin: 5px;
}
.soon::after {
  content: "";
  animation: terminal-dots 2s infinite step-start;
}
@keyframes terminal-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotate {
  animation: spin 10s linear infinite;
}
.rotateL {
  animation: spinL 10s linear infinite;
}
@keyframes spinL {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.pixel-corners {
  clip-path: polygon(
    0px calc(100% - 6px),
    2px calc(100% - 6px),
    2px calc(100% - 4px),
    4px calc(100% - 2px),
    6px calc(100% - 2px),
    6px 100%,
    calc(100% - 6px) 100%,
    calc(100% - 6px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) 4px,
    calc(100% - 4px) 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 0px,
    6px 0px,
    6px 2px,
    4px 2px,
    2px 4px,
    2px 6px,
    0px 6px
  );
}
.pixel-orange,
.pixel-orange--wrapper {
  clip-path: polygon(
    0px calc(100% - 6px),
    2px calc(100% - 6px),
    2px calc(100% - 4px),
    4px calc(100% - 2px),
    6px calc(100% - 2px),
    6px 100%,
    calc(100% - 6px) 100%,
    calc(100% - 6px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) 4px,
    calc(100% - 4px) 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 0px,
    6px 0px,
    6px 2px,
    4px 2px,
    2px 4px,
    2px 6px,
    0px 6px
  );
  position: relative;
}
.pixel-orange {
  border: 2px solid transparent;
}
.pixel-orange--wrapper {
  width: fit-content;
  height: fit-content;
}
.pixel-orange--wrapper .pixel-orange {
  display: block;
  clip-path: polygon(
    2px 6px,
    4px 6px,
    4px 4px,
    6px 4px,
    6px 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) calc(100% - 6px),
    calc(100% - 4px) calc(100% - 6px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 6px) calc(100% - 4px),
    calc(100% - 6px) calc(100% - 2px),
    6px calc(100% - 2px),
    6px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 6px),
    2px calc(100% - 6px)
  );
}
.pixel-orange::after,
.pixel-orange--wrapper::after {
  content: "";
  position: absolute;
  clip-path: polygon(
    0px calc(100% - 6px),
    2px calc(100% - 6px),
    2px calc(100% - 4px),
    4px calc(100% - 2px),
    6px calc(100% - 2px),
    6px 100%,
    calc(100% - 6px) 100%,
    calc(100% - 6px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) 4px,
    calc(100% - 4px) 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 0px,
    6px 0px,
    6px 2px,
    4px 2px,
    2px 4px,
    2px 6px,
    0px 6px,
    0px 50%,
    2px 50%,
    2px 6px,
    4px 6px,
    4px 4px,
    6px 4px,
    6px 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) calc(100% - 6px),
    calc(100% - 4px) calc(100% - 6px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 6px) calc(100% - 4px),
    calc(100% - 6px) calc(100% - 2px),
    6px calc(100% - 2px),
    6px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 6px),
    2px calc(100% - 6px),
    2px 50%,
    0px 50%
  );
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--orange);
  display: block;
  pointer-events: none;
}
.pixel-orange::after {
  margin: -2px;
}
.pixel-blue,
.pixel-blue--wrapper {
  clip-path: polygon(
    0px calc(100% - 6px),
    2px calc(100% - 6px),
    2px calc(100% - 4px),
    4px calc(100% - 2px),
    6px calc(100% - 2px),
    6px 100%,
    calc(100% - 6px) 100%,
    calc(100% - 6px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) 4px,
    calc(100% - 4px) 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 0px,
    6px 0px,
    6px 2px,
    4px 2px,
    2px 4px,
    2px 6px,
    0px 6px
  );
  position: relative;
}
.pixel-blue {
  border: 2px solid transparent;
}
.pixel-blue--wrapper {
  width: fit-content;
  height: fit-content;
}
.pixel-blue--wrapper .pixel-blue {
  display: block;
  clip-path: polygon(
    2px 6px,
    4px 6px,
    4px 4px,
    6px 4px,
    6px 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) calc(100% - 6px),
    calc(100% - 4px) calc(100% - 6px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 6px) calc(100% - 4px),
    calc(100% - 6px) calc(100% - 2px),
    6px calc(100% - 2px),
    6px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 6px),
    2px calc(100% - 6px)
  );
}
.pixel-blue::after,
.pixel-blue--wrapper::after {
  content: "";
  position: absolute;
  clip-path: polygon(
    0px calc(100% - 6px),
    2px calc(100% - 6px),
    2px calc(100% - 4px),
    4px calc(100% - 2px),
    6px calc(100% - 2px),
    6px 100%,
    calc(100% - 6px) 100%,
    calc(100% - 6px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) 4px,
    calc(100% - 4px) 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 0px,
    6px 0px,
    6px 2px,
    4px 2px,
    2px 4px,
    2px 6px,
    0px 6px,
    0px 50%,
    2px 50%,
    2px 6px,
    4px 6px,
    4px 4px,
    6px 4px,
    6px 2px,
    calc(100% - 6px) 2px,
    calc(100% - 6px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 6px,
    calc(100% - 2px) 6px,
    calc(100% - 2px) calc(100% - 6px),
    calc(100% - 4px) calc(100% - 6px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 6px) calc(100% - 4px),
    calc(100% - 6px) calc(100% - 2px),
    6px calc(100% - 2px),
    6px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 6px),
    2px calc(100% - 6px),
    2px 50%,
    0px 50%
  );
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--blue);
  display: block;
  pointer-events: none;
}
.pixel-blue::after {
  margin: -2px;
}
.outlink {
  font-size: x-large;
  text-decoration: dashed;
  color: var(--blue);
}
.outlink:visited {
  color: var(--purple);
}