@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..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;
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  background: linear-gradient(180deg, #101010 50%, #0e1010 50%);
  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: 39.291667em;
  height: 15.625em;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-106%, -179%);
  z-index: 10;
}

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

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

.btn {
  font-size: 3.7em;
  width: 7em;
  height: 1.7em;
  color: #262626;
  background: linear-gradient(180deg, rgb(255, 216, 0) 0%, rgb(174, 78, 0) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transform: translate(-50%, -50%) skewX(-13deg);
  top: 50%;
  left: 50%;
  border-radius: 0.04em;
  z-index: 10;
  box-sizing: content-box;
  box-shadow: 0em 0.0314em 0.0543em 0.0171em rgba(0, 0, 0, 0.36);
}

.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: translate(-100%, -50%) skew(13deg);
  animation: glare 5s infinite;
  z-index: 11;
}

.btn::after {
  content: "";
  width: calc(100% - 0.2em);
  height: calc(100% - 0.2em);
  background: linear-gradient(0deg, rgb(255, 114, 0) 0%, rgb(255, 188, 0) 100%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-txt {
  transform: skewX(13deg);
  z-index: 11;
}

a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
}

.main-wrapper {
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -47%);
  position: absolute;
  z-index: 3;
}

.txt-1-wrapper {
  width: 46.291667em;
  height: 13.8125em;
  line-height: 1;
  letter-spacing: 0.25em;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-97.5%, -16%);
  animation: s1 0.5s 1s 1 backwards;
  z-index: 5;
}

.txt-1 {
  font-size: 4.2em;
  line-height: 1.2;
  width: 100%;
  position: relative !important;
}

.txt-1 span {
  font-weight: 900;
  color: #ffbc00;
}

.back {
  width: 138.28125em;
  height: 65.7291666667em;
  top: 50%;
  left: 50%;
  transform: translate(-57.5%, -51%);
  background: url(../img/back.jpg) no-repeat center center/contain;
}

.back::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #101010 0%, rgba(16, 16, 16, 0.5942752101) 24%, rgba(16, 16, 16, 0) 45%);
}

.back::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(16, 16, 16, 0.8015581232) 0%, rgba(16, 16, 16, 0.5942752101) 24%, rgba(16, 16, 16, 0) 67%);
  background: linear-gradient(90deg, rgba(16, 16, 16, 0.8015581232) 44%, rgba(16, 16, 16, 0.5942752101) 58%, rgba(16, 16, 16, 0) 76%);
}

.cards {
  width: 51.0416666667em;
  height: 34.8958333333em;
  top: 50%;
  left: 50%;
  transform: translate(-2.5%, -53.5%);
  z-index: 1;
  background: url(../img/cards.png) no-repeat center center/contain;
  animation: s1 0.5s 1.5s 1 backwards;
}

.title {
  width: 28.1770833333em;
  height: 11.9270833333em;
  top: 50%;
  left: 50%;
  transform: translate(-128%, -122%);
  z-index: 1;
  background: url(../img/title.png) no-repeat center center/contain;
  animation: s1 0.5s 0.5s 1 backwards;
}

.banner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(9%, 31%);
  width: 69.4270833333em;
  height: 37.1875em;
  z-index: 1;
  background: url(../img/pattern.png) no-repeat center center/contain;
}

.banner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-135%, -114%);
  width: 62.8125em;
  height: 45.78125em;
  z-index: 1;
  background: url(../img/pattern-2.png) no-repeat center center/contain;
}

@keyframes s1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes glare {
  0%, 0.001%, 40% {
    transform: translate(-100%, -50%) skew(13deg);
  }
  70%, 100% {
    transform: translate(100%, -50%) skew(13deg);
  }
}
@media screen and (max-aspect-ratio: 1366/1024) and (min-aspect-ratio: 1000/999) {
  .main-wrapper {
    transform: translate(-50%, -50%);
  }
  .logo-wrapper {
    transform: translate(-115.5%, -202%);
  }
  .logo {
    width: 36.291667em;
  }
  .btn-wrapper {
    transform: translate(-129.5%, 67%);
  }
  .txt-1-wrapper {
    transform: translate(-105.5%, -38%);
  }
  .txt-1 {
    font-size: 4.3em;
  }
  .cards {
    width: 52.3529411765em;
    height: 35.7843137255em;
    transform: translate(-9%, -61.5%);
  }
  .title {
    width: 28.9215686275em;
    height: 12.2549019608em;
    transform: translate(-139%, -146%);
  }
  .banner::before {
    transform: translate(9%, 23%);
    width: 71.1764705882em;
    height: 38.137254902em;
  }
  .banner::after {
    transform: translate(-130%, -130%);
    width: 64.3137254902em;
    height: 46.9607843137em;
  }
  .back {
    width: 226.4705882353em;
    height: 94.2156862745em;
    transform: translate(-45%, -44.5%);
    background: url(../img/back-1366.jpg) no-repeat center center/contain;
  }
  .back::after {
    background: linear-gradient(90deg, rgba(16, 16, 16, 0.8015581232) 20%, rgba(16, 16, 16, 0.5942752101) 36%, rgba(16, 16, 16, 0) 60%);
  }
}
@media screen and (min-aspect-ratio: 740/360) {
  .main-wrapper {
    transform: translate(-50%, -45%);
  }
}
@media screen and (orientation: portrait) {
  .main-wrapper {
    transform: translate(-50%, -43%);
  }
  .logo-wrapper {
    width: 54.291667em;
    transform: translate(-50%, -406%);
  }
  .logo {
    width: 42.291667em;
  }
  .btn-wrapper {
    transform: translate(-50%, -209%);
  }
  .btn {
    font-size: 3.95em;
  }
  .txt-1 {
    font-size: 4.5em;
  }
  .txt-1-wrapper {
    width: 59.291667em;
    transform: translate(-50%, -252%);
  }
  .cards {
    width: 47.5490196078em;
    height: 32.4509803922em;
    transform: translate(-49.5%, -3.5%);
  }
  .title {
    width: 30.0980392157em;
    height: 12.7450980392em;
    transform: translate(-50%, -384%);
  }
  .banner::before {
    transform: translate(-12%, 24%);
    width: 110.0980392157em;
    height: 59.0196078431em;
  }
  .banner::after {
    transform: translate(-107%, -144%);
    width: 99.6078431373em;
    height: 72.5490196078em;
  }
  .back {
    width: 255.0980392157em;
    height: 144.1176470588em;
    transform: translate(-48.5%, -43.5%);
    background: url(../img/back-1024.jpg) no-repeat center center/contain;
  }
  .back::before {
    background: linear-gradient(180deg, #101010 0%, rgba(16, 16, 16, 0.5942752101) 8%, rgba(16, 16, 16, 0) 14%);
  }
  .back::after {
    background: linear-gradient(90deg, rgba(16, 16, 16, 0.8015581232) 39%, rgba(16, 16, 16, 0.5942752101) 47%, rgba(16, 16, 16, 0) 100%);
  }
  .banner {
    background: linear-gradient(180deg, #101010 50%, #0c0e0e 50%);
  }
}
@media screen and (max-aspect-ratio: 320/481) {
  .main-wrapper {
    transform: translate(-50%, -50%);
  }
  .logo-wrapper {
    width: 67.291667em;
    transform: translate(-50%, -318%);
  }
  .logo {
    width: 64.291667em;
  }
  .btn-wrapper {
    width: 53.291667em;
    height: 14.625em;
    transform: translate(-50.5%, 66%);
  }
  .btn {
    font-size: 6em;
  }
  .txt-1-wrapper {
    width: 84.291667em;
    height: 21.8125em;
    transform: translate(-50.5%, -48%);
  }
  .txt-1 {
    font-size: 7.2em;
  }
  .cards {
    width: 72.5em;
    height: 49.375em;
    transform: translate(-50%, 55.5%);
  }
  .title {
    width: 45.9375em;
    height: 19.0625em;
    transform: translate(-50%, -168%);
  }
  .banner::before {
    transform: translate(-14%, 55%);
    width: 167.8125em;
    height: 90em;
  }
  .banner::after {
    transform: translate(-110%, -92%);
    width: 151.5625em;
    height: 110.3125em;
  }
  .back {
    width: 429.0625em;
    height: 234.0625em;
    transform: translate(-45%, -52.5%);
    background: url(../img/back-414.jpg) no-repeat center center/contain;
  }
}
@media screen and (max-aspect-ratio: 520/1024) {
  .main-wrapper {
    transform: translate(-50%, -50%);
  }
  .logo-wrapper {
    width: 74.291667em;
    transform: translate(-50%, -340%);
  }
  .logo {
    width: 71.291667em;
  }
  .btn-wrapper {
    transform: translate(-50%, 118%);
  }
  .btn {
    font-size: 6.7em;
  }
  .txt-1-wrapper {
    transform: translate(-50%, -35%);
  }
  .txt-1 {
    font-size: 7.9em;
    line-height: 1.1;
  }
  .cards {
    width: 80.9756097561em;
    height: 55.3658536585em;
    transform: translate(-50%, 64.5%);
  }
  .title {
    width: 51.2195121951em;
    height: 21.4634146341em;
    transform: translate(-50%, -154%);
  }
  .banner::before {
    transform: translate(-11%, 51%);
    width: 187.5609756098em;
    height: 100.487804878em;
  }
  .banner::after {
    transform: translate(-108%, -91%);
    width: 169.756097561em;
    height: 123.6585365854em;
  }
  .back {
    width: 515.3658536585em;
    height: 286.8292682927em;
    transform: translate(-45%, -52.5%);
    background: url(../img/back-414.jpg) no-repeat center center/contain;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 
  .txt-1-wrapper {
    letter-spacing: 0.05em;
  }
}/*# sourceMappingURL=style.css.map */