@media screen and (max-width: 720px) {
  canvas {
    width: 70%;
  }
  .dimensions {
    width: 100% !important;
  }
  .dimensions-legal-notice {
    width: 100% !important;
  }
  .below-control {
    width: 470px;
  }
  .below-control-audio {
    width: 100% !important;
  }
  .dimensions-mobile-buttons {
    width: 100% !important;
  }
  .story-container {
    text-align: center;
    display: flex !important;
    justify-content: center;
  }
  .story p {
    width: 90% !important;
    font-size: 15px
  }
  .legal-notice p {
    width: 90% !important;
  }
}

@media screen and (max-width: 600px) {
  .legal-notice {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}

@media screen and (max-width: 550px) {
  .global-div {
    display: none !important;
  }
  .below-control {
    display: none !important;
  }
}

@media screen and (min-width: 550px) {
  .wrong-dimensions {
    display: none !important;
  }
}

@media screen and (min-height: 1023px) {
  .top-audio-container {
    top: 40% !important;
  }
  .mobile-buttons-container {
    top: 80% !important;
  }
}

@media screen and (min-height: 820px) {
  .top-audio-container {
    top: 38%;
  }
  .mobile-buttons-container {
    top: 88%;
  }
}

@media screen and (min-height: 480px) {
  .top-audio-container {
    top: 36%;
  }
  .mobile-buttons-container {
    top: 88%;
  }
}

@media screen and (max-height: 690px) {
  canvas {
    height: 70vh;
  }
}

@media screen and (max-height: 740px) {
  .headline {
    display: none !important;
  }
}

@media screen and (max-height: 500px) {
  .below-control p {
    margin: 0;
    font-size: 15px;
  }
  .below-control-audio p {
    margin: 0;
    font-size: 15px;
  }
}

@media screen and (max-height: 480px) {
  .dimensions {
    height: 100vh !important;
  }

  .dimensions-legal-notice {
    height: 100vh !important;
  }

  .legal-notice p {
    font-size: 9px !important;
  }

  .button, .disabled-button {
    height: 30px;
    width: 150px;
    font-size: 16px;
  }

  .headline {
    display: none !important;
  }
}