: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);
}
body {
  background-color: var(--background);
  background-image: url(../images/bgs/grid.png);
  background-size: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}
header {
  margin-top: 0px;
  font-family: "Dreamer";
  font-size: 110px;
  color: var(--green);
  text-shadow: var(--orange-25) 3px 3px;
  letter-spacing: 3px;
}
header * {
  margin: 0;
}
h1 {
  font-family: "Mondwest";
  text-align: center;
  font-size: larger;
  margin: 0;
}
h2 {
  font-family: "VT";
  text-align: center;
  margin: -3px 0 5px 0;
}
.section {
  background-color: var(--yellow-50);
  padding: 10px;
  color: var(--text-by);
  font-family: "VT";
  position: relative;
  margin: 5px;
}
th {
  background-color: var(--purple);
  padding: 0px 5px 0px 5px;
  width: fit-content;
  padding: 0;
  margin: 0;
}
td {
  background-color: var(--orange-25);
  padding: 2px 5px 2px 7px;
  overflow-wrap: break-all;
  hyphens: auto;
  width: 66%;
}
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;
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#facts {
  display: flex;
  height: auto;
  width: fit-content;
}
#mecore {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(1, 150px);
  row-gap: 5px;
  column-gap: 5px;
}
#mecore img {
  max-width: 150px;
  height: auto;
}
#manifest {
  text-align: center;
  width: 450px;
}
.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;
}
.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.imgtxt span {
  opacity: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 5rem;
  color: #fff;
  font-family: "Dreamer";
}
.imgtxt:hover span,
.imgtxt:focus span {
  opacity: 1;
}
.imgtxt:hover img,
.imgtxt:focus img {
  transform: scale(1.05) rotate(30deg);
}
@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);
  }
}