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

/*определение переменных в директиве root*/
/*--index-переменная для резинового шрифта*/
:root{
    --index: calc(1vw + 1vh);
    --transition: transform .15s cubic-bezier(.075, .5, 0, 1);
}
@font-face {
    font-family: raleway_f;
    src: url(../fonts/raleway-regular.woff2);
}

@font-face {
    font-family: raleway_f;
    src: url(../fonts/raleway-black.woff2);
    font-weight: 900;
}

body{
    background-color:#071f26;
    background-position: center center;
    font-family: raleway_f,sans-serif;
    font-weight: normal;
    line-height: 1.55;
    
}


 .main-header{
    position: relative;
 }

 .layers{
    min-height: 100vh;
    display: flex;
    align-items: center;/*по вертик*/
    justify-content: center;/*по гориз*/
    text-align: center;
    overflow: hidden;
    position: relative;
 }

 .layer{
    height: 100vh;
    width: 100vw;
    position: absolute;
    background-size: cover;
    background-position: center;
 /*ожидаемое изменение, больше внимания ему*/   
    will-change: transform;
 }

 /*НАСТРОЙКА параллакс-эффекта, по оси x=0, вычисляем скролл в 2 раза меньше, чем TOP+ ось Z*/
 .layers__base{
    transform: translate3d(0, calc(var(--scrollTop) / 2), 0);
    z-index: 0;
    /*он всегда позади*/
 }
 .layers__back{
    transform: translate3d(0, calc(var(--scrollTop) / 1.5), 0);
    transition: var(--transition);
 }

 .layers__middle{
    transform: translate3d(0, calc(var(--scrollTop) / 2), 0);
    transition: var(--transition);  
 }

 .layers__front{
    transform: translate3d(0, calc(var(--scrollTop) / 4), 0);
    /*спрятать  title*/   
   z-index: 2;
   transition: var(--transition);
 }

 .layer__header{
    z-index: 1;
    transform: translate3d(0, calc(var(--scrollTop) / 2), 0);
    will-change: transform;
    transition: var(--transition);
 }

 .layers__title{
    font-size: calc(var(--index)*1.1);
    text-transform: uppercase;
    margin-top: calc(var(--index)*1);
    text-shadow: 0 3px 4px #977b1e;
    color: #dddac9;
    transition: var(--transition);
 }
 .layers__specialty{
     letter-spacing:calc(var(--index)/4.5);
     font-size: calc(var(--index)*0.9);
     font-weight: normal;
     color: #faf8ea;
 }

 .info_aboutMySelf{
    min-height: 100vh;
    max-width:calc(var(--index)*50);
    margin-top: 50px;
    margin-left: calc(var(--index)*7);
    margin-right: calc(var(--index)*5);
    font-size: calc(var(--index)*0.9);
    will-change: transform;
    color:rgb(247, 231, 204);
    text-align: center;
    letter-spacing: calc(var(--index)*0.1);
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    text-align:justify;
 }
 
 .content {
    will-change: transform;
 }
 /*margin: 30px 60px 0px 150px;/*Верх-П-Низ-Л
 граница между слоями
.main-header::after{
    content:'';
    position:absolute;
    z-index:100;
    width:100%;
    height:calc(var(--index)*10);
    background-image:url(../img/line.png);
    bottom:calc(var(--index)*-5);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
*/

/*  -------- АДАПТАЦИЯ 200px Screen -------- */
@media(max-width: 350px){
.layer{
   height: 90%;
   width: 100%;
   position: absolute;
   background-size:cover;
   background-position: center;
/*ожидаемое изменение, больше внимания ему*/   
   will-change: transform;
}

.info_aboutMySelf{
   margin-top: 15px;
}
}