body{
      margin: 0;
      font-family: "Poppins", sans-serif;
      text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.137);
      /* max-width: 450px;
      max-height: 850px;
      margin: 0 auto;
      position: relative;
      top: 10%; */
      display: block;
      margin: 0 auto;
      max-width: 360px;
      max-height: 640px;
      position: relative;
      overflow: hidden;
      margin-top: 10px;
      box-sizing: border-box;
    }
    .game{
      min-height: 640px;
      width: 100%;
      position: relative;
      border-radius: 25px;
      overflow: hidden;
    }
    .container{
      min-height: 640px;
      position: relative;
      overflow: hidden;
      background: #180050;
    }
    .container::before {
      content: "";
      background-image: url(track-left.png);
      width: 220px;
      height: 111px;
      position: absolute;
      left: -24%;
      top: -6%;
      background-size: 220px;
    }
    .container::after {
      content: "";
      background-image: url(track-right.png);
      width: 220px;
      height: 111px;
      position: absolute;
      right: -24%;
      top: -6%;
      background-size: 220px;
    }
    #countdown {
      position: absolute;
      left: 50%;
      top: 50%;
      display: inline-block;
      transform: translate(-50%, -50%);
      transition: 1s;
      font-size: 0vw;
      opacity: 50%;
      color: #fff; 
    }
    h1{
      font-size: 50px;
      margin-top: 50px;
      position: relative;
    z-index: 30000;
    }
    
    .icecream-win{
      width: 360px;
      position: absolute;
      top: 30vh;
      z-index: 20000;
      margin: 35px auto;
      display: none;
    }
    .icecream-win.animate{
      display: block;
      animation: imageAnimation 4s;
    }
    @keyframes imageAnimation{
      0% {
        transform: scale(0.3);
      }
      50% {
        transform: scale(1.3);
      }
    }
    .icecream-lose{
      width: 360px;
      left: 0;
      right: 0;
      position: absolute;
      top: 30vh;
      z-index: 20000;
      margin: 35px auto;
      display: none;
    }
    .icecream-lose.animate{
      display: block;
      animation: imageAnimation2 4s;
    }
    @keyframes imageAnimation2{
      0% {
        transform: scale(0.3);
      }
      50% {
        transform: scale(1.3);
      }
    }
    .icecream{
      width: 180px;
      position: absolute;
      display: block;
      margin: 14px auto;
      bottom: 50px;
      left: 26%;
      opacity: 0;
      /* height: 1332px; */
    }
    .decibelmeter{
      height: 1px;
      width: 180px;
      position: absolute;
      bottom: 0;
      background: url(ice-meter-full.png) local no-repeat;
      background-size: 180px;
      z-index: 0;
      background-position: center;
      background-position-y: bottom;
      /* transition: 1s ease height; */
      /* border-top: solid 2px #444; */
      /* background-position-x: 63px;
      background-position-y: 224px; */
      bottom: 62px;
      left: 26%;
      /* background-color: #24110B; */
      /* z-index: -1; */
    }
    .start{
      font-size: 20px;
      background-image: url(start.png);
      background-color: transparent;
      width: 300px;
      height: 108px;
      background-size: 300px;
      border: none;
      display: block;
      text-align: center;
      margin: 0 auto;
    }
    .popup-name{
      width: 100%;
      position: absolute;
      z-index: 100000;
      top: 45%;
      /* padding: 30px; */
      /* background-color: #fff; */
      border-radius: 20px;
      text-align: center;
      /* box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); */
    }
    .popup-name input{
      text-align: left;
      margin-bottom: 15px;
      font-size: 50px;
      padding: 34px 23px;
      padding-left: 120px;
      border-radius: 40px;
      border: solid 11px #f4c300;
      font-weight: 500;
    }
    .nm{
      position: relative;
      background-image: url(https://img.icons8.com/?size=100&id=98957&format=png&color=9e9e9e);
      background-repeat: no-repeat;
      background-size: 10%;
      background-position: 21px 27px;
    }
    .wa{
      position: relative;
      background-image: url(https://img.icons8.com/?size=100&id=62855&format=png&color=9e9e9e);
      background-repeat: no-repeat;
      background-size: 10%;
      background-position: 21px 27px;
    }
    .splash{
      /* position: absolute;
      width: 100vw;
      height: 100vh; */
      display: block;
      z-index: 10000;
      top: 0;
      left: 0;
      text-align: center;
    }
    .splash-top{
      width: 100%;
      height: auto;
      position: absolute;
      display: block;
      top: -1%;
      left: 0;
      z-index: 20000;
      transition: top 1000ms linear;
      transition-timing-function: ease-out;
    }
    .splash-bottom{
      width: 100%;
      height: auto;
      position: absolute;
      display: block;
      bottom: -3%;
      left: 0;
      z-index: 20000;
      transition: bottom 1000ms linear;
      transition-timing-function: ease-out;
    }
    .splash-logo{
      width: 85%;
      height: auto;
      z-index: 200000;
      position: relative;
      top: 25vh;
      margin: 0 auto;
      display: block;
    }
    .open.splash-bottom{
      bottom: -130%;
      transition-timing-function: ease-out;
      transition: bottom 1000ms linear;
    }
    .open.splash-top{
      top: -100%;
      transition-timing-function: ease-out;
      transition: top 1000ms linear;
    }
    @media only screen and (min-width: 385px) {
      .splash-top{
        width: 122%;
      }
      .splash-bottom{
        width: 122%;
      }
      .decibelmeter{
        /* background-position-y: 93%; */
      }
    }
    .counting{
      position: relative;
      text-align: center;
    }
    .counting img{
      height: auto;
      position: relative;
      margin: 0 auto;
      display: block;
      z-index: 2000;
    }
    .top-logo{
      width: 28%;
    }
    .campaign-logo{
      width: 65%;
    }
    .counting h2{
      background: #fff;
      padding: 4px 30px;
      z-index: 100000;
      position: relative;
      top: 11%;
      border-radius: 20px;
      border: solid 4px #f4c300;
      color: #180050;
      font-weight: 900;
      font-size: 35px;
      display: none;
    }
    .scream{
      color: #fff;
      font-size: 42px;
      text-align: center;
      top: -30%;
      position: relative;
      line-height: 36px;
    }
    .active.scream{
      top: 0;
      transition-timing-function: ease-out;
      transition: top 1000ms linear;
    }
    .scream span{
      font-size: 24px;
    }
    .unique-number{
      margin-top: 0;
      color: #fff;
      z-index: -1;
      background: #ffc131;
      padding: 14px;
      font-size: 32px;
      display: inline;
      position: relative;
      top: -10%;
      border-radius: 20px;
      border: solid 4px #e6002d;
      color: #fff;
      font-weight: 900;
      text-align: center;
      transition-timing-function: ease-out;
      transition: top 2000ms linear;
    }
    .unique-number span{
      font-size: 22px;
      font-weight: 600;
    }
    #reload{
      position: absolute;
      font-size: 20px;
      background-image: url(reload.png);
      background-color: transparent;
      width: 1040px;
      height: 371px;
      border: none;
      display: block;
      text-align: center;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: -100%;
    }
    .active#reload{
      top: 45%;
      z-index: 20000;
      transition-timing-function: ease-out;
      transition: bottom 1000ms linear;
    }
    #countdown{
      font-weight: 900;
    }
    /* @media only screen and (min-width: 1080px) {
      body{
        max-width: 1080px;
        max-height: 1920px;
        top: unset;
      }
      .container{
        max-height: 1920px;
      }
    } */
    @media only screen and (max-width: 450px) {
      body{
        top: 0%;
      }
    }

    @media only screen and (max-height: 1919px) {
      .lock-screen{
        background-color: #555;
        color: #fff;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1000000;
        padding: 65% 0;
        text-align: center;
      }
    }

    @media only screen and (max-height: 916px) {
      .splash-bottom{
        bottom: -18%;
      }
    }

    @media only screen and (max-height: 896px) {
      .splash-bottom{
        bottom: -16%;
      }
      /* .splash-logo{
        top: 30vh;
      } */
    }

    @media only screen and (max-height: 740px) {
      .splash-bottom{
        bottom: -3%;
      }
    }
    
    @media only screen and (max-height: 732px) {
      .splash-bottom{
        bottom: -22%;
      }
    }
    @media only screen and (max-height: 668px) {
      .splash-bottom{
        bottom: -12%;
      }
    }