@font-face {
  font-family: VCR;
  src: url("./assets/VCR.ttf");
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  overscroll-behavior: contain;
}

#game {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

#controls {
  width: auto;
  margin: 0 auto;
}

#social {
  position: absolute;
  width: 200px;
  display: block;
  z-index: 99;
  display: none;
  left: 50%;
  font-family: "VCR", 'Courier New', Courier, monospace;
  text-align: center;
  margin-left: -100px;
}

#social ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#social li {
  margin: 10px 0;
}

#social a,
#social a:visited {
  color: rgb(255, 0, 100);
}

.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.grid {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px 5px;
  grid-template-areas:
    ". up ."
    "left down right";
}

.grid>div {
  background: blue;
  border-radius: 20px;
  padding: 10px;
}

.up {
  grid-area: up;
}

.down {
  grid-area: down;
}

.left {
  grid-area: left;
}

.right {
  grid-area: right;
}