/************************ RESPONSIVE STYLES ************************/

/* Max-width Media Queries */

@media only screen and (max-width: 1200px) {
  #start_background_img {
    width: 100%;
    margin: 0;
    object-fit: cover;
  }
}

@media only screen and (max-width: 1175px) {
  #game_over,
  #you_win {
    width: 90vw;
    border-left: none;
    border-right: none;
    border-radius: 5%;
    filter: drop-shadow(0px 5px 15px white);
  }
}

@media only screen and (max-width: 1000px) {
  canvas {
    width: 100vw;
  }
  .sound_screen_container {
    width: 95vw;
  }
}

@media only screen and (max-width: 670px) {
  #start_background_img {
    object-position: 30%;
  }
}

@media only screen and (max-width: 600px) {
  .instruction_sheet_container {
    width: 100%;
    justify-content: space-evenly;
  }
}

@media only screen and (max-width: 480px) {
  #instructions_sheet {
    top: 0;
    height: 100vh;
  }
  .instruction_sheet_container {
    flex-direction: column;
  }
  .preview_img {
    margin-top: -8vh;
    margin-bottom: -3vh;
  }
}

@media only screen and (max-height: 750px) and (max-width: 1024px) {
  canvas {
    height: 50vh;
  }

  #start_background_img {
    height: 100vh;
    top: 0;
  }

  .sound_screen_container {
    display: none;
  }

  .instructions_img {
    display: none;
  }

  #sound_toggle {
    display: none;
  }

  #game_over,
  #you_win {
    height: 90vh;
    top: -15px;
  }

  body {
    filter: none;
  }

  @keyframes scrollUp {
    0% {
      bottom: -300%;
    }
    100% {
      bottom: 19%;
    }
  }
}

/* Min-width Media Queries */

@media only screen and (min-width: 700px) and (max-height: 750px) {
  #start_screen_buttons_container {
    left: 12vw;
    bottom: 30vh;
  }
}

@media only screen and (min-width: 1200px) and (min-height: 800px) {
  #start_screen_buttons_container {
    left: 25vw;
  }
}

@media only screen and (min-width: 1300px) {
  canvas {
    width: 60vw;
  }
  .sound_screen_container {
    width: 60vw;
  }
}

@media only screen and (min-width: 1500px) {
  #start_screen_buttons_container {
    left: 0;
  }
  .start_button {
    width: clamp(10vw, 10vw, 500px);
    height: clamp(5vh, 10vh, 500px);
  }
}

@media only screen and (min-width: 1800px) {
  #start_background_img {
    width: 70%;
    margin: 0 auto;
  }
}