@font-face {
	font-family: Evolventa;
	src: local("Evolventa"), url("fonts/Evolventa-Regular.woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Evolventa;
	src: local("Evolventa Bold"), url("fonts/Evolventa-Bold.woff");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: ZxGamut;
	src: local("ZxGamut"), url("fonts/ZxGamut-Black.woff2");
	font-weight: normal;
	font-style: normal;
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*Fide Animation*/

.content_cell, .info_bounds, .project_content_bounds {
    animation: fadeIn 1s ease-in-out forwards;
} 



body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирование по горизонтали */
    justify-content: flex-start; /* Элементы прижимаем к верху */    
    /*gap: 20px;*/ /*Отступ сверху*/
    gap: 1.0416666667vw;
     
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
    background-color: #161617ff;

    background-image: url('./images/gvater_logo_pattern.svg');
    background-repeat: repeat;
    background-size: auto;

    max-width: 100%;
}


/*ОБЩИЕ СВОЙСТВА ВЕРХНЕЙ ПОЛОСЫ*/

.nav {
    display: flex;
    justify-content: center; 
    align-items: center;      
    /*height: 80px;*/
    height: 4.1666666667vw;
    width: 100%;
    margin: 0;
    position: fixed;
    z-index: 1;
    background-color: #26282bff;
}

/*Mobile Navigation Menu Area*/
.nav_mobile {
    padding: 0;
    margin: 0;
    display: none;
}

.menu_item_block {
    padding: 0;
    margin: 0;
    display: none;    
}

.menu-item {
    padding: 0;
    margin: 0;
    display: none;    
}

.nav_bounds {   
    display: flex;    
    height: 100%;
    /*width: 1200px;*/
    width: 62.5vw;
    margin: 0;
    /*background-color: rgb(51, 255, 0);*/
}



/*ЛЕВАЯ СТОРОНА ВЕРХНЕЙ ПОЛОСЫ*/

.nav_bounds_left { /*Это контейнер слева, где находится логотип*/
    display: flex;     
    height: 100%;
    width: 50%;
    margin: 0;
    /*background-color: rgb(255, 0, 157); */
}

.logo_bounds {
    display: flex; 
    justify-content:left;
    align-items: center;      
    height: 100%;
    width: 33.3333333%;
    margin: 0;    
    /*background-color: rgb(51, 255, 0);*/
}

.nav-logo {
    width: 100%;
    height: auto;
}



/*ПРАВАЯ СТОРОНА ВЕРХНЕЙ ПОЛОСЫ*/

.nav_bounds_right {  /*Габариты контейнера основного меню навигации*/  
    display: flex;    
    height: 100%;
    width: 50%;
    margin: 0;
    padding: 0;
    border: 0;
    /*background-color: rgb(0, 68, 255); */

}

.menu_right {      /*Это контейнер справа, где находится основное меню навигации*/  
    display: flex;   
    align-items: center;     
    height: 100%;
    width: 100%;
    /*background-color: rgb(116, 1,57);  */

}

.menu_item_bound {
    display: flex;
    justify-content: center; 
    align-items: center; 
    text-align: center;    
    height: 100%;
    width: 25%;  
    margin: 0;
    padding: 0;      
    /*background-color: rgb(51, 255, 0);*/ 
}


.menu_item_bound a {
    font-family:Evolventa;
    text-decoration: none;
    /*font-size: 14px;*/
    font-size: 0.7291666667vw; /*процент от ширины окна браузера*/
    font-weight:bold;
    text-align: center;
    color: #aaacaeff;
    color: white;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Плавное ускорение/замедление */
}

@keyframes colorChange {
  0% { background:  #ffcc00ff; }
  50% { background: white; }
  100% { background:  #ffcc00ff; }
}

.menu_item_bound a:hover {
    /*color: #ffcc00ff;*/
    /*padding: 16px;*/
    padding: 0.8333333333vw;
    width: 100%;
    /*font-size: 16px;*/
    /*border-radius: 17px;*/
    border-radius: 0.8854166667vw;
    background-color: #ffcc00ff;
    /*animation: colorChange 0.4s infinite alternate;*/
    color: black;
}

.menu_item_bound a:active {
    background-color: white;
}


/*
.menu_right_item {
    background-color: rgb(251, 255, 0);
} */


/*2. ПРОСТРАНСТВО ИНФОРМАЦИИ*/

.content_space {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Два столбца равной ширины */
    gap: 0px;                  /* Отступ между элементами */

    /*
    width: 1200px;
    margin-top: 80px;
    padding-bottom: 30px;
    border-radius: 21px;
    */

    width: 62.5vw;
    margin-top: 4.1666666667vw;
    padding-bottom: 1.5625vw;
    border-radius: 1.09375vw;    

    overflow: hidden; /*обрезает элементы, что внутри*/
    height: auto; /*auto подстраивается под размер содержимого*/
    background-color: #19191cff;
    z-index: 0;
}


   
/*ГАБАРИТЫ ДЛЯ КАРТОЧЕК*/

.content_cell {
    display: flex;
    justify-content: center; 
    align-items: center;     
    flex-direction: column;
    /*height: 480px;*/
    height: 25vw; 
    /*border: 1px solid #ccc;*/
} 




/*СОДЕРЖИМОЕ ВНУТРИ КАРТОЧЕК*/

/*Image Bounds*/
.content_cell_image_bounds {
    display: flex;
    justify-content: center; 
    align-items: center;       
    width: 100%;
    /*height: 400px;*/
    height: 20.8333333333vw;
    /*background-color: rgb(0, 68, 255); */    
}

/*Title Bounds*/

.content_cell_title_bounds {

    display: flex;
    justify-content: left; /*Gorizontal Align*/
    align-items: center;     /*Vertical align*/  

    /*
    width: 500px;
    height: 40px;  
    */ 

    width: 26.0416666667vw;
    height: 2.0833333333vw;  
          
    /*background-color: rgb(255, 0, 0); */
}

.content_cell_title_bounds h1 { /*Заголовки карточекы*/
    font-family:Evolventa;
    text-decoration: none;
    /*font-size: 16px;*/
    font-size: 0.8333333333vw;
    font-weight:bold; 
    color: white; 
    color: #cfcfcfff;  
    /*color: #ffcc00ff;*/    
}



/*Description Bounds*/
.content_cell_description_bounds {
    display: flex;
    justify-content:left;/*Gorizontal Align*/
    align-items: center; /*Vertical align*/   

    /*
    width: 500px;
    height: 40px;
    */

    width: 26.0416666667vw;
    height: 2.0833333333vw;        

    /*background-color: rgb(0, 68, 255);*/     
}
.content_cell_description_bounds h2 { /*Описание карточекы*/
    font-family:Evolventa;
    text-decoration: none;

    /*font-size: 14px;*/

    font-size: 0.7291666667vw;

    font-weight:normal;
    color: #aaacaeff;  
    /*color: white;*/     
}


/*Content Cell Image*/

.content_cell_image {

    /*
    height: 300px;
    width: 500px;
    border-radius: 17px;
    */

    height: 15.625vw;
    width: 26.0416666667vw;
    border-radius: 0.8854166667vw;    

    
    overflow: hidden; /*обрезает элементы, что внутри*/
    background-color: grey;
}

.card_image {
  width: 100%;  
  height: 100%; 
  /*filter: grayscale(0%) brightness(100%);*/
  transform: scale(1);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Плавное ускорение/замедление */
  will-change: transform; /* Оптимизация для браузеров */
}

.card_image:hover {
  /*filter: grayscale(100%) brightness(90%);*/
  transform: scale(1.01);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Тень для "поднятия" */
}


 /* НИЖНЯЯ ПОЛОСА*/

.footer {
    display: flex;
    justify-content: center; 
    align-items: center; 

    /*height: 80px;*/
    height: 4.1666666667vw;

    width: 100%;
    background-color: #19191cff; 
} 

.footer h2 {
    font-family:Evolventa;
    text-decoration: none;

    /*font-size: 12px;*/
    font-size: 0.625vw;

    font-weight:normal;
    /*font-weight:bold;*/
    color: #aaacaeff;
    /*color:#ffcc00ff;  */     
}

/*Info page settings---------------------------------------------------------------------------------------*/



.content_space_info {
    display: flex;
    justify-content: center; 
    align-items: center;                 /* Отступ между элементами */

    /*
    width: 1200px;
    height: 900px;
    margin-top: 80px;
    padding-bottom: 30px;
    border-radius: 21px;
    */

    width: 62.5vw;
    height: 46.875vw;
    margin-top: 4.1666666667vw;
    padding-bottom: 1.5625vw;
    border-radius: 1.09375vw;

    
    overflow: hidden; /*обрезает элементы, что внутри*/
    background-color: #19191cff;
}

.info_bounds {

    /*
    width: 800px;
    height: 320px;
    */

    width: 41.6666666667vw;
    height: 16.6666666667vw;    

    /*background-color: red;*/
    animation: fadeIn 1s ease-in-out forwards;
}


.info_stroke_1, .info_stroke_2, .info_stroke_3, .info_stroke_4 {
    display: flex;
    width: 100%;

    /*height: 80px;*/
    height: 4.1666666667vw;
}

.info_stroke_1, .info_stroke_2, .info_stroke_3 {
    justify-content: left; /*align by gorisontal*/
    align-items: center; 
}

.info_stroke_4 {
    justify-content: left; /*align by gorisontal*/    
    align-items:start; 
}

/*
.info_stroke_1, .info_stroke_3 {
    background-color: aqua;
}

.info_stroke_2, .info_stroke_4 {
    background-color: green;
}*/

.info_stroke_1 p, .info_stroke_2 p, .info_stroke_3 p, .info_stroke_4 p  {
    margin: 0;
    padding: 0;
    font-family:Evolventa;
}

.info_stroke_1 p, .info_stroke_4 p {
    color: white;
    /*color:#ffcc00ff;*/
    font-weight:bold;
}


.info_stroke_2 p, .info_stroke_3 p {
    color: #aaacaeff;
}

.info_stroke_1 p, .info_stroke_4 p {
    /*font-size: 24px;*/
    font-size: 1.25vw;
}

.info_stroke_2 p, .info_stroke_3 p  {
    /*font-size: 17px;*/
    font-size: 0.8854166667vw;
}

/*Project page settings------------------------------------------------------------------------------------*/

.content_space_project {
    display: flex;
    justify-content: center; 
    align-items: center;                 /* Отступ между элементами */

    /*width: 1200px;*/
    width: 62.5vw;

    height: auto;

    /*margin-top: 100px;
    border-radius: 21px;*/

    margin-top: 5.2083333333vw;
    border-radius: 1.09375vw;    

    overflow: hidden; /*обрезает элементы, что внутри*/
    background-color: #19191cff;    
}

.project_content_bounds {
    display: flex;
    justify-content: center; 
    align-items: center;                 /* Отступ между элементами */    
    flex-direction: column;
    width: 100%;
    height: auto;

    /*margin-top: 50px;
    margin-bottom: 50px;*/

    margin-top: 2.6041666667vw;
    margin-bottom: 2.6041666667vw;    
}

.project_content_media {
    /*width:1100px;*/
    width: 57.2916666667vw;    
    height: 100%;
    
}

.project_image {
    width: 100%;
    height: 100%;

    /*margin-bottom: 10px;  
    border-radius: 6px;*/

    margin-bottom: 0.5208333333vw;  
    border-radius: 0.3125vw;    
}


.project_info, .project_next{
    display: flex;
    justify-content: center; 
    align-items: center;  
    text-align: center;  
    flex-direction: column;

    /*
    width: 1100px;
    height:100px;
    font-size: 16px;
    */  

    width: 57.2916666667vw;
    height: 5.2083333333vw;
    font-size: 0.8333333333vw;      

    font-family:Evolventa;
    text-decoration: none;
    font-weight:normal;    
    color: #aaacaeff; 
    /*background-color: red;*/ 
}

.project_content_name {
    font-weight:bold;
}

.project_content_info {
    /*padding-top: 10px;*/
    padding-top: 0.5208333333vw;
}

.project_next {
    flex-direction: row;   
    /*background-color: aqua;*/
}

.project_next_href {
    /*padding: 10px;*/
    padding: 0.5208333333vw;
}



/*Code page settings------------------------------------------------------------------------------------*/

.code_project_name, .code_project_title, .code_project_description, .code_project_download_link {
    display: flex;
    justify-content:left; 
    align-items: center;  
    margin: 0;
    padding: 0;

    /*width:1000px;
    height: 80px;*/

    width: 52.0833333333vw;
    height: 4.1666666667vw;    

    text-align: left;
    font-family:Evolventa;
    /*background-color: red;*/
    
}


.code_project_name,  .code_project_download_link {
    justify-content:center; 
 
}



.code_project_title {
    /*font-size: 16px;*/
    font-size: 0.8333333333vw;
    color: #aaacaeff;
    font-weight:bold;
}

.code_project_name, .code_project_download_link {
    /*font-size: 16px;*/
    font-size: 0.8333333333vw;
    color: white; 
    color: #aaacaeff; 
    /*font-weight:bold; */   
}

.code_project_description {
    /*font-size:16px;*/
    font-size: 0.8333333333vw;
    color: #aaacaeff;
}



.code_project_preview {
    /*width: 1000px;
    height: 600px;
    border-radius: 21px;*/
    
    width: 52.0833333333vw;
    height: 31.25vw;
    border-radius: 1.09375vw;

    overflow: hidden;
}

.code_project_download_link a {
    color: black; 
    text-decoration: none;   
    background-color: #ffcc00ff;

    /*
    width: 180px;
    padding: 20px;
    margin-top: 20px;
    border-radius: 17px;
    */

    width: 9.375vw;
    padding: 1.0416666667vw;
    margin-top: 1.0416666667vw;
    border-radius: 0.8854166667vw;    

    font-weight:bold;
    text-align: center;
} 

.code_project_download_link a:hover { 
    background-color: white;
    color: #ffcc00ff;
    
} 

.nav_arrow:hover {
    filter: invert(1);
}

/*Tablet Version Behevior---------------------------------------------------------------------*/

@media screen and (max-width: 1400px) and (orientation: landscape)  { 

    body {
            margin: 0;
            padding: 0;
            gap: 0px; /*Отступ сверху*/  
            background-image: none !important;            
            background-color: #19191cff;
        }  
        
    /*Общие настройки панели навигации*/    

    .nav {
        height: 6.6vw;
        padding: 0;
    }

    .nav_bounds {   
        width: 100vw;
    } 

    /*Левая часть меню*/
    
    .logo_bounds {
        display: flex;
        justify-content:center; 
        align-items: center; 
        width: 50%;  
        /*background-color: red;*/
    }  

    .logo_bounds a {
        display: flex;
        justify-content:center; 
        align-items: center;         
    }      
    
    .nav-logo {
        width: 17vw;
        height: auto;
    } 

    /*Правая часть меню*/    
    
    .menu_item_bound a {
        font-size: 1.4vw; /*процент от ширины окна браузера*/
    }
    
    .menu_item_bound a:hover {
        padding: 1vw;
        border-radius: 1vw;
    }
    
    /*Настройки карточек проектов*/

    .content_space {

        width: 100vw;
        margin-top: 6.6vw;
        padding: 0;
        border-radius: 0;   
        /*gap: 2vw;*/   

    }  

    .content_space_info {

        width: 100vw;
        height: 40vw;
        margin-top: 6.6vw;
        padding-bottom: 0;
        border-radius: 0;

    } 
    
    .info_bounds {


        width: 40vw;
        height: 20vw;    

    }   
    
    .info_stroke_1 p, .info_stroke_4 p {
        font-size: 2vw;
    }

    .info_stroke_2 p, .info_stroke_3 p  {
        font-size: 1.4vw;
    }
    


    .content_cell {
        margin-top: 3.5vw;        
        height: auto; 
    }   
    
    .content_cell_image_bounds {
        height: auto;  
    }    
 
    .content_cell_image {

        height: 25vw;
        width: 41.6vw;
        border-radius: 2vw;

    } 
    
    /*Title Bounds*/

    .content_cell_title_bounds {
        display: flex;
        justify-content:center; 
        align-items: center;  
        width: 40vw;
        height: 6vw;  

    }

    .content_cell_title_bounds h1 { /*Заголовки карточекы*/

        font-size: 1.4vw;
 
    }


    /*Description Bounds*/
    .content_cell_description_bounds {
        display: flex;
        justify-content:center; 
        align-items: center;  
        width: 40vw;
        height: 6vw;        
 
    }
    .content_cell_description_bounds h2 { /*Описание карточекы*/

        font-size: 1.2vw;  
    } 
    
    
    /*Настройка страниц проектов*/    

    .content_space_project {

        width: 100vw;
        margin-top: 6.6vw;
        border-radius: 0;    

 
    } 
    
    .project_content_bounds {

        margin-top: 0;
        margin-bottom: 0;

    }    
        
    .project_content_media {

        width: 100vw;    
 
    } 


    .project_info, .project_next{

        width: auto;
        height: 8vw;
        font-size: 1.7vw;      

    }  
    
    /*Настройки страницы проекта кода для мобильно-планшетного типа верстки*/

    .code_project_name, .code_project_title, .code_project_description, .code_project_download_link {
        display: flex;
        justify-content:center; 
        align-items: center;  
        margin: 0;
        padding: 0;
        width: 100%;
        height: 6.6vw;  
        text-align: center;  
        
    } 


    .code_project_preview {
        display: flex;
        justify-content:center; 
        align-items: center;         
        width: 100vw;
        height: auto;
        border-radius: 0;
        background-color: #161617ff;        

    } 
    
    .code_project_preview_image {
        width: 70vw;
        height: auto;
    }
    
    .code_project_title,  .code_project_name, .code_project_description, .code_project_download_link {
        
        font-size: 1.8vw;
    }

 
    
    /*Настройки подвала*/

    .footer {
        margin: 0;
        padding: 0;
        height: 6.6vw;
        width: 100%;
    } 
    
    .footer h2 {
        font-size: 1.4vw;
    }    

} 

/*Mobile Version Behevior---------------------------------------------------------------------*/

@media screen and (max-width: 1400px) and (orientation: portrait)  { 

    body {
        gap: 0px; /*Отступ сверху*/  
        background-image: none !important;
        background-color: #19191cff;
    }    
 
    /*Hide PC navigation*/
    .nav {
        display: none;
    }   
    
    .nav_mobile {
        display: flex;
        /*height: 260px;*/
        height: 21.3114754098vw; /*21 процент от ширины экрана */
        width: 100%;
        margin: 0;
        position: fixed;
        z-index: 1;
        background-color: #26282bff;
    } 


    
    .nav_bounds_logo_mobile {   
        display: flex;
        justify-content:center; 
        align-items: center;           
        height: 100%;
        width: 75%;
        margin: 0;
        padding: 0;
    }

    
    .nav_bounds_logo_mobile a {  
        display: flex;
        justify-content:center; 
        align-items: center;        
        width: 100%; 
        height: 100%;
    }  
    
    
    .nav-logo {
        /*width: 56%;*/
        width: 42vw;
        height: auto;
    }

    .menu-burger-icon, .menu-close-icon {
        width: auto;
        height: 4.9180327869vw;
    }
    
    .menu-close-icon {
        display: none;
    }    

    .nav_bounds_menu_mobile {   
        display: flex;
        justify-content:center; 
        align-items: center;            
        height: 100%;
        width: 25%;
        margin: 0;  
        cursor: pointer; /*Делает курсор в виде пальца при наведении мышки*/   
        /*background-color:greenyellow;*/
    }



    .menu_mobile {
        position: fixed;
        top: 21.3114754098vw; /*21 процент от ширины экрана */
        left: 0;
        width: 100%;


        height: 102vw; /*102 процента от ширины экрана */
        border-radius: 5vw; /* процента от ширины экрана */
        /*border-radius: 0 0 5vw 5vw;*/    

        background: #161617ff;
        display: none; /* Изначально скрыто */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 99;
        transition: opacity 0.3s ease;
    }

    .menu_mobile.active {
        display: flex;
    }    
     
    .menu_item_block {
        width: 100%;
        height: 25%;
        display: flex;
        justify-content:center; 
        align-items: center;          
        text-align: center;
    }
    
    .menu-item {
        padding: 0;
        /*font-size: 18px;
        font-size: 2rem;*/
        font-size: 4vw; /* процента от ширины экрана */
        font-family:Evolventa;
        font-weight:normal; 
        /*font-weight: bold;*/
        color: #f9f9f9ff;
        text-decoration: none;
        display: block;
    }   

    /*Set Grid by 1 column*/
    .content_space {
        display: grid;
        grid-template-columns: 1fr; /* Два столбца равной ширины */
        gap: 0px;                  /* Отступ между элементами */
        width: 100%;
        margin-top: 21.3114754098vw; /*21 процент от ширины экрана */
        padding-bottom: 0px;
        border-radius: 0px;
        overflow: hidden; /*обрезает элементы, что внутри*/
        height: auto; /*auto подстраивается под размер содержимого*/
        background-color: #19191cff;
        z-index: 0;
    }

    /*ГАБАРИТЫ ДЛЯ КАРТОЧЕК*/

    .content_cell {
        display: flex;
        justify-content: center; 
        align-items: center;     
        flex-direction: column;
        width: 100%;
        height: 80vw; 
        /*border: 1px solid #ccc;*/
    } 




    /*СОДЕРЖИМОЕ ВНУТРИ КАРТОЧЕК*/

    /*Image Bounds*/
    .content_cell_image_bounds {
        display: flex;
        justify-content: center; 
        align-items: center;       
        width: 100%;
        height: 66.6393442623vw; /*пропорции на основе дизайн-макета*/
        /*background-color: rgb(0, 68, 255); */    
    }

    

    /*Content Cell Image*/

    .content_cell_image {
        width: 83.2786885246vw;        
        height: 50vw;
        border-radius: 2.868852459vw;
        overflow: hidden; /*обрезает элементы, что внутри*/
        background-color: grey;
    }
 

    .card_image {
        width: 100%;  
        height: 100%; 
    }    

    /*Title Bounds*/

    .content_cell_title_bounds {
        display: flex;
        justify-content: left; /*Gorizontal Align*/
        align-items: center;     /*Vertical align*/   
        width: 83.2786885246vw;
        height: 6.6393442623vw;    
        /*background-color: rgb(255, 0, 0); */
    }

    .content_cell_title_bounds h1 { /*Заголовки карточекы*/
        font-family:Evolventa;
        text-decoration: none;
        font-size: 2.868852459vw;
        font-weight:bold; 
        color: white; 
        color: #cfcfcfff;  
        /*color: #ffcc00ff;*/    
    }



    /*Description Bounds*/
    .content_cell_description_bounds {
        display: flex;
        justify-content:left;/*Gorizontal Align*/
        align-items: center; /*Vertical align*/    
        width: 83.2786885246vw;
        height: 6.6393442623vw;    
        /*background-color: rgb(0, 68, 255);*/     
    }
    .content_cell_description_bounds h2 { /*Описание карточекы*/
        font-family:Evolventa;
        text-decoration: none;
        font-size: 2.7049180328vw;
        font-weight:normal;
        color: #aaacaeff;  
        /*color: white;*/     
    }


    /*Project mobile layout*/

    .content_space_project {
        width: 100%;
        margin:0;
        padding:0;

        height: 100%;

        margin-top: 21.3114754098vw;
        border-radius: 0;     
    }

    .project_content_bounds {
        width: 100%;
        height: auto;
        margin: 0;  
    }  
    
    .project_content_media {
        width: 100%;    
        height: auto;
        
    }  
    
    .project_image {
        margin:  0;  
        border-radius: 0;    
    }


    .project_info{

        width: 100%;
        height: auto;  

    }

    .project_content_name, .project_content_info  {
        display: flex;
        justify-content:center;/*Gorizontal Align*/
        align-items: center; /*Vertical align*/          
        text-align: center;
        font-size: 3.2786885246vw;
        height: 16.393442623vw;
    }


    .project_next {
        height: 16.393442623vw;
    }

    .project_next_href {
        padding: 4.9180327869vw;
    } 

    .nav_arrow{
        height: 4.9180327869vw;
    }  
    
    
     /*Project mobile layout CODE */ 

    .code_project_name p {
        font-size: 3.7704918033vw;
        font-size: 4vw;
        font-weight: bold;
    } 
     
    .code_project_name, .code_project_title{
        display: flex;
        justify-content: center; 
        align-items: center;                 /* Отступ между элементами */        
        width: 100%;
        height: 16.393442623vw;    
        text-align: center;
    }
    
    .code_project_preview, .code_project_preview_image {
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    .code_project_description {
        display: flex;
        justify-content: center; 
        align-items: center;            
        width: 90%;
        text-align: center;
    }

    .code_project_title p {
        font-size: 3vw;
        font-size: 2.6229508197vw;
    }

    .code_project_description p {
        font-size: 2.6229508197vw;
    }    

    .code_project_download_link {
        display: flex;
        justify-content: center; 
        align-items:end;         
        width: 100%;
        height: 24.5901639344vw;
    }

    .code_project_download_link a {  /*Yellow button for download*/
        display: flex;
        justify-content: center; 
        align-items:center; 
        width: 40.9836065574vw;
        height: 11.4754098361vw;
        padding: 0;
        margin-top: 0;
        border-radius: 3.1147540984vw; 
        font-size: 2.6229508197vw;
        font-size: 4vw;

    } 

     /*Content Info GRAPHICS*/
     
    .content_space_info {
        display: flex;
        justify-content: center; 
        align-items: center;                 /* Отступ между элементами */
        width: 100%;
        height: 100%;
        flex-grow: 1;
        margin-top: 21.3114754098vw;
        border-radius: 0px;
        overflow: hidden; /*обрезает элементы, что внутри*/
        background-color: #19191cff;
    }    

    .info_bounds {
        width: 100%;
        height: auto;
    }


    .info_stroke_1, .info_stroke_2, .info_stroke_3, .info_stroke_4 {
        display: flex;
        width: 100%;
        height: 16.393442623vw;
        text-align: center;
        justify-content:center; /*align by gorisontal*/
        align-items: center;         
    }


     .info_stroke_1 p, .info_stroke_2 p, .info_stroke_3 p, .info_stroke_4 p {
        font-size: 4.0983606557vw;
    }



    .footer {
        display: flex;
        justify-content: center; 
        align-items: center;      
        height: 21.3114754098vw; /*21 процент от ширины экрана */
        width: 100%;
        background-color: #19191cff; 
    } 

    .footer h2 {
        font-family:Evolventa;
        text-decoration: none;
        font-size: 3vw; /*2 процент от ширины экрана */
        font-weight:normal;
        /*font-weight:bold;*/
        color: #aaacaeff;
        /*color:#ffcc00ff;  */     
    }

}