body {
    background: rgba(128, 128, 128, 0.3);
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#canvas {
    margin-top: 20px;
    border: 2px solid blue;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 640px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 512 / 342;
    will-change: contents;
    transform: translateZ(0);
    backface-visibility: hidden;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

#arena {
  margin: 0 auto;
  width: 642px;
  max-width: 100%;
  will-change: contents;
  transform: translateZ(0);
}

@media (max-width: 768px) {
    #canvas {
        width: 100%;
        height: auto;
    }
    
    #arena {
        width: 100%;
    }
}

#instructions {
margin-left: 0px;
margin-top: 15px;
padding-left: 0px;
color: yellow;
font-size: 1em;
}

.keys {
color: black;
border-radius: 5px;
margin-left: 0px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
display: inline;
}

.explanation {
color: blue;
display: inline;
margin-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 2px;
}

#checkboxes {
margin-left: 0px;
margin-right: 0px;
padding-left: 5px;
padding-top: 5px;
color: black;
font-size: 1em;
}

.checkbox-div {
display: inline;
margin-right: 5px;
outline:none;
}


#buttons-div {
/*float: right;*/
margin-left: 0px;
margin-right: 2px;
margin-top: 10px;
padding: 0px;
font-size: 1em;
}

.glider-button {
font-size: 1em;
margin-top: 0px;
margin-right:10px;
color:black;
background-color:lightgray;
outline:none;
}

#houses-span {
margin-left:5px;
margin-right:20px;
}
#houses-select {
  margin-left:5px;
}
  
#rooms-span {
  margin-left:5px;
  margin-right:20px;
  visibility:hidden;
  }

  #rooms-select {
    margin-left:5px;
  }
#credit {
  color:black;
  float:right;
  font-size:1.0em;
}