body{
  background:#FBFBFB;
  font-family: 'Source Code Pro', monospace;
  color:#989fb1;
  padding:16px;
}
#gamearea {
  position:relative;
}
#container {
    width: 100%;
    position: absolute;
    height: 500px;
    top: 0;
}
#container > * {
  width:25%;
  position:absolute;
  bottom:0;
}

#text-game{
  color:#4876d6;
  font-style:italic;
}
#text-margin{
  color:#0c969b;
}
#text-comments,
.commented{
  color:#989fb1;
}
#text-comments{
  opacity:1;
}
.fade-out{
  transition: .3s linear all;
  opacity:0!important;
}
#gamearea-background,
.highlight{
  color:#111;
}
.col-1,
.col-2,
.col-3,
.col-4{
  color:#aa0982
}
.col-1 {
  left:11ch;
}
.col-1:before{
  content:'top'
}
.col-2 {
  left:15ch;
}
.col-2:before{
  content:'right'
}
/* testing */
.col-3 {
  left:21ch;
}
.col-3:before{
  content:'bottom'
}
.col-4 {
  left:28ch;
}
.col-4:before{
  content:'left'
}
#controls{
  position:absolute;
  z-index:2;
}
button{
  border: 0;
  font-size: 16px;
  font-family: inherit;
  padding: 20px;
  width:62px;
  height:62px;
  color: #111;
  background: #efefef;
}
#controls{
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 1fr 1fr 1fr;
  left:50%;
  transform:translateX(-50%);
  position:absolute;
  bottom: 48px;
  display: none;
}
button[direction="ArrowUp"]{
  grid-column: 2;
}
button[direction="ArrowDown"]{
  grid-column: 2;
  grid-row: 3;
}
button[direction="ArrowLeft"]{
  grid-column: 1;
  grid-row: 2;
}
button[direction="ArrowRight"]{
  grid-column: 3;
  grid-row: 2;
}

@media (hover: none) and (pointer: coarse) {
 #controls{
   display:grid;
 }
 #text-comments{
   display:block;
   margin-left:4ch;
 }
 #gamearea-background > br:last-of-type{
   display:none;
 }
}

.mobile #controls{
   display:grid;
}
.mobile #text-comments{
  display:block;
  margin-left:4ch;
}
.mobile #gamearea-background > br:last-of-type{
  display:none;
}