@font-face {
  font-family: "prstart";
  src: url("../fonts/prstart.ttf") format("truetype");
  font-display: swap;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: #000;
}

body {
  color: #fff;
  font-family: "prstart", monospace;
  margin-top: 20px;
}

.page {
  width: 576px;
  margin: 0 auto;
  padding-top: 24px;
}

.screen-wrap {
  position: relative;
  width: 576px;
  background: #000;
  overflow: hidden;
}

#canvasInfo {
  display: block;
}

#canvas {
  display: block;
  width: 576px;
  height: 438px;
  border: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.about-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(105%);
  transition: transform 220ms ease-out;
  background: rgba(0, 0, 0, 0.94);
  border-top: 1px solid #ffffff;
  z-index: 10;
  pointer-events: none;
}

.about-panel.is-open {
  transform: translateY(0);
  pointer-events: auto;
}

.about-panel__content {
  padding: 10px 12px 8px;
  text-align: center;
  font-family: "prstart", monospace;
  font-size: 10px;
  color: #fff;
}

.about-panel__content p {
  margin: 0 0 10px;
}

.about-panel__content a {
  color: #6fb0ff;
  text-decoration: underline;
}

#about-exit {
  font-family: "prstart", monospace;
  font-size: 10px;
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
  padding: 4px 14px;
  cursor: pointer;
}