*{
   background-image : url(/img/AVATA.jpg);
   background-size: cover;
   background-attachment: fixed;
}

.container {
      display: flex; /* Использует Flexbox для расположения блоков */
      background-color: transparent;
      width: 100%;
      align-items: flex-start; /* Выравнивает блоки по верхнему краю */

}
.block1 {
    display: block; /* Устанавливает блочный элемент */   
    margin-top: 3%;   
    width: 25%;   /* Задает ширину блока */
    height: auto;  /* Задает высоту блока */
} 
.centered-header1 {
   margin-left: 5%;
   text-align: left; /* Это свойство центрирует текст внутри элемента */
   color: white;
   font-size: 1.3vw;
   font-style: normal;
   font-weight: 100;
   font-family: 'Press Start 2P', cursive; /* Шрифт */
   line-height: 1;
   
    }

.block2 {
    display: block; /* Устанавливает блочный элемент */
    width: 70%;   /* Задает ширину блока */
    height: auto;  /* Задает высоту блока */
    margin-left:0%;   /* Задает внешний отступ (20px со всех сторон) */
    box-sizing: border-box; /* Позволяет включить padding и border в общую ширину и высоту элемента */
} 
.centered-header {

   text-align: left; /* Это свойство центрирует текст внутри элемента */
   background-color: transparent;
   color: rgb(49, 158, 113);
   font-size: 3vw;
   font-family: 'Press Start 2P', cursive; /* Шрифт */
   line-height: 0.5;
   text-shadow: 0.1cm 1cm 2cm rgb(92, 92, 168);
   -webkit-text-stroke: 0.001mm rgb(255, 254, 254); /* Толщина и цвет обводки */
    }
.centered-header2 {
   text-align: center; /* Это свойство центрирует текст внутри элемента */
   color: rgb(49, 158, 113);
   font-size: 2vw;
   font-family: 'Press Start 2P', cursive; /* Шрифт */
   line-height: 0.1;
   -webkit-text-stroke: 0.001mm rgb(255, 254, 254); /* Толщина и цвет обводки */

    }


.container1 {
      display: flex; /* Использует Flexbox для расположения блоков */
      background-color: transparent;
      justify-content: space-between; /* Равномерно распределяет блоки по горизонтали */
      align-items: flex-start; /* Выравнивает блоки по верхнему краю */
     width: 100%;

   }   

.my-block1 {
    display: block; /* Устанавливает блочный элемент */
    width: 100%;   /* Задает ширину блока */
    height: auto;  /* Задает высоту блока */
    margin-left:0%;   /* Задает внешний отступ (20px со всех сторон) */
    box-sizing: border-box; /* Позволяет включить padding и border в общую ширину и высоту элемента */
}
.my-block {
    display: block; /* Устанавливает блочный элемент */
    width: 40%;   /* Задает ширину блока */
    height: auto;  /* Задает высоту блока */
    margin-left:0%;   /* Задает внешний отступ (20px со всех сторон) */
    
    box-sizing: border-box; /* Позволяет включить padding и border в общую ширину и высоту элемента */
}

.my-image {
    background-color: transparent;
    width: 100%; /* Изменяет размер изображения, чтобы оно занимало всю ширину блока */
    height: auto; /* Сохраняет пропорции изображения */
    display: block; /* Убирает возможные отступы вокруг изображения */
}
.wb-stl-subtitle {
   text-align: left; /* Это свойство центрирует текст внутри элемента */
   margin-left: 5%;
   color: white;
   font-size: 1.5vw;
   font-family: Arial, sans-serif; /* Шрифт */
   line-height: 1%;
    }
.container2 {
      display: flex; /* Использует Flexbox для расположения блоков */
      background-color: transparent;
      justify-content: space-between; /* Равномерно распределяет блоки по горизонтали */
      align-items: flex-start; /* Выравнивает блоки по верхнему краю */
     width: 100%;
}     
.block3 {
    display: block; /* Устанавливает блочный элемент */       
    width: 35%;   /* Задает ширину блока */
    height: auto;  /* Задает высоту блока */
} 
.block4 {
    display: block; /* Устанавливает блочный элемент */       
    width: 70%;   /* Задает ширину блока */
    height: auto;  /* Задает высоту блока */
} 
.container3 {
      display: flex; /* Использует Flexbox для расположения блоков */
      background-color: transparent;
      justify-content: space-between; /* Равномерно распределяет блоки по горизонтали */
      align-items: flex-start; /* Выравнивает блоки по верхнему краю */
     width: 100%;
}     
.block5 {
    display: block; /* Устанавливает блочный элемент */       
    width: 40%;   /* Задает ширину блока */
    height: auto;  /* Задает высоту блока */
} 
.block6 {
    display: block; /* Устанавливает блочный элемент */       
    width: 20%;   /* Задает ширину блока */
    height: auto;  /* Задает высоту блока */
}
.block7 {
    display: block; /* Устанавливает блочный элемент */    
    margin-top: 15%;   
    width: 25%;   /* Задает ширину блока */
    height: auto;  /* Задает высоту блока */
} 
.b-popup{
    width:100%;
    min-height:100%;
    background-color: rgba(0,0,0,0.5);
    overflow:hidden;
    position:fixed;
    top:0px;
}
.b-popup .b-popup-content{
    margin:45px auto 0px auto;
    width:45%;
    height: auto;
    padding:2%;
    border-radius:25px;
    box-shadow: 0px 0px 10px #000;
}

.b-container{
    width:100%;
    height:100%;
    background-color: #ccc;
    margin:0px auto;
    padding:10px;
    font-size:30px;
    color: #fff;
}

.Left-image{
    margin-left: 0%;
    width: 15%; /* Изменяет размер изображения, чтобы оно занимало всю ширину блока */
    height: auto; /* Сохраняет пропорции изображения */


}

.Centr-image{
    margin-left: 25%;
    width: 15%; /* Изменяет размер изображения, чтобы оно занимало всю ширину блока */
    height: auto; /* Сохраняет пропорции изображения */

}