* { 
  padding: 0; 
  margin: 0; 
} 
  
canvas {
  display: block; 
  margin: 0;
  
}
.canvasContainer {
  margin: 20px auto 100px auto; 
  background-image: url('bg.png');
  background-size: cover;
  width: 800px;
  height: 450px;
}
.message-start {
  display: block;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 400px) {
  input, select {
    width: 120px;
  }
  canvas {
    margin: 0;
  }
}

/* Mobile */
@media only screen and (max-width: 768px) {
  .mobile-controls-container {
    position: relative;
    bottom: 40px;
  }
  /* .canvasContainer {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #canvas-top {
    height: 600px;
  } */
  .message-container {
    width: 90%;
  }
}
.rotate-container {
  display: none;
}
@media (max-height: 430px) and (orientation: landscape) {
  .rotate-container {
    display: block;
  }
  .game-content {
    display: none;
  }
}