@media only screen and (max-width: 760px) {
  .title {
    display: none;
  }

  .game-screen {
    width: 100%;
  }

  canvas {
    border: none;
  }

  .start-screen {
    background-size: 100% 480px;
    border: none;
  }

  .legal-notice {
    background-size: 100% 480px;
    border: none;
  }

  .controls {
    background-size: 100% 480px;
    border: none;
  }
}

@media only screen and (max-height: 640px) {
  .title {
    display: none;
  }
}

@media only screen and (max-height: 485px) {
  .game-screen {
    height: 100vh;
  }

  canvas {
    border: none;
  }

  .start-screen {
    background-size: 720px 100%;
  }

  .control-buttons-left {
    display: flex;
  }

  .control-buttons-right {
    display: flex;
  }

  .start-screen {
    background-size: 720px 100%;
    border: none;
  }

  .legal-notice {
    background-size: 720px 100%;
    border: none;
  }

  .controls {
    background-size: 720px 100%;
    border: none;
  }

  .portrait-mode {
    display: none;
  }
}

@media only screen and (max-width: 740px), (max-height: 640px) {
  .control-buttons-left {
    display: flex;
    gap: 20px;
    margin-left: 30px;
  }

  .left {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
  }

  .left img {
    height: 40px;
  }

  .right {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
  }

  .right img {
    height: 40px;
  }

  .control-buttons-right {
    display: flex;
    gap: 20px;
    margin-right: 30px;
  }

  .jump {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
  }

  .jump img {
    height: 30px;
  }

  .throw {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
  }

  .throw img {
    height: 40px;
  }

  .portrait-mode {
    display: none;
    background-image: url("../assets/img/10_page_background/turn-phone.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
  }
}

@media (orientation: portrait) and (max-width: 740px) {
  .portrait-mode {
    display: flex;
  }

  .start-screen {
    display: none;
  }
}

@media (orientation: portrait) and (max-width: 450px) {
  .portrait-mode {
    background-size: contain;
  }

  .start-screen {
    display: none;
  }
}

@media (orientation: portrait) and (max-width: 1280px) and (max-height: 853px) {
  .portrait-mode {
    background-size: cover;
  }

  .start-screen {
    display: none;
  }
}

@media (orientation: portrait) and (max-width: 1280px) and (max-height: 853px) {
  .portrait-mode {
    background-size: cover;
  }

  .start-screen {
    display: none;
  }
}

@media (orientation: landscape) and (max-width: 1280px) and (max-height: 853px) {
  .title {
    display: none;
  }

  .game-screen {
    height: 100vh;
    width: 100%;
  }

  .start-screen {
    background-size: 100% 100%;
    border: none;
  }

  .controls {
    background-size: 100% 100%;
    border: none;
  }

  .legal-notice {
    background-size: 100% 100%;
    border: none;
  }

  .control-buttons-left {
    display: flex;
    gap: 20px;
    margin-left: 30px;
  }

  .left {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
  }

  .left img {
    height: 40px;
  }

  .right {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
  }

  .right img {
    height: 40px;
  }

  .control-buttons-right {
    display: flex;
    gap: 20px;
    margin-right: 30px;
  }

  .jump {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
  }

  .jump img {
    height: 30px;
  }

  .throw {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
  }

  .throw img {
    height: 40px;
  }

  .portrait-mode {
    display: none;
  }
}