@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap");
html {
  font-size: 10px; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', Arial, sans-serif; }

.page {
  background: url(../img/bg.jpg) top center no-repeat, #090619;
  min-height: 100vh;
  -webkit-background-size: cover;
  background-size: cover;
  padding: 3rem 0 0;
  box-sizing: border-box; }

.logo {
  text-align: center;
  margin-bottom: 2rem; }
  .logo .logo-link {
    display: inline-block; }
    .logo .logo-link img {
      max-width: 23.5rem;
      width: 100%;
      display: block; }

.after-logo-txt {
  font-size: 6.5rem;
  text-align: center;
  color: #ffffff;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 2.6rem; }

.btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3rem; }
  .btn-wrapper .btn {
    width: 14.6rem;
    height: 7.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.8rem;
    line-height: 1.55;
    font-weight: 500;
    text-decoration: none;
    border-radius: 3px;
    margin: 0 1.5rem;
    transition: all .3s; }
    .btn-wrapper .btn.btn-white {
      color: #333333;
      background: #ffffff; }
      .btn-wrapper .btn.btn-white:hover {
        background: #d9d9d9; }
    .btn-wrapper .btn.btn-orange {
      color: #ffffff;
      background: #f58a59; }
      .btn-wrapper .btn.btn-orange:hover {
        background: #f15711; }

.wheel-wrapper {
  max-width: 70rem;
  margin: 0 auto;
  overflow: hidden;
  position: relative; }
  .wheel-wrapper img {
    display: block;
    max-width: 100%;
    backface-visibility: hidden; }
  .wheel-wrapper .wheel {
    animation: rotating 2s infinite linear; }
  .wheel-wrapper .pers {
    position: absolute;
    bottom: 4rem; }

@keyframes rotating {
  0% {
    opacity: 1;
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1, 1);
    animation-timing-function: linear; }
  100% {
    opacity: 1;
    transform: translateX(0px) translateY(0px) rotate(360deg) scale(1, 1); } }

@media only screen and (max-width: 1680px) {
  html {
    font-size: 9px; } }

@media only screen and (max-width: 1440px) {
  html {
    font-size: 8px; } }

@media only screen and (max-width: 1366px) {
  html {
    font-size: 7px; } }

@media only screen and (max-width: 768px) and (orientation: portrait) {
  html {
    font-size: 7px; } }

@media only screen and (max-width: 414px) and (orientation: portrait) {
  html {
    font-size: 6px; }
  .page {
    padding: 10rem 15px 0; } }

@media only screen and (max-width: 360px) and (orientation: portrait) {
  .page {
    padding: 4rem 15px 0; } }

@media only screen and (max-width: 934px) and (orientation: landscape) {
  html {
    font-size: 4px; } }