@media (min-width:991px) {
  main #main-img>div {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  #main-img {
    height: 300vh;
    width: 100%;
    max-width: 600px;
  }

  header {
    height: 800px;
  }

  .title-img {
    width: 100%;
    max-width: 400px;
  }
}

@media (max-width:1600px) {
  .title-img {
    max-width: 320px;
  }

  .m-height {
    height: 560px;
  }

  header {
    height: 635px;
  }

  .grandmother {
    width: 230px;
  }

  .ball {
    width: 107px;
  }

  .wow {
    left: 214px;
    bottom: 184px;
    width: 45px;
  }

  .pic {
    left: 55px;
    bottom: 65px;
    width: 300px;
  }
}

@media (max-width:1366px) {
  #game .game-box iframe {
    height: 500px;
  }

  .ball {
    left: 63px;
    width: 116px;
  }

  .grandmother {
    right: -41px;
    width: 264px;
  }

  .pic {
    left: -43px;
    bottom: 74px;
    width: 296px;
  }

  .wow {
    left: 122px;
    bottom: 204px;
    width: 46px;
  }

  header {
    height: 670px;
  }

  .m-height {
    height: 600px;
  }

  #game iframe {
    height: 619px;
  }
}

@media (max-width:1280px) {
  .ball {
    left: 63px;
    width: 116px;
  }

  .grandmother {
    right: -41px;
    width: 264px;
  }

  .pic {
    left: -43px;
    bottom: 74px;
    width: 296px;
  }

  .wow {
    left: 122px;
    bottom: 204px;
    width: 46px;
  }

  header {
    height: 670px;
  }
}

@media (max-width:1200px) {
  #game .game-box iframe {
    height: 500px;
  }

  .ball {
    left: 50px;
    width: 96px;
  }

  .grandmother {
    right: 15px;
    width: 244px;
  }

  .pic {
    left: -42px;
    bottom: 55px;
    width: 276px;
  }

  .wow {
    left: 115px;
    bottom: 204px;
    width: 38px;
  }

  header {
    height: 670px;
  }
}

@media (max-width:1199px) {
  .ball {
    left: 134px;
    width: 116px;
  }

  .pic {
    left: 36px;
    bottom: 74px;
    width: 296px;
  }

  .wow {
    left: 200px;
    bottom: 204px;
    width: 46px;
  }

  header {
    height: 715px;
    position: static !important;
  }

  .m-height {
    height: 646px;
  }

  #page-title {
    position: absolute !important;
  }

  #game iframe {
    height: 847px;
  }
}

@media (max-width:1024px) {
  .ball {
    left: 79px;
  }

  .pic {
    left: -13px;
  }

  .wow {
    left: 148px;
  }

  #game iframe {
    height: 840px;
  }
}

@media (max-width:992px) {
  #go-button a {
    filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, .5));
  }

  .m-height {
    height: 662px;
    margin-top: 3.5rem;
    width: calc(100% - 399px);
  }

  .box,
  .box.show {
    transform: none !important;
  }
}

@media (max-width:991px) {
  .offcanvas {
    --bs-offcanvas-width: 200px !important;
    --bs-body-bg: rgba(255, 255, 255, 1) !important;
    padding: 1rem;
  }

  .top-icon {
    bottom: 0;
  }

  header {
    height: 725px;
    z-index: 0;
  }

  #game iframe {
    height: 710px;
  }

    .ms-auto{
    width: 100%;
  }
}

@media (max-width:830px) {
  .m-height {
    height: 680px;
    width: calc(100% - 360px);
  }

  .title-img {
    max-width: 380px;
  }

  .grandmother {
    right: -64px;
    width: 300px;
  }

  .ball {
    left: 70px;
    width: 130px;
  }

  .pic {
    left: -19px;
    bottom: 95px;
    width: 311px;
  }

  .wow {
    left: 143px;
    bottom: 219px;
    width: 63px;
  }

  header {
    height: 750px;
    z-index: 0;
  }

    .ms-auto{
    width: 100%;
  }
}


@media (max-width:768px) {
  .grandmother {
    right: -15px;
    width: 315px;
  }

  .ball {
    left: 102px;
    width: 148px;
  }

  .pic {
    left: 11px;
    bottom: 115px;
    width: 327px;
  }

  .wow {
    left: 194px;
    bottom: 255px;
    width: 54px;
  }

  header {
    height: 820px;
  }

  .m-height {
    height: 745px;
    width: calc(100% - 225px);
  }

  .title-img {
    max-width: 515px;
    padding: 0 3rem !important;
  }

    .ms-auto{
    width: 100%;
  }
}

@media (max-width:767px) {
  #game .game-box iframe {
    height: 680px;
  }

  #game iframe {
    height: 680px;
  }

    .ms-auto{
    width: 100%;
  }
}

@media (max-width: 667px) {
  .m-height {
    height: 760px;
    width: calc(100% - 110px);
  }

    .ms-auto{
    width: 100%;
  }
}

@media (max-width:575px) {
  .grandmother {
    right: 11px;
    width: 279px;
  }

  .ball {
    left: 130px;
    width: 126px;
  }

  .pic {
    left: 36px;
    bottom: 80px;
    width: 312px;
  }

  .wow {
    left: 198px;
    bottom: 208px;
    width: 59px;
  }

  #game iframe {
    height: 680px;
  }

  .m-height {
    width: calc(100% - 0px);
  }

    .ms-auto{
    width: 100%;
  }
}

@media (max-width:480px) {

  .ms-auto{
    width: 100%;
  }

  main>#go-button {
    top: 60px;
  }

  header {
    height: 585px;
  }

  #game .game-box iframe {
    height: 350px;
  }

  .grandmother {
    width: 235px;
  }

  .ball {
    left: 130px;
    width: 105px;
  }

  .pic {
    left: 36px;
    bottom: 63px;
    width: 260px;
  }

  .wow {
    left: 186px;
    bottom: 173px;
    width: 48px;
  }

  #game iframe {
    height: 760px;
  }

  #choose-login h2 span {
    width: 290px !important;
  }

  #upload h2 span {
    width: 155px !important;
  }

  .m-height {
    width: calc(100% - 2px);
  }
}

@media (max-width:430px) {
  .m-height {
    height: 545px;
  }

  .ball {
    left: 75px;
  }

  .wow {
    left: 140px;
  }

  .pic {
    left: -1px;
  }
}

@media (max-width:420px) {
  .ball {
    left: 70px;
  }

  .pic {
    left: 5px;
    bottom: 63px;
  }

  .wow {
    left: 141px;
    bottom: 173px;
  }

  .m-height {
    height: 590px;
  }

  #choose-login h2 span {
    width: 270px !important;
  }

  #upload h2 span {
    width: 140px !important;
  }

  #game iframe {
    height: 680px;
  }

  header {
    height: 675px;
  }
  
  .ms-auto{
    width: 100%;
  }
}

@media (max-width:393px) {
  #game iframe {
    height: 680px;
  }

  .grandmother {
    right: 0px;
  }

  .ball {
    left: 48px;
  }

  .pic {
    left: -8px;
    bottom: 63px;
  }

  .wow {
    left: 128px;
    bottom: 166px;
  }

  header {
    height: 600px;
  }

  .m-height {
    height: 550px;
  }

  .ms-auto{
    width: 100%;
  }
}

@media (max-width:375px) {
  .grandmother {
    width: 198px;
  }

  .ball {
    width: 92px;
  }

  .pic {
    left: 4px;
    width: 219px;
  }

  .wow {
    left: 145px;
    bottom: 157px;
    width: 36px;
  }

  .m-height {
    height: 522px;
  }

  #game iframe {
    height: 680px;
  }

  header {
    height: 580px;
  }

  .ball {
    left: 74px;
  }

  .ms-auto{
    width: 100%;
  }
}

@media (min-width:1025px) and (max-width:1080px) {
  .m-height {
    height: 666px;
  }

  .grandmother {
    right: -14px;
  }

  .ball {
    left: 62px;
  }

  .pic {
    left: -20px;
  }

  .wow {
    left: 145px;
  }
}