/* iPhone SE and similar small screens with LIMITED HEIGHT */
/* This file targets ONLY screens with max-height: 750px */
/* Screens taller than 750px will NOT be affected */

/* Base mobile styles for screens under 991px width AND max 750px height */
@media screen and (max-width: 991px) and (max-height: 750px) {
  .floor {
    height: 150px;
  }

  .grass {
    height: 80px;
    bottom: 148px;
  }

  .block_cat {
    height: 250px;
    margin-right: 0;
    right: auto;
  }

  .wrapper {
    justify-content: center;
    align-items: flex-start;
  }

  .button_buy {
    display: none;
  }

  .logo {
    height: 55px;
  }

  .block_interaction {
    justify-content: center;
    align-items: center;
    height: auto;
    margin-top: 122px;
    position: absolute;
    inset: 0% auto auto;
  }

  .block_tap {
    height: 450px;
  }

  .page1 {
    display: none;
  }

  .cat2 {
    height: 300px;
  }

  .cat3 {
    height: 300px;
    margin-right: 0;
    right: auto;
  }

  .cat4 {
    height: 350px;
    right: auto;
  }

  .buy {
    background-image: url('../images/chart.svg');
    background-size: auto 80%;
    display: flex;
  }

  .sand {
    height: 135px;
  }

  .cat5 {
    height: 250px;
  }

  .sea {
    height: 180px;
  }

  .continue {
    display: flex;
  }
}

/* Medium mobile styles for screens under 767px width AND max 750px height */
@media screen and (max-width: 767px) and (max-height: 750px) {
  .block_cat {
    height: 200px;
  }

  .header_left {
    margin: 15px 0 0;
    left: auto;
  }

  .header_right {
    margin: 85px 0 0;
    right: auto;
  }

  .dex {
    margin-left: 0;
  }

  .button_buy {
    margin: 0 0 15px;
    left: auto;
  }

  .logo {
    margin-right: 0;
  }

  .block_interaction {
    margin-top: 173px;
  }

  .block_tap, .cat2 {
    height: 250px;
  }

  .cat4 {
    height: 300px;
  }

  .cat5 {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    right: auto;
  }

  .num {
    font-size: 30px;
    line-height: 30px;
  }

  .continue {
    margin: 20px 0 15px;
    left: auto;
  }
}

/* Small mobile styles for screens under 479px width AND max 750px height */
@media screen and (max-width: 479px) and (max-height: 750px) {
  .binance {
    height: auto;
    margin-bottom: 90px;
    inset: auto auto 0% 0%;
  }

  .junk1 {
    bottom: 26%;
    left: -3%;
  }

  .screen_wrap {
    padding: 2px;
  }

  .screen1 {
    border-radius: 21px;
    padding: 5px;
  }

  .screen2 {
    padding: 10px;
  }

  .screen3 {
    border-radius: 8px;
  }

  .screen_commands {
    display: none;
  }

  .header_right {
    margin-top: 66px;
    margin-left: 0;
  }

  .tg, .x, .dex {
    width: 30px;
    height: 30px;
  }

  .button_buy {
    display: none;
  }

  .logo {
    height: 40px;
  }

  .block_interaction {
    margin-top: 113px;
  }

  .title {
    font-size: 14px;
    line-height: 14px;
  }

  .count, .count_shadow {
    font-size: 25px;
    line-height: 25px;
  }

  .block_tap {
    height: 150px;
    margin-top: 7px;
    margin-bottom: 7px;
  }

  .block_leaderboard {
    margin-top: 13px;
  }

  .page1 {
    display: none;
  }

  .page2 {
    background-image: linear-gradient(#0000, #0000), url('../images/bg2.jpg');
    background-position: 0 0, 50% 0;
    display: none;
  }

  .cat2 {
    width: 90%;
    height: auto;
  }

  .page3 {
    display: none;
  }

  .wave {
    background-position: 50% 100%;
    height: 500px;
  }

  .cat3 {
    width: auto;
    height: 220px;
  }

  .page4 {
    display: none;
  }

  .cat4 {
    height: 200px;
    margin-bottom: 10px;
  }

  .clouds {
    background-position: 50% 100%;
    background-size: auto 50%;
  }

  .buy {
    width: 30px;
    height: 30px;
  }

  .page5 {
    display: none;
  }

  .sand {
    height: 100px;
  }

  .cat5 {
    height: 185px;
    margin-bottom: 15px;
  }

  .sea {
    height: 150px;
  }

  .num {
    font-size: 25px;
    line-height: 25px;
  }

  .section_welcome, .continue {
    display: flex;
  }
}