@import url("./fonts/HeadingNow/include.css");

body {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #141414;
  font-weight: 500;
  font-family: "HeadingNow", sans-serif;
  color: #000000;
  cursor: default;
  overflow: hidden;
}

body * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  display: inline-block;
  text-decoration: none;
}

.main {
  position: relative;
  display: flex;
  min-height: 100vh;
  background-image: url(./img/bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.main__image {
  position: absolute;
  left: 3.4vw;
  top: 50%;
  transform: translateY(-50%);
  width: 48.64vw;
}

.main__tunnel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 108%;
  max-width: initial;
  animation: rotate 15s linear infinite;
  z-index: -1;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.main__objects {
  width: 100%;
}

.main__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 7vw auto auto;
  width: 35.68vw;
}

.main__logo {
  width: 13.49vw;
  margin-bottom: 1.25vw;
}

.main__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main__text p {
  font-size: 2.98vw;
  line-height: 200%;
  color: #ffffff;
  text-align: center;
}

.main__text p:last-child {
  margin-top: -1.51vw;
  font-size: 1.64vw;
}

.main__text span {
  color: #50f000;
}

.main__qr {
  width: 18.8vw;
  margin-top: 2.37vw;
}

.main__qr img {
  width: 100%;
}

.main__btn {
  display: none;
  justify-content: center;
  align-items: center;
  width: 86.41vw;
  height: 16.92vw;
  margin: 2vw auto 10vw;
  border-radius: 5.13vw;
  background-color: #50f000;
  font-size: 4.37vw;
  line-height: normal;
  color: #000000;
  text-align: center;
  text-transform: uppercase;
}

@media only screen and (orientation: landscape) {
  .hide-desk {
    display: none !important;
  }
}

@media only screen and (orientation: portrait) {
  body {
    overflow-y: auto;
  }

  .hide-mob {
    display: none !important;
  }

  .main {
    flex-direction: column;
    background-image: url(./img/bg-mob.jpg);
    overflow: hidden auto;
  }

  .main__image {
    position: relative;
    top: initial;
    left: initial;
    transform: translateX(calc(50vw - 50%));
    width: 100%;
    margin: 4vw 0;
  }

  .main__content {
    margin: 10vw auto 0;
    width: 80%;
    order: -1;
  }

  .main__logo {
    width: 45.38vw;
    margin-bottom: 5vw;
  }

  .main__text p {
    font-size: 9vw !important;
    line-height: 120%;
    text-transform: uppercase;
  }

  .main__text p:last-child {
    margin-top: 0;
  }

  .main__btn {
    display: flex;
  }
}