/* Responsive Design Media Queries */
@media (max-width: 767px) {
  .start-bttn {
    margin: 20px auto 15px auto;
  }
  .game-over-img img,
  #game-won-img img {
    max-height: 200px;
    width: 80%;
  }
  #game-over-screen,
  #game-won-screen {
    padding: 20px;
  }
  .endgame-buttns {
    margin-top: 20px;
  }
  #start-screen {
    height: auto;
  }
}

@media (max-height: 480px) {
  canvas {
    height: calc(var(--vh, 1vh) * 100);
    width: 100dvw;
    max-width: 100%;
  }
  .start-bttn {
    margin: 15px auto 10px auto;
  }
  .endgame-buttns {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-top: 250px;
    flex-wrap: wrap;
  }
  #start-button {
    position: fixed;
    bottom: 80%;
    right: 30%;
  }
}

@media (max-width: 1024px) {
  .game-over-img img,
  #game-won-img img {
    max-height: 30vh;
    width: 90%;
  }
  #start-screen-img {
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    max-width: none;
    object-fit: cover;
    object-position: center;
  }
  .endgame-buttns {
    margin-top: 20px;
    gap: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .start-bttn {
    margin: 20px auto 15px auto;
  }
  .game-over-img img,
  #game-won-img img {
    max-height: 200px;
    width: 80%;
  }
  #game-over-screen,
  #game-won-screen {
    padding: 20px;
  }
  .endgame-buttns {
    margin-top: 20px;
  }
}

@media (max-width: 480px) {
  #mute-button,
  #copyright-button {
    top: 15px;
    width: 38px;
    height: 38px;
  }
  #mute-button {
    right: 15px;
  }
  #copyright-button {
    right: 60px;
    font-size: 20px;
  }
}

@media (min-width: 481px) and (max-width: 720px) {
  #mute-button,
  #copyright-button {
    top: 18px;
    width: 40px;
    height: 40px;
  }
  #mute-button {
    right: 18px;
  }
  #copyright-button {
    right: 65px;
    font-size: 22px;
  }
}