body {
  margin: 0;
}
canvas {
  background-image: url('bg.png');
  background-size: cover;
  margin: 0 auto;
}
.canvasContainer{
  width: 800px;
  margin: 0 auto;
  position: relative;
}
.center {
  text-align: center;
}
.game {
  position: relative;
}
#score{
  position: relative;
  top:70px;
  left:20px;
  color: #000000;
}
.message-start {
  display: block;
}
.mute-button {
  display: inline-block;
  background-image: url('mute.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 25px;
  width: 25px;
  cursor: pointer;
  position: relative;
  left: 770px;
  top: 400px;
}


/* horizontal mobile */
/* @media only screen and (max-width: 845px) {
  .canvasContainer {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #canvas-top {
    width: 100%;
  }
  .mute-button {
    position: absolute;
    left: 20px;
    top: 340px;
  }
} */

/* Mobile */
@media only screen and (max-width: 768px) {
  .canvasContainer {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #canvas-top {
    height: 600px;
  }
  .message-container {
    width: 90%;
  }
  .mute-button {
    position: absolute;
    left: 20px;
    top: initial;
    bottom: 20px;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  .canvasContainer {
    width: 100%;
  }
  #canvas-top {
    width: 100%;
  }
  .mute-button {
    left: 690px;
    top: 360px
  }
  .mobile-controls {
    display: block;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  .mobile-controls .arrow {
    width: 75px;
    height: 75px;
    position: absolute;
  }
  .mobile-controls .arrow-left {
    right: 95px;
    bottom: 48px;
  }
  .mobile-controls .arrow-right {
    right: -21px;
    bottom: 48px;
  }
  .mobile-controls .arrow-up {
    bottom: 95px;
    right: 37px;
  }
  .mobile-controls .arrow-down {
    bottom: 0;
    right: 37px;
  }
}