:root {
  --app-height: 100vh;
}

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

body {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 1.250vw;
  line-height: 1.2;
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v12-latin-regular.woff2') format('woff2'),
  url('../fonts/inter-v12-latin-regular.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v12-latin-700.woff2') format('woff2'),
  url('../fonts/inter-v12-latin-700.woff') format('woff');
}

a {
  text-decoration: none;
}

img {
  vertical-align: bottom;
}

.main-section {
  height: var(--app-height);
  background-image: url('../img/main-bg--desk.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.eggs-left,
.eggs-right {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 100;
  height: var(--app-height);
}

.popup-eggs {
  z-index: 200;
}

.eggs-left source,
.eggs-left img,
.eggs-right source,
.eggs-right img {
  height: var(--app-height);
}

.eggs-right {
  right: 0;
}

.eggs-left {
  left: 0;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.logo {
  position: relative;
  margin-top: 3.688vw;
}

.logo_popup {
  z-index: 200;
}

.logo__img {
  width: 8.333vw;
}

.wheel {
  position: relative;
  z-index: 150;
}

.wheel__outer {
  width: 31.865vw;
}

.wheel__inner,
.wheel__button {
  position: absolute;
}

.wheel__inner {
  width: 29.333vw;
  top: 1.344vw;
  left: 1.344vw;
  transition: transform 6s cubic-bezier(0.42, -0.27, 0, 0.96);
}

.wheel__button {
  width: 9.508vw;
  top: 7.965vw;
  left: 11.58vw;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.wheel__button:active {
  transform: scale(1.1);
}

.popup__mask {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #021727;
  opacity: 0.8;
  z-index: 170;
}

.popup__container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 220;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.popup__container-active {
  display: flex;
}

.popup__mask-active {
  display: block;
}

.popup__wrapper {
  position: relative;
  background: linear-gradient(180deg, #FFA5F6 0%, #4D4ACB 57.45%, #A5D9FF 93.26%);
  opacity: 0.95;
  border: 0.156vw solid #F7D603;
  border-radius: 1.042vw;
  margin: auto;
  padding: 2.083vw 7.031vw 1.563vw;
  text-align: center;
}

.popup__offer {
  font-size: 3.229vw;
  line-height: 1.2;
  max-width: 24.479vw;
  margin-bottom: 0.521vw;
}

.popup__offer span {
  font-size: 5.208vw;
  line-height: 1.2;
  position: relative;
}

.popup__offer span:before {
  font-size: 1.250vw;
  line-height: 1.2;
  content: 'Up to';
  position: absolute;
  top: 2.292vw;
  left: -4.479vw;
}

.popup__game {
  font-weight: 400;
  margin-bottom: 2.083vw;
}

.bonus-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #120273;
  border: 1px solid #F7D603;
  border-radius: 2.604vw;
  max-width: 18.229vw;
  margin: 0 auto 1.042vw;
}

.bonus-code__text {
  margin-left: 1.302vw;
}

.bonus-code__btn {
  padding: 1.042vw 2.604vw;
  background: #FFFFFF;
  border: 1px solid #F7D603;
  border-radius: 2.604vw;
  font-size: max(0.729vw, 11px);
  line-height: 1.1;
  font-weight: 400;
  transition: all 0.3s ease;
  cursor: pointer;
}

.popup__signup-link {
  display: block;
  background: linear-gradient(180deg, #FFDD06 0%, #DB9E00 100%);
  box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
  border-radius: 2.604vw;
  text-transform: uppercase;
  color: #120273;
  padding: 1.042vw 4.688vw;
  max-width: 18.229vw;
  margin: 0 auto 1.563vw;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.popup__spin-link {
  color: #120273;
  cursor: pointer;
}

.popup__terms {
  width: 43.750vw;
  font-weight: 400;
  font-size: max(12px, 0.833vw);
  line-height: 1.2;
  text-align: center;
  margin-bottom: 2.083vw;
}

.popup__close {
  position: absolute;
  top: 1vw;
  right: 1vw;
  width: 1.823vw;
  height: 1.823vw;
  cursor: pointer;
}

@media (max-width: 1024px) and (orientation: portrait),(max-width: 1023px) {
  .logo {
    margin-top: 2.604vw;
  }

  .logo__img {
    width: 20.833vw;
  }

  .wheel__outer {
    width: 82.031vw;
  }

  .wheel__inner {
    width: 72.396vw;
    top: 5.344vw;
    left: 5.1vw;
  }

  .wheel__button {
    width: 25.521vw;
    top: 20.365vw;
    left: 28.58vw;
  }

  .popup__wrapper {
    border: 0.391vw solid #F7D603;
    border-radius: 2.604vw;
    padding: 5.208vw 16.276vw;
  }

  .popup__offer {
    font-size: 7.813vw;
    max-width: 60.594vw;
    margin-bottom: 1.302vw;
    line-height: 1.1;
  }

  .popup__offer span {
    font-size: 13.021vw;
  }

  .popup__offer span:before {
    font-size: 3.125vw;
    top: 5.292vw;
    left: -11.479vw;
  }

  .popup__game {
    font-size: 3.125vw;
    margin-bottom: 5.208vw;
  }

  .bonus-code {
    border-radius: 6.510vw;
    max-width: 45.573vw;
    margin-bottom: 2.604vw;
  }

  .bonus-code__text {
    font-size: 3.125vw;
    margin-left: 3.302vw;
  }

  .bonus-code__btn {
    padding: 2.604vw 6.510vw;
    border-radius: 6.510vw;
    font-size: max(1.823vw, 11px);
  }

  .popup__signup-link {
    border-radius: 6.510vw;
    padding: 2.604vw 11.719vw;
    max-width: 45.573vw;
    margin: 0 auto 3.906vw;
    font-size: 3.125vw;
  }

  .popup__spin-link {
    font-size: 3.125vw;
  }

  .popup__terms {
    width: 68.099vw;
    font-size: max(12px, 2.083vw);
    margin-bottom: 2.604vw;
  }

  .popup__close {
    top: 2vw;
    right: 2vw;
    width: 4.617vw;
    height: 4.617vw;
  }
}

@media (max-width: 1023px) and (max-height: 600px) {
  .wheel__outer {
    width: 28.031vw;
  }

  .wheel__inner {
    width: 24.396vw;
    top: 2.144vw;
    left: 2vw;
  }

  .wheel__button {
    width: 8.521vw;
    top: 7.365vw;
    left: 10vw;
  }

  .popup__container {
    overflow: auto;
    padding-top: 3vw;
  }

  .popup__mask {
    overflow: auto;
  }

  .popup__wrapper {
    margin-bottom: 3vw;
  }
}

@media (max-width: 550px) {
  .logo {
    margin-top: 5.333vw;
  }

  .logo__img {
    width: 30.667vw;
  }

  .wheel {
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }

  .wheel__outer {
    width: 105.533vw;
  }

  .wheel__inner {
    width: 97.2vw;
    top: 5.344vw;
    left: 1.5vw;
  }

  .wheel__button {
    width: 30.133vw;
    top: 27.365vw;
    left: 35.58vw;
  }

  .popup__wrapper {
    border: 0.533vw solid #F7D603;
    border-radius: 2.667vw;
    padding: 10.667vw 2.667vw 5.3vw;
  }

  .popup__offer {
    font-size: 11.8vw;
    max-width: 90.667vw;
    margin-bottom: 0;
  }

  .popup__offer span {
    font-size: 18.367vw;
  }

  .popup__offer span:before {
    font-size: 4.800vw;
    top: -4.708vw;
    left: 50%;
    transform: translateX(-50%);
  }

  .popup__game {
    font-size: 4.800vw;
    margin-bottom: 8vw;
  }

  .bonus-code {
    border-radius: 13.333vw;
    max-width: 65.600vw;
    margin-bottom: 4.267vw;
  }

  .bonus-code__text {
    font-size: 4.800vw;
    margin-left: 2.302vw;
  }

  .bonus-code__btn {
    padding: 4.800vw 9.333vw;
    border-radius: 6.510vw;
    font-size: max(3.200vw, 11px);
  }

  .popup__signup-link {
    border-radius: 13.333vw;
    padding: 5.067vw 16vw;
    max-width: 65.600vw;
    margin: 0 auto 5.333vw;
    font-size: 4.800vw;
  }

  .popup__spin-link {
    font-size: 4.800vw;
  }

  .popup__terms {
    width: 75.467vw;
    font-size: max(12px, 3.200vw);
    margin-bottom: 2.667vw;
  }

  .popup__close {
    top: 3vw;
    right: 3vw;
    width: 7.333vw;
    height: 7.333vw;
  }

  .eggs-left source,
  .eggs-left img,
  .eggs-right source,
  .eggs-right img {
    height: 85%;
  }
  
  .popup__logo {
    margin-top: clamp(10px, 3.333vw, 5.333vw);
    margin-bottom: 10px;
  }
}

@media (hover: hover) {
  .wheel__button:hover {
    filter: saturate(200%);
  }

  .bonus-code__btn:hover {
    box-shadow: 0px 2px 5px 5px #97B1BF;
  }

  .popup__signup-link:hover {
    box-shadow: 0px 2px 5px 5px #c5a500;
    color: #333301;
  }

  .popup__spin-link:hover {
    text-shadow: 0px 5px 5px #97B1BF;
  }

}