* {
   margin: 0;
   padding: 0;
   line-height: 1.55;
   box-sizing: border-box;
}
body {
	background-color: #010101;
	font-family: raleway_f, sans-serif;
	line-height: 1.55;
}
:root{
   --index: calc(1vw + 1vh);
   --transition: transform .75s cubic-bezier(.075, .5, 0, 1);;
}
@font-face {
   font-family: ralewayBlack;
   src: url(fonts/raleway-black.woff2);
}
@font-face {
   font-family: ralewayRegular;
   src: url(fonts/raleway-regular.woff2);
}
.header_main{
   position: relative;
}
.header_main::after{
   content: '';
   width: 100%;
   /* background-color: #9d822b; */
   position: absolute;
   background-image: url(img/ground.png);
   height: calc(var(--index) * 10);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   z-index: 100;
   bottom: calc(var(--index) * -4.5); 
}





.layers{
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
   transition: var(--transition) ;
}
.layer{
   height: 100%;
   width: 100%;
   position: absolute;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   will-change: transform;
   z-index: 2;
}

.layer-front{
   transform: translate3d(0, calc(var(--scrollTop)/5.7), 0);
}
.layer-middle{
   transform: translate3d(0, calc(var(--scrollTop)/2.5), 0);
}
.layer-base{
   z-index: 0;
   transform: translate3d(0, calc(var(--scrollTop)/1.6), 0);
}
.header_layers{
   transform: translate3d(0, calc(var(--scrollTop)/2), 0);
   z-index: 1;
   font-weight: 900;
   margin-top: calc(var(--index) * -1.70 );
   color: #e7e7e0;
   text-shadow: 0 0 15px #9d822b;
}

.header_title, .header_desc{
   
   font-family: ralewayBlack;
   text-transform: uppercase;
   text-align: center;
}
.header_title{
   font-size: calc(var(--index) / 1.175);
   letter-spacing: calc(var(--index) / 3.5);
   
}
.header_desc{
   font-size: calc(var(--index) * 2.65);
   letter-spacing: calc(var(--index) / 2.25);
   
}






.main_article{
   height: 100vh;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
}






.cotainer {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 50%;
   margin: 0 auto;
   font-family: ralewayBlack;
   height: 100vh;
   text-align: center;
   font-weight: 900;
   color: #e7e7e0;
   flex-direction: column;
}
.copy{
   position: absolute;
   bottom: calc(var(--index) * 1.25);
   font-size: calc(var(--index) * .75);
   opacity: .45;
   font-family: ralewayRegular;
}
.title {
   text-transform: uppercase;
   font-size: calc(var(--index) * 1.2);
   margin-top: calc((var(--index) * 2.5));
   letter-spacing: calc(var(--index) * 0.15);
   transform: translate3d(0,calc(var(--scrollTop) / -7.5), 0);
   will-change: scroll-position;
}
.desc{
   font-family: ralewayRegular;
   font-weight: 100;
   font-size: calc(var(--index) /1.25);
   max-width: calc(var(--index)* 30);
   transform: translate3d(0,calc(var(--scrollTop) / -7.5), 0);
   will-change: scroll-position;
}