*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}
:root {
      --index: calc(1vw + 1vh);
      --text: #e7e7e0;
}
@font-face {
      font-family: relawey_f;
      src: url(./fonts/raleway-regular.woff2);
}
@font-face {
      font-family: relawey_f;
      src: url(./fonts/raleway-black.woff2);
      font-weight: 900;
}
body{
      background-color: black;
      color: white;
      font-family: relawey_f, sans-serif;
      line-height: 1.55;
}
.preview__text{
      transition: transform .75s cubic-bezier(.075, .5, 0, 1);
      z-index: 1;
      transform: translate3d(0, calc(var(--scrollTop)/2), 0);
      text-transform: uppercase;
      will-change: transform;
      font-weight: 900;
      color: var(--text);
      text-shadow: 0 0 15px #9e7d35; 
}
.preview__title{
      font-size: calc(var(--index)*2);
      letter-spacing: calc(var(--index)/1.5);
}
.preview__subtitle{
      font-size: calc(var(--index)/1.5);
      letter-spacing: calc(var(--index)/2);
      margin-top: calc(var(--index)*-2);
}
.main{
      position: relative;
}
.main::before{
      content: "";
      position: absolute;
      z-index: 10;
      height: calc(var(--index) * 10);
      width: 100%;
      background: url(./img/ground.png) no-repeat center, linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.59) 50.39%, rgba(0, 0, 0, 0) 100%);
      bottom: calc(var(--index) * -4.5);
      background-size: cover;
}
.preview__preview{
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      position: relative;
}
.preview__leyer{
      height: 100%;
      width: 100%;
      position: absolute;
      background-size: cover;
      background-position: center;
      will-change: transform;
      transition: transform .9s cubic-bezier(.075, .5, 0, 1);
}

.leyer__font {
      transform: translate3d(0, calc(var(--scrollTop)/5.7), 0);
      z-index: 2;
      will-change: transform;
}
.leyer__base {
      transform: translate3d(0, calc(var(--scrollTop)/1.6), 0);
      will-change: transform;
}
.leyer__middle {
      transform: translate3d(0, calc(var(--scrollTop)/2.5), 0);
      z-index: 2;
      will-change: transform;
}

.main-article{
      width: 100%;
      min-height: 100vh;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      color: var(--text);
      
}
.main-article__content{
      min-height: 96vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: transform .75s cubic-bezier(.075, .5, 0, 1);
}
.main-article__title{
      display: flex;
      padding-top: calc(var(--index)*12);
      flex: 1 1 auto;
      text-transform: uppercase;
      font-size: calc(var(--index)*1.4);
      letter-spacing: calc(var(--index)/10);
      transform: translate3d(0, calc(var(--scrollTop)/-7.5), 0);
      will-change: transform;
      align-items: flex-end;
      margin-bottom: calc(var(--index)*.9);
}
.main-article__text{
      max-width: calc(var(--index)*23);
      font-size: calc(var(--index)*.7);
      flex: 0 1 auto;
      transform: translate3d(0, calc(var(--scrollTop)/-7.5), 0);
      will-change: transform;
      margin-bottom: calc(var(--index)*1.5);
}
.main-article__copy{
      display: flex;
      opacity: .2;
      font-size: calc(var(--index)*.65);
      letter-spacing: calc(var(--index)/10);
      flex: 1 1 auto;
      align-items: flex-end;
}

.content{
      will-change: transform;  
}

.main-article__form{
      top: 78%;
      background-color: rgba(7, 7, 7, 0.527);
      padding: calc(var(--index)*2);
      border-radius: calc(var(--index)/3);
      transform: translate3d(0, calc(var(--scrollTop)/-7.5), 0);
      will-change: transform;
      backdrop-filter: blur(3px);
      flex: 0 1 auto;
}
.main-article__form input{
      display: flex;
      margin-bottom: calc(var(--index)*2);
      width: calc(var(--index)*18);
      height: calc(var(--index)*1.5);
      background-color: rgba(0, 0, 0, 0.301);
      border: none;
      color: azure;
      text-align: center;
      font-size: calc(var(--index)*0.4);
      letter-spacing: calc(var(--index)*0.15);
}
.main-article__form button{
      width: calc(var(--index)*14);
      height: calc(var(--index)*1.5);
      text-transform: uppercase;
      font-weight: 600;
      font-size: calc(var(--index)*.5);
      letter-spacing: calc(var(--index)/2);
      color: rgba(0, 0, 0, 0.5);
      opacity: 0.7;
      border-radius: calc(var(--index)/4);
      border: none;
      text-align: center;
      transition: transform 1.5s, color 1.5s, opacity 1.5s;
}
.main-article__form button:hover, .main-article__form button:focus, .main-article__form button:active{
      opacity: 1;
      color: rgba(0, 0, 0, 0.795);
      transform: scale(1.03);
      transition: 1.5s;
}


/* запрет выделения текста на сайте */


*{
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

._error{
      background-color: red;
}
#form[data-tooltip]::before{
      content: attr(data-tooltip);
      width: calc(var(--index)*18);
      height: calc(var(--index)*1.5);
      position: absolute;
      top: 14%;
      left: 50%;
      transform: translate(-50%,-50%);
      border: none;
      color: red;
      text-align: center;
      font-size: calc(var(--index)*0.5);
      letter-spacing: calc(var(--index)*0.15);
}
.main-article__form input.noValid{
      color: red;
      border: 0.1px solid red;
}
.main-article__form input.noValid::-webkit-input-placeholder{
      color: red;
}
.main-article__form input.noValid::-moz-placeholder{
      color: red;
}
.thank-block{
      transition: .4s;
      position: fixed ;
      top: calc(var(--scrollTop) * 1.0 + 20% );
      left: 50%;
      background-color: rgba(7, 7, 7, 0.527);
      padding: calc(var(--index)*5);
      border-radius: calc(var(--index)/3);
      transform: translate(-50%,-50%);
      will-change: transform;
      backdrop-filter: blur(3px);
      flex: 0 1 auto;
      z-index: 100;
}
.thank-block .thank-block__title{
      font-size: calc(var(--index)*0.7);
      letter-spacing: calc(var(--index)*0.18);
}