@font-face {
    font-family: 'AvenirBook';
    src: url('AvenirBook.woff2') format('woff2'),
         url('AvenirBook.woff') format('woff');
         font-weight: 400;
         font-style: normal;
         font-display: swap;     
}
@font-face {
    font-family: 'GRECOromanLubedWrestling';
    src: url('GRECOromanLubedWrestling.woff2') format('woff2'),
        url('GRECOromanLubedWrestling.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

html {
    height: 100%;
    font-size: 100.01%;
}

body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 0;
    font-family: 'AvenirBook', sans-serif;
    color: #fff;
    font-size: 20px;
    background-color: #000;
}
.main {
  width: 100%;
    background-size: cover;
  height: 100%;
  overflow: hidden;  
  position: relative;
}
.load_circle {
  width: 600px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -200px 0 0 0;
    transform: translate(-50%, -50%);
    z-index: 20;
    border: 400vmax solid #000;
    border-radius: 100%;
    background: radial-gradient(circle, transparent 0%, black 50%);
}
.load_circle::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1%;
    width: 100%;
    height: 102%;
    border: 10px solid #000;
    border-radius: 100%;
    box-sizing: border-box;
}
.stars_bg {
  width: 100%;
  background: url(imgs/back6.jpg) center bottom no-repeat;
    background-size: cover;
  height: 100%;
  position: absolute;
  z-index: 0;
}
.back_mountains {
  position: absolute;
  left: -2%;
  width: 100%;
  bottom: -3.5%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform-origin: center bottom;
  transform: scale(1.1);
}
.scalable {
  
  height: calc(2029px / 2);
}
.wrapper__inner {
  width: 100%;
  transform-origin: center top;
  transform: scale(0.5);
  height: 100%;
  position: relative;
}
.wrapper, .astro-calendar {
  --w: 1900px;
  width: var(--w);
  margin-left: calc(var(--w) / -2);
  position: relative;
  height: 2029px;
  transform-origin: center top;
  left: 50%;

}

.astro-calendar {
    background: none;
    position: absolute;
    top: 0;
    mix-blend-mode: screen;
}
.astro-calendar__wrap {
  width: 1496px;
    height: 1496px;
    position: absolute;
    left: 50%;
    bottom: 805px;
    margin: 0 0 0 -750px;
    transform-origin: center center;
    transform: translateY(200px);
}
.astro-calendar__img {
  width: 1496px;
  height: 1496px;
  background: url(imgs/ASTRO-CALENDAR-mob.png) center no-repeat;
    background-size: contain;
  animation: calendar_img_spin 180s linear infinite;  
}
.astro-calendar__img img {
  width: 100%;
  height: auto;
  vertical-align: top;
  filter: brightness(2);
}
@media (min-width: 768px)  {
  .astro-calendar__img {
    background-image: url(imgs/ASTRO-CALENDAR.png);
  }
  
  .astro-calendar__img img {
    display: block;
  }
}

@keyframes calendar_img_spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
  
.abs {
  position: absolute;
  height: auto;
  transform-origin: center;
}
.mountain_wrap, .mountain {
   left: 50%;
    width: 1390px;
    transform: translateX(-50%);
    bottom: 0;
}
.mountain {
  bottom: -1110px;
    height: auto;
}
.montain {
  bottom: 0;
  left: 221px;
  width: 1070px;
}
.mountain-detail {
  width: 235px;
  left: 732px;
    bottom: 767px;
}
.guy {
  left: 421px;
  bottom: 784px;
  width: 678px;
}
.guy_anim{ 
  position: absolute;
  width: 980px;
    margin-left: -440px;
  left: 50%;
  bottom: 775px;
  height: auto; 
  
}
.guy_and_mountain {
  transform-origin:center;
  transform: scale(0.74) ;
  width: 100%;
  height: calc(100% + 100px);
  position: absolute;
  left: 0;
  bottom: 165px;
  filter: brightness(0.3);
  transform-origin:center bottom;
  bottom: 420px;
  margin-left: -45px;
}


.hidden {
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}
.text1 {
  left: -280px;
    top: 538px;
    font-size: 36px;
    text-align: center;
    line-height: 1.4em;
    text-shadow: 0 0px 5px #021f23;
}


.form {
  position: absolute;
  right: -500px;
  top: 584px;
  display: flex;
  z-index: 8;
}

.form form {
  display: flex;
}
.form__input {
  border: 1px solid #b0a8a1;
  background: #d9d9d9;
  padding: 0 0 0 24px;
  color: #000000;
  font-size: 34px;
  font-family: 'AvenirBook', sans-serif;
  font-weight: 400;
  height: 123px;
  box-sizing: border-box;
  width: 706px;
  outline: none;
  border: none;
  box-sizing: border-box;
  -webkit-appearance: none;
    appearance: none;
    border-radius: 0 !important;
}
.form__input::placeholder {
  opacity: 1;
  color: #000000;
}
.form__input:focus::placeholder {
  opacity: 0;
}
.form__sub {
  background: #a9a9a9;
  border: 1px solid #8c857e;
  cursor: pointer;
  width: 70px;
  height: 123px;
  box-sizing: border-box;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  border-radius: 0;
}
.form__sub:hover {
  background: #8c857e;
}
.form__sub::before {
  content:"";
  width: 0;
  height: 0;
  border-top: 16px solid transparent;   
  border-bottom: 16px solid transparent;
  border-left: 25px solid #fff;
}

@media (aspect-ratio < 2240/1531) {
  .form {
    right: -300px;
  }
  .text1 {
    left: -100px;
  }
  .form__input {
    width:635px;
  }
}
@media (aspect-ratio < 1900/1531) {
  .form {
    right: 20px;
  }
  .text1 {
    left: 100px;
  }
  .form__input {
    width:600px;
  }
}

.gate-logo {
  position: absolute;
  right: 3.56%;
  width: 8%;
  top: 4.5%;
  height: auto;
  z-index: 11;
  width: 13vmin;
    top: 4.5vmin;
    right: 6.1vmin;
}

.answer_block {
  z-index: 10;
    width: 111.0%;
    left: 50%;
    top: 167px;
    transform: translateX(-50%);
    display: none;
}

.answer_block__scroll {
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  position: relative;
  transform: scale(1.25); 
  top: 40px;
}


.answer_block__answer {

  position: absolute;
    left: 15%;
    top: 340px;
    height: 840px;
    width: 71%;
    padding: 20px;
    box-sizing: border-box;
    color: #000000;
    font-size: 52px;
    line-height: 1.47em;
    text-align: center;
    font-family: 'GRECOromanLubedWrestling', sans-serif;
    display: flex;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #011a1e transparent;
    align-items: center;

}



/* --- WebKit (Chrome, Safari, new Edge) --- */
.answer_block__answer::-webkit-scrollbar {
  width: 5px;
  height: 5px; 
}

.answer_block__answer::-webkit-scrollbar-track {
  background: transparent; 
}

.answer_block__answer::-webkit-scrollbar-thumb {
  background-color: #011a1e; 
  border-radius: 10px;     
  border: 0;              
}

.answer_block__answer::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.05);
}


.answer_block__buttons {
  position: absolute;
  bottom: -90px;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 86px;

}

.answer_block__button {
  font-size: 32px;
    color: #000000;
    background: #d9d9d9;
    border: 1px solid #b0a8a1;
    cursor: pointer;
    width: 386px;
    height: 70px;
    box-sizing: border-box;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.answer_block__button:hover {
  background: #b0a8a1;
}

.mute {
  position: absolute;
  left: 4vmin;
    bottom: 3vmin;
    width: 5.2vmin;
  outline: none;
  border: none;
  background: none;
  padding: 0;
  mix-blend-mode: lighten;
  z-index: 8;
  background:url(imgs/sound_on2x.png) -20000px no-repeat ;
  background-size: contain;
  cursor: pointer;
}

.mute img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.mute.on  {
  background-position: center;
}
.mute.on img {
  opacity: 0;
}

.druidAudio {
  display: none;
}

.text1_mob {
  display:none ;
}


@media (min-width: 768px) or (orientation: landscape) {
  .answer_block__scroll:not(:has(svg)) {
      min-height: 1400px;
      background: url(images/mob-scroll-gor.png) center no-repeat;
      background-size: 82% auto;
    }
}

@media (max-width: 767.98px) and (orientation: portrait) {
  .astro-calendar__wrap {
      bottom: 130px;
      transform: translateY(0);

  }
  .load_circle {
    margin: -850px 0 0 0;
    width: 800px;
    height: 800px;

}
  
  .text1_pc {
    display: none;
  }
  .text1_mob {
    display:block ;
  }
  .mute {
    width: 38px;
    left: 15px;
    bottom: 7px;
  }
  .gate-logo {
  
    right: 29px;
    width:88px;
      top:auto;
      bottom: 10px;
  }

  .mountain-detail {
    width: 235px;
    left: 980px;
    bottom: 1265px;
  }
  .mountain_wrap, .mountain {
    width: 1750px;
    bottom: 0;
  }
  .mountain {
    bottom: -1110px;
  }
  .guy_anim {
    width: 1250px;
        margin-left: -560px;
    bottom: 1268px;

    bottom:868px;
    padding-bottom: 400px;
   
  }
  .guy_and_mountain {
    transform: scale(0.97) translateY(-200px);
    bottom: -1200px;
  }


  .form {
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(1.8);
        top: 470px;
  }
  .form__input {
    padding-left: 40px;
    font-size: 38px;
    width: 680px;
  }

  
  .text1 {
    left: 0;
    font-size: 92px;
    top: 296px;
    width: 100%;
    line-height: 1.3em;
  }
 
  .answer_block {
    top: 600px;
    width: 106%;
  }
  .answer_block__scroll {
    transform: scale(1.0);
    top: -415px;
    background: url(images/mob-scroll.png?2) center no-repeat!important;
    background-size: 83%;
    min-width: 1800px;
    min-height: 2340px!important;
    background-size: contain!important;
  }
  
  /*
  .answer_block__scroll {
    transform: scale(1.8);
        transform-origin: center;
        top: 60px;
        background: url(images/mob-scroll.png) center no-repeat;
        background-size: contain;
        min-height: 1300px;
        width: 100%;
        left: 0;
  }
        */
  .answer_block__answer {
    left: 27%;
    top: 0px;
    height: 1450px;
    width: 46%;
    font-size: 70px;
    line-height: 1.7em;
    
  }


  .answer_block__buttons {
    flex-direction: column;
    align-items: center;
    bottom: -50px;
    gap: 100px;
  }
  .answer_block__button {
    font-size: 48px;
    width: 530px;
    height: 100px;
  }
  .back_mountains {
    left: -5%;
        width: 110%;
        bottom: 0;
        transform: scale(0.9);
        
  }
}



.stars_mask, #starsCanvas{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

  }
@media (max-width: 767.98px) and (orientation: portrait) {
  .stars_mask {
    opacity: 0.6;
  }
}

@media (max-width: 767.98px) and (orientation: portrait) {
  /*switch off mobile animations*/
/*
   .phase3  svg > g > g:first-child > g {
    display: none!important;
  }
  
  .phase3  svg > g > g:first-child > g:nth-child(2),
  .phase3  svg > g > g:first-child > g:nth-child(3),
  .phase3  svg > g > g:first-child > g:nth-child(10) {
    display: block !important;
  }
    */
   .phase3  svg > g > g:first-child > g:nth-child(5) {
    display: none!important;
  } 
  .phase3   svg > g > g:first-child > g:nth-child(6) {
    display: none!important;
  }
   .phase3  svg > g > g:first-child > g:nth-child(7) {
    display: none!important;
  }
  
 
}