/* 화면 전체를 어둡게 하고 게임을 가운데 놓는다 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #12111c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
}

#wrap {
  text-align: center;
}

#screen {
  /*
    핵심 두 줄.
    image-rendering: pixelated  -> 확대해도 도트가 흐려지지 않는다.
    width 960px = 320 * 3       -> 반드시 정수배로 늘려야 도트가 고르게 보인다.
  */
  image-rendering: pixelated;
  width: 960px;
  height: 540px;
  background: #12111c;
  border: 2px solid #29366f;
  display: block;
}

.hint {
  margin-top: 12px;
  color: #566c86;
  font-size: 14px;
  letter-spacing: 1px;
}