@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.banner {
  margin: 0 auto;
  min-width: 280px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 1vw;
  background: #010308;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.banner div {
  position: absolute;
}
.banner img {
  position: absolute;
}

.logo-wrapper {
  width: 32.2916666667em;
  height: 15.625em;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-126%, -138%);
  z-index: 11;
}

.logo {
  position: relative !important;
  width: 22.791667em;
}

.btn-wrapper {
  width: 32.2916666667em;
  height: 12.625em;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-127.5%, 58%);
  z-index: 10;
}

.btn {
  position: absolute;
  font-size: 1.6em;
  width: 14.1em;
  height: 2.8em;
  color: #00102c;
  font-weight: 600;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  box-sizing: content-box;
  background: none !important;
  box-shadow: inset 0 0 0 0.13em #93e20b;
  padding: 0.4em;
}
.btn::before {
  content: "";
  width: 100%;
  height: 300%;
  position: absolute;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 35%,
    rgb(255, 255, 255) 45%,
    rgb(255, 255, 255) 55%,
    rgba(255, 255, 255, 0) 65%
  );
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation: glare 3s infinite;
}
.btn::after {
  content: "";
  width: calc(100% - 0.82em);
  height: calc(100% - 0.82em);
  position: absolute;
  border-radius: 2em;
  box-shadow: inset 0 0.1em 0 0 #bdff82;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #93e20b;
  z-index: -1;
}

.wrapper {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.txt-1-wrapper {
  width: 43.291667em;
  height: 15.8125em;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-106.5%, -55%);
  animation: s1 0.5s 0.5s 1 backwards;
  z-index: 5;
}

.txt-1 {
  font-size: 4em;
  line-height: 1.05;
  letter-spacing: 0.02em;
  width: 100%;
  position: relative !important;
}

.txt-1 span {
  font-size: 1.1em;
  color: #f7c946;
}

.back {
  width: 117.7083333333em;
  height: 66.1979166667em;
  top: 50%;
  left: 50%;
  transform: translate(-51.5%, -50.5%);
  background: url(../img/back.jpg) no-repeat center center/contain;
}

.coin-1 {
  width: 8.5416666667em;
  height: 8.0729166667em;
  top: 50%;
  left: 50%;
  transform: translate(-633.5%, 154.5%);
  background: url(../img/coin-1.png) no-repeat center center/contain;
}

.coin-2 {
  width: 15.8854166667em;
  height: 12.4479166667em;
  top: 50%;
  left: 50%;
  transform: translate(239.5%, -272.5%);
  background: url(../img/coin-2.png) no-repeat center center/contain;
}

.egg-green {
  width: 12.8645833333em;
  height: 14.0104166667em;
  top: 50%;
  left: 50%;
  transform: translate(-421.5%, -208.5%);
  background: url(../img/egg-green.png) no-repeat center center/contain;
}

.chip-1 {
  width: 4.9479166667em;
  height: 5em;
  top: 50%;
  left: 50%;
  transform: translate(824.5%, -222.5%);
  background: url(../img/chip-1.png) no-repeat center center/contain;
}

.egg-yellow {
  width: 15.5729166667em;
  height: 15.78125em;
  top: 50%;
  left: 50%;
  transform: translate(193.5%, 113.5%);
  background: url(../img/egg-yellow.png) no-repeat center center/contain;
}

.chip-2 {
  width: 6.9791666667em;
  height: 7.03125em;
  top: 50%;
  left: 50%;
  transform: translate(-6.5%, -446.5%);
  background: url(../img/chip-2.png) no-repeat center center/contain;
}

.chip-3 {
  width: 13.28125em;
  height: 13.2291666667em;
  top: 50%;
  left: 50%;
  transform: translate(-373.5%, 161.5%);
  background: url(../img/chip-3.png) no-repeat center center/contain;
}

.coin-3 {
  width: 10.5208333333em;
  height: 10.9895833333em;
  top: 50%;
  left: 50%;
  transform: translate(-122.5%, 109.5%);
  background: url(../img/coin-3.png) no-repeat center center/contain;
}

.coin-4 {
  width: 12.03125em;
  height: 10.625em;
  top: 50%;
  left: 50%;
  transform: translate(-281.5%, -314.5%);
  background: url(../img/coin-4.png) no-repeat center center/contain;
}

.light {
  width: 79.21875em;
  height: 53.6979166667em;
  top: 50%;
  left: 50%;
  transform: translate(-21.5%, -39.5%);
  background: url(../img/light.png) no-repeat center center/contain;
  animation: s1 0.5s 0.5s 1 backwards;
}

.promo {
  width: 43.125em;
  height: 33.1770833333em;
  top: 50%;
  left: 50%;
  transform: translate(0.5%, -49%);
  background: url(../img/promo.png) no-repeat center center/contain;
  animation: s1 0.5s 0.5s 1 backwards;
}

.coin-1-wrapper {
  animation: coin-1 0.5s 1s 1 backwards;
}

.coin-2-wrapper {
  animation: coin-2 0.5s 1s 1 backwards;
}

.egg-green-wrapper {
  animation: egg-green 0.5s 1s 1 backwards;
}

.chip-1-wrapper {
  animation: chip-1 0.5s 1s 1 backwards;
}

.egg-yellow-wrapper {
  animation: egg-yellow 0.5s 1s 1 backwards;
}

.chip-2-wrapper {
  animation: chip-2 0.5s 1s 1 backwards;
}

.chip-3-wrapper {
  animation: chip-3 0.5s 1s 1 backwards;
}

.coin-5-wrapper {
  animation: coin-5 0.5s 1s 1 backwards;
}

.coin-3-wrapper {
  animation: coin-3 0.5s 1s 1 backwards;
}

.coin-4-wrapper {
  animation: coin-4 0.5s 1s 1 backwards;
}

@keyframes s1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes coin-1 {
  0% {
    transform: translate(-15em, 0em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes coin-2 {
  0% {
    transform: translate(14em, -10em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes egg-green {
  0% {
    transform: translate(-15em, -14em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes chip-1 {
  0% {
    transform: translate(20em, 0em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes egg-yellow {
  0% {
    transform: translate(12em, 15em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes egg-yellow-414 {
  0% {
    transform: translate(32em, 35em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes chip-2 {
  0% {
    transform: translate(9em, -17em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes chip-2-414 {
  0% {
    opacity: 0;
    transform: translate(9em, -33em);
  }
  100% {
    opacity: 1;
    transform: translate(0em, 0em);
  }
}
@keyframes chip-3 {
  0% {
    transform: translate(-20em, 22em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes coin-5 {
  0% {
    transform: translate(25em, 0em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes coin-3 {
  0% {
    transform: translate(8em, 20em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes coin-3-1024 {
  0% {
    transform: translate(-21em, 0em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes coin-4 {
  0% {
    transform: translate(-12em, -15em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes coin-4-414 {
  0% {
    transform: translate(-28em, -34em);
  }
  100% {
    transform: translate(0em, 0em);
  }
}
@keyframes glare {
  from,
  0.0001%,
  50% {
    transform: translate(-100%, -50%);
  }
  100% {
    transform: translate(100%, -50%);
  }
}
@media screen and (min-width: 1920px) and (max-height: 945px) {
  .banner {
    font-size: 0.85vw;
  }
}
@media screen and (max-width: 1024px) and (min-height: 600px) {
  .banner {
    font-size: 1vw;
  }
  .logo-wrapper {
    font-size: 1.15em;
    transform: translate(-110%, -136%);
  }
  .txt-1-wrapper {
    font-size: 1.13em;
    transform: translate(-95.5%, -54%);
  }
  .btn-wrapper {
    font-size: 1.15em;
    transform: translate(-112%, 58%);
  }
  .back {
    width: 157.6470588235em;
    height: 88.6274509804em;
    transform: translate(-51.5%, -50.5%);
  }
  .light {
    width: 98.9215686275em;
    height: 66.9607843137em;
    transform: translate(-23.5%, -40.5%);
  }
  .promo {
    width: 50.2941176471em;
    height: 38.7254901961em;
    transform: translate(6%, -48%);
  }
  .coin-1 {
    width: 10.0980392157em;
    height: 9.2156862745em;
    transform: translate(-527.5%, 150.5%);
  }
  .coin-2 {
    width: 18.9215686275em;
    height: 14.9019607843em;
    transform: translate(200.5%, -247.5%);
  }
  .egg-green {
    width: 14.8039215686em;
    height: 16.1764705882em;
    transform: translate(-379.5%, -162.5%);
  }
  .chip-1 {
    width: 5.8823529412em;
    height: 5.9803921569em;
    transform: translate(787.5%, -336.5%);
  }
  .egg-yellow {
    width: 18.2352941176em;
    height: 18.137254902em;
    transform: translate(172.5%, 99.5%);
  }
  .chip-2 {
    width: 8.137254902em;
    height: 8.2352941176em;
    transform: translate(-12.5%, -387.5%);
  }
  .coin-3 {
    width: 12.3529411765em;
    height: 12.8431372549em;
    transform: translate(-99.5%, 166.5%);
  }
  .coin-4 {
    width: 14.1176470588em;
    height: 12.4509803922em;
    transform: translate(-348.5%, -280.5%);
  }
}
@media screen and (max-aspect-ratio: 1366/1024) and (min-aspect-ratio: 1000/999) {
  .banner {
    font-size: 1vw;
  }
  .logo-wrapper {
    font-size: 1.15em;
    transform: translate(-110%, -136%);
  }
  .txt-1-wrapper {
    font-size: 1.13em;
    transform: translate(-95.5%, -54%);
  }
  .btn-wrapper {
    font-size: 1.15em;
    transform: translate(-112%, 58%);
  }
  .back {
    width: 157.6470588235em;
    height: 88.6274509804em;
    transform: translate(-51.5%, -50.5%);
  }
  .coin-1 {
    width: 10.0980392157em;
    height: 9.2156862745em;
    transform: translate(-527.5%, 150.5%);
  }
  .coin-2 {
    width: 18.9215686275em;
    height: 14.9019607843em;
    transform: translate(212.5%, -284.5%);
  }
  .egg-green {
    width: 14.8039215686em;
    height: 16.1764705882em;
    transform: translate(-421.5%, -208.5%);
  }
  .chip-1 {
    width: 5.8823529412em;
    height: 5.9803921569em;
    transform: translate(861.5%, -222.5%);
  }
  .egg-yellow {
    width: 18.2352941176em;
    height: 18.137254902em;
    transform: translate(184.5%, 139.5%);
  }
  .chip-2 {
    width: 8.137254902em;
    height: 8.2352941176em;
    transform: translate(-17.5%, -490.5%);
  }
  .chip-3 {
    width: 16.9607843137em;
    height: 16.7647058824em;
    transform: translate(-314.5%, 159.5%);
  }
  .coin-3 {
    width: 12.3529411765em;
    height: 12.8431372549em;
    transform: translate(-99.5%, 166.5%);
  }
  .coin-4 {
    width: 14.1176470588em;
    height: 12.4509803922em;
    transform: translate(-392.5%, -324.5%);
  }
  .light {
    width: 106.0784313725em;
    height: 71.862745098em;
    transform: translate(-21.5%, -39.5%);
  }
  .promo {
    width: 54.4117647059em;
    height: 41.862745098em;
    transform: translate(2.5%, -50%);
  }
}
@media screen and (max-width: 640px) and (max-height: 360px) {
  .banner {
    font-size: 1vw;
  }
  .logo-wrapper {
    font-size: 1.15em;
    transform: translate(-110%, -136%);
  }
  .txt-1-wrapper {
    font-size: 1.13em;
    transform: translate(-95.5%, -54%);
  }
  .btn-wrapper {
    font-size: 1.15em;
    transform: translate(-111.5%, 58%);
  }
  .light {
    width: 105.625em;
    height: 71.5625em;
    transform: translate(-21.5%, -38.5%);
  }
  .promo {
    width: 49.84375em;
    height: 38.4375em;
    transform: translate(7.5%, -48%);
  }
  .back {
    width: 157.03125em;
    height: 88.28125em;
    transform: translate(-51.5%, -50.5%);
  }
  .coin-1 {
    width: 10em;
    height: 9.375em;
    transform: translate(-533.5%, 145.5%);
  }
  .coin-2 {
    width: 19.375em;
    height: 15.46875em;
    transform: translate(193.5%, -223.5%);
  }
  .egg-green {
    width: 14.6875em;
    height: 16.09375em;
    transform: translate(-388.5%, -159.5%);
  }
  .chip-1 {
    display: none;
  }
  .egg-yellow {
    width: 17.65625em;
    height: 17.8125em;
    transform: translate(189.5%, 102.5%);
  }
  .chip-2 {
    width: 8.28125em;
    height: 8.4375em;
    transform: translate(-24.5%, -384.5%);
  }
  .chip-3 {
    width: 18.59375em;
    height: 31.09375em;
    transform: translate(-274.5%, 38.5%);
  }
  .coin-3 {
    width: 12.34375em;
    height: 12.8125em;
    transform: translate(-99.5%, 166.5%);
  }
  .coin-4 {
    width: 13.90625em;
    height: 12.1875em;
    transform: translate(-354.5%, -270.5%);
  }
}
@media screen and (orientation: portrait) {
  .logo-wrapper {
    font-size: 1.77em;
    transform: translate(-48.5%, -211%);
  }
  .txt-1-wrapper {
    font-size: 1.75em;
    transform: translate(-51.5%, -124%);
  }
  .btn-wrapper {
    font-size: 1.77em;
    transform: translate(-50.5%, -46%);
  }
  .light {
    width: 103.431372549em;
    height: 70.0980392157em;
    transform: translate(-48.5%, -5.5%);
  }
  .promo {
    width: 66.3725490196em;
    height: 51.1764705882em;
    transform: translate(-47.5%, 19%);
  }
  .back {
    width: 264.156863em;
    height: 151.921569em;
    transform: translate(-55%, -48%);
  }
  .back::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgb(1, 8, 20) 9%,
      rgba(1, 8, 20, 0.55) 33%,
      rgba(1, 8, 20, 0) 48%
    );
  }
  .coin-1 {
    width: 10.8823529412em;
    height: 10.1960784314em;
    transform: translate(-489.5%, 134.5%);
  }
  .coin-2 {
    width: 18.9215686275em;
    height: 15.0980392157em;
    transform: translate(205.5%, -439.5%);
  }
  .egg-green {
    width: 16.7647058824em;
    height: 18.431372549em;
    transform: translate(-333.5%, -308.5%);
  }
  .chip-1 {
    width: 8.5294117647em;
    height: 8.5294117647em;
    transform: translate(514.5%, -156.5%);
  }
  .egg-yellow {
    width: 22.9411764706em;
    height: 22.9411764706em;
    transform: translate(132.5%, 231.5%);
  }
  .chip-2 {
    width: 10.3921568627em;
    height: 10.4901960784em;
    transform: translate(-27.5%, -669.5%);
  }
  .chip-3 {
    width: 19.5098039216em;
    height: 19.3137254902em;
    transform: translate(-287.5%, 285.5%);
  }
  .coin-5 {
    top: 50%;
    left: 50%;
    width: 18.137254902em;
    height: 13.2352941176em;
    transform: translate(149.5%, 131.5%);
    background: url(../img/coin-5.png) no-repeat center center/contain;
  }
  .coin-3 {
    width: 12.470588em;
    height: 13.7254901961em;
    transform: translate(-374.5%, 273.5%) rotate(-44deg);
  }
  .coin-4 {
    width: 14.0196078431em;
    height: 12.3529411765em;
    transform: translate(-354.5%, -573.5%);
  }
  .coin-3-wrapper {
    animation-name: coin-3-1024;
  }
}
@media screen and (max-aspect-ratio: 320/481) {
  .logo-wrapper {
    font-size: 1.8em;
    transform: translate(-48.5%, -284%);
  }
  .txt-1-wrapper {
    font-size: 2.1em;
    transform: translate(-51.5%, -170%);
  }
  .btn-wrapper {
    font-size: 2.15em;
    transform: translate(-50.5%, -104%);
  }
  .light {
    width: 102.5em;
    height: 69.375em;
    transform: translate(-48.5%, -5.5%);
  }
  .promo {
    width: 95.9375em;
    height: 74.0625em;
    transform: translate(-46.5%, -1%);
  }
  .back {
    width: 418.4375em;
    height: 244.5625em;
    transform: translate(-53.5%, -48%);
  }
  .back::before {
    background: linear-gradient(
      180deg,
      rgb(1, 8, 20) 9%,
      rgba(1, 8, 20, 0.55) 40%,
      rgba(1, 8, 20, 0) 69%
    );
  }
  .coin-1 {
    width: 23.9375em;
    height: 18.9375em;
    transform: translate(-234.5%, -38.5%) rotate(-20deg);
  }
  .coin-2 {
    width: 25.3125em;
    height: 20.3125em;
    transform: translate(127.5%, -474.5%);
  }
  .egg-green {
    width: 25.625em;
    height: 28.125em;
    transform: translate(-242.5%, -327.5%);
  }
  .chip-1 {
    width: 12.1875em;
    height: 12.5em;
    transform: translate(346.5%, -141.5%);
  }
  .egg-yellow {
    width: 29.375em;
    height: 29.375em;
    transform: translate(53.5%, 250.5%);
  }
  .chip-2 {
    width: 14.0625em;
    height: 14.375em;
    transform: translate(20.5%, -676.5%);
  }
  .chip-3 {
    width: 24.3125em;
    height: 30.9375em;
    transform: translate(-203.5%, 239.5%) rotate(0deg);
  }
  .coin-5 {
    width: 21.25em;
    height: 15.625em;
    transform: translate(181.5%, 198.5%);
  }
  .coin-3 {
    width: 22.5em;
    height: 18.75em;
    transform: translate(-271.5%, 354.5%) rotate(-44deg);
  }
  .coin-4 {
    width: 23.125em;
    height: 20.3125em;
    transform: translate(-183.5%, -472.5%);
  }
}
@media screen and (max-aspect-ratio: 520/1024) {
  .banner {
    background: linear-gradient(180deg, rgb(1, 8, 20) 51%, rgb(1, 5, 12) 51%);
  }
  .promo {
    transform: translate(-44.5%, -1%);
  }
  .coin-1 {
    width: 14.9375em;
    height: 18.9375em;
    transform: translate(-361.5%, -24.5%) rotate(0deg);
  }
  .coin-2 {
    transform: translate(125.5%, -572.5%);
  }
  .egg-green {
    transform: translate(-231.5%, -362.5%);
  }
  .egg-yellow {
    width: 38.375em;
    height: 37.375em;
    transform: translate(29.5%, 198.5%);
  }
  .chip-2 {
    transform: translate(-1.5%, -780.5%);
  }
  .chip-3 {
    transform: translate(-214.5%, 289.5%) rotate(0deg);
  }
  .coin-4 {
    width: 25.125em;
    height: 21.3125em;
    transform: translate(-206.5%, -544.5%);
  }
  .egg-yellow-wrapper {
    animation-name: egg-yellow-414;
  }
  .chip-2-wrapper {
    animation-name: chip-2-414;
  }
  .coin-4-wrapper {
    animation-name: coin-4-414;
  }
} /*# sourceMappingURL=style.css.map */