#flappy-monster {
  display: block;
  margin: 0 auto;
  border: 1px solid #000;
}

@media only screen and (min-device-width: 550px) and (max-device-width: 3000px) and (-webkit-min-device-pixel-ratio: 1) {
  #flappy-monster {
    transform: scale(0.8);
    width: 70%;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 600px) and (orientation: portrait) {
  #flappy-monster {
    transform: scale(0.9);
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 100%;
  }
}
@media only screen and (min-device-width: 550px) and (max-device-width: 3000px) and (orientation: portrait) {
  #flappy-monster {
    transform: scale(0.9);
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 100%;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  #flappy-monster {
    transform: scale(0.7);
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 100%;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (max-height: 896px) and (orientation: portrait) {
  #flappy-monster {
    transform: scale(0.7);
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 100%;
  }
}