html {
  font-family: sans-serif;
  background-color: #eee;
  overflow: hidden;
  margin: 0;
}

body {
  --px-scale: 1;
  margin: 0;
}

.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subgame {
  position: relative;
  margin-top: 0;
}

.canvas {
  position: absolute;
  left: calc(50% - var(--px-scale) * 220px / 2);
  top: calc(50% - var(--px-scale) * 220px / 2);
  width: calc(var(--px-scale) * 180px);
  height: calc(var(--px-scale) * 120px);
  padding-left: calc(var(--px-scale) * 20px);
  padding-top: calc(var(--px-scale) * 20px);
  padding-right: calc(var(--px-scale) * 20px);
  padding-bottom: calc(var(--px-scale) * 80px);
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: margin 0.5s, transform 1s;
}

.subgame-container {
  position: absolute;
}

.frame {
  position: absolute;
  left: calc(50% - var(--px-scale) * 220px / 2);
  top: calc(50% - var(--px-scale) * 220px / 2);
  width: calc(var(--px-scale) * 220px);
  height: calc(var(--px-scale) * 220px);
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: margin 0.5s, transform 1s;
}

.faded {
  margin-top: calc(var(--px-scale) * 37px);
}

.extra-faded {
  margin-top: calc(var(--px-scale) * 50px);
}

.hidden {
  display: none;
}

/*# sourceMappingURL=styles.css.map */