/** Generated by FG **/
@font-face {
  font-family: 'computing_60s';
  /* src: url('fonts/Computing 60s.eot'); */
  src: url('fonts/Computing 60s.woff2') format('woff');
  /* ,
    url('fonts/Computing 60s.ttf') format('truetype'),
    url('fonts/Computing 60s.svg') format('svg'); */
  font-weight: normal;
  font-style: normal;
}

/** Generated by FG **/
@font-face {
  font-family: 'area_51';
  src: url('fonts/Area51.eot');
  src: local('☺'), url('fonts/Area51.woff') format('woff'),
    url('fonts/Area51.ttf') format('truetype'),
    url('fonts/Area51.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
  font-family: 'computing_60s', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 24px;
}

html {
  background: black;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

h1 {
  text-align: center;
  font-weight: 400;
}

p {
  font-family: 'area_51', sans-serif;
  font-size: 24px;
  white-space: normal;
  letter-spacing: -7px;
  line-height: 32px;
}

body {
  width: 100%;
  max-width: 872px;
  padding: 100px 0;
  /* background: url(background@2x.png) no-repeat top center; */
  background-size: 872.5px;
  min-height: 660px;
}

body > main,
body > footer {
  max-width: 640px;
  margin: 0 auto;
}

/* a {
  color: #fff;
} */

#highscore .seed {
  color: #929292;
  text-align: center;
}

tr {
  width: 100%;
  display: flex;
  padding: 2px 4px;
}

td {
  width: 33%;
  white-space: pre;
}

#highscore .score {
  text-align: right;
}

table {
  width: 100%;
}

footer ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  margin-top: 20px;
}

a,
.link {
  text-decoration: none;
}

a > div,
.link > div {
  color: #929292;
  position: relative;
}

a:hover > div,
.link:hover > div {
  /* color: white; */
}

a > div:first-letter,
.link > div:first-letter {
  color: white;
}

#play a:hover > div:first-letter,
#play .link:hover > div:first-letter {
  color: white;
}

a > div:after,
.link > div:after {
  content: '—';
  left: 0;
  position: absolute;
  bottom: 0px;
  vertical-align: bottom;
  color: cyan;
  font-weight: bold;
  top: 12px;
  left: 2px;
}

#play a:hover > div:after,
#play .link:hover > div:after {
  color: cyan;
}

#play a > div:after,
#play .link > div:after {
  top: 9px;
  left: 0px;
}

#canvas {
  display: block;
  margin: auto;
  user-select: none;
  width: calc(3 * 16 * 10px);
  height: calc(3 * 16 * 10px);
}

canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

aside * {
  text-transform: uppercase;
  font-family: 'computing_60s';
  letter-spacing: normal;
  margin: 0;
  text-align: left;
}

#play main {
  display: flex;
}

#play * {
  font-size: 22px;
}

#play aside {
  margin-left: 20px;
  min-width: 10ch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#play p.seed span {
  text-transform: lowercase;
}

#play p,
#play p span {
  line-height: 23px;
  font-size: 22px;
  color: #929292;
  display: flex;
  justify-content: space-between;
}

#play p span {
  color: inherit;
}

#play p.score {
  color: white;
}

#play p.level {
  color: white;
  margin-top: 20px;
}

.controls ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button.link {
  background: none;
  border: 0;
  padding: 0;
  padding: 0;
}

#play .controls {
  image-rendering: pixelated;
  image-rendering: crisp-edges;

  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAbklEQVQ4je2UUQrAIAxDe/8DJcdzP8KE2ZpCBQcW8iV9DUJiNgyA5on03wA08yZaWimErhxRgaYvR7vdUC0UW6D8QhWQcuBCN0D5G6eVUM4SVeZUKggBFMeUPC37iRp0RcFEGoq3tPPQ/s+RRs4DpMmkCLFR9tQAAAAASUVORK5CYII=')
    7 / 7px / 0 round;
  border-width: 7px;
  border-style: solid;

  padding: 4px;
  position: relative;
  margin-bottom: 16px;
}

#play .controls * {
  font-size: 18px;
}

#play .controls h2 {
  font-size: 14px;
  color: #b6b6b6;
  background: black;
  display: inline-block;
  position: absolute;
  margin: 0 10px;
  top: -12px;
  padding: 0 8px;
}

#play a,
#play button {
  cursor: inherit;
}

#play .controls li {
  margin: 14px 0;
}

.playing .controls div:first-letter,
.playing .controls div:after {
  color: #929292;
}

@media screen and (max-width: 520px) {
  html {
    justify-content: flex-start;
  }

  body {
    background-image: none;
    padding: 12px;
    padding-top: 0;
    max-width: 100vw;
    margin: 0;
    padding-top: 12px;
  }

  body > main {
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    /* flex-grow: 1; */
  }

  #play aside {
    margin-top: 16px;
    margin-left: 0;
  }

  #play p.level {
    margin-top: 8px;
  }

  #canvas {
    width: calc(3 * 16 * 10px);
    height: calc(3 * 16 * 10px);
    width: calc(100vw - 24px);
    height: calc(100vw - 24px);
  }

  #play .controls {
    margin-top: 32px;
  }
}