*  {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      text-decoration: none;/* убираем везде подчеркивание */
      list-style: none; /* убираем маркеры везде */
      text-transform: none; /* оставляет текст как есть, регистр не переводит, не подчеркивает и т.д. */
  
   }

   @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
      
     
   body {
      height: 100vh; /* высота будет меняться от высоты области просмотра */
      width: 100%;/* ширина всего экрана */
      background-color:#151415;/* цвет фона */
      
      /* /* /* Если задается картинка фоном, тогда следующие свойства: пример:
      backraund: url(img/bn.jpg)
      no repeat;  */
      /* backraund-size: cover;
      backraund-position: center;
            */   
   }

   header {
      position: relative; /* чтобы меню не ездило при прокручивании позицмя фиксед */
      top: 0;
      left: 0;
      right: 0;
      background: #151415; /* цвет поля меню и логина */
      box-shadow: 0 5px 10px rgba(21, 20, 21, 0.4);      /* тень элемента */
      display: flex; /* это свойство и нижнее обязательно в меню!!! */
      justify-content: space-between; /* по разным сторонам основные теги */
      align-items: center;/* выравнивает элементы внутри контейнера */
      padding: 0 2% ; /* отступы сверху и снизу 0, справа и слева 8% */
      z-index: 2;

   }

   header img.logo  {
      width: 100%; /* размер логотипа */
      padding-right: 2%;/* отступы справа от логотипа */
         
      /* обязательно в процентах, важно для адаптации под разные экраны */
      
      /* если логотип буквами тогда:
      font size: 25 px -размер шрифта
      color: #000 - цвет шрифта
      font-weight: 800; - жирность шрифта  */  
   }

   nav ul li {
      position: relative;
      float: left; /* изымает из потока, выстраивает в ряд */
      border: 1.5px solid #151415;/* толщина рамки, сплошная, размер рамки */
      border-radius: 2px; /* радиус рамки */      
      transition: 0.5s; /* отображение по времени  */    
        
   }

   nav ul li a  {
      color: white; /* цвет ссылок */
      font-family:Verdana, Tahoma, sans-serif;
      font-size: 16px;
      display: block;/* элемент становится блочным */
      padding: 15px 20px;/* отступы сверху снизу и по бокам от пунктов меню */
      /* padding: 17px;/* отступы покругу */ 
      transition: 0.5s;/* время срабатывания ссылок */
      
   }

   nav ul li a:hover {/* псевдокласс */    
      background: #151415; /* цвет вокруг пунктов меню при наведении */
      color:#808080; /* цвет текста при наведении */  

   }   

   nav ul .selected { /* линия внизу пункта Главная */
      text-decoration: underline 1.5px;
      text-underline-offset: 16px;
      text-decoration-color:  #00FFFF;
    
   }    

   nav ul li ul { 
      position: absolute; /* для выстраивания в ряд сверху вниз подпунктов меню, в родителе позиция relative*/
      left: 0;
      width: 200px; /* высота подпунктов меню */
      background:#151415;/* цвет фона выпадающих подпунктов меню */
      display: none;/* скрывает выпадающие пункты меню */    
    
   }

    nav ul li ul li { /* линия внизу пункта выезжающих меню */
      text-decoration: underline 1.5px;
      text-underline-offset: 12px;
      text-decoration-color:  #00FFFF;    
      /* width: 100%;
      border:2px solid rgba(58, 56, 25, 0.2); - если покругу каемка
      */
   }   

   nav ul li.selected:hover {/* псевдокласс для появления border при наведении и следующие 2 тоже */
       border-color:#00FFFF; 

   }

   nav ul li.selected__1:hover {
       border-color:#00FFFF; 

   }

   nav ul li.selected__2:hover {
      border-color:#00FFFF; 

   }

   nav ul li:hover > ul {  /* для того чтобы подпункты меню выезжали при новедении  */
      display: initial;      
   
   }

   /* отсюда начинается средняя часть сайта main */
  
   .section-about {   
      height: 900px;     
      background: url(/src/img/Замок1.png) center/cover no-repeat;
      position: relative;    
       
   }

   .section-about__block {
      display: flex;
      justify-content: center;
      flex-direction: column; 
      align-items: center;
      width: 700px;
      height: 300px;
      background-color: rgba(0, 255, 255, .2);
      position: absolute;
      top: 10%;
      left: 7%;
      border-radius: 8px;
      border: 1px solid  #00FFFF;
      margin-top: 1px;
      z-index: 1;

   }

    .section-about__text {
      font-size: 25px;
      white-space:pre;    
      color: white;
      line-height: 1.5; /* высота строк */
      letter-spacing: 1.5px; /* сжать или растянуть текст */
      font-family: 'Roboto', Arial, sans-serif;
      font-weight: 400;   
    
    }    

   /* базовая секция */

   .section-basik__block {
      display: flex;
      justify-content: center;
      flex-direction: column; /* флекс элементы лесенкой */
      align-items: center;
      min-height: 500px;
      margin: 15px 100px;
      background-color:rgba(0, 0, 0, 0.3);
      border-radius: 15px;

   }

   .section-basik__title {
    color: white;
    text-align: center;
    padding: 7%;
    font-size: 40px;
    font-family:Verdana, Tahoma, sans-serif;
    text-decoration: underline 1.5px;
    text-underline-offset: 8px;
    text-decoration-color:  #00FFFF;
    letter-spacing: 0.3em;
    
   }

   h1 {    
      color: white;
      text-align: center;
      padding: 2%;
      font-size: 30px;
      font-family:Verdana, Tahoma, sans-serif;
      font-style: italic;
      text-decoration: underline 1.5px;
      text-underline-offset: 8px;
      text-decoration-color: #00FFFF;
      letter-spacing: 0.1em;

   }

   h2 { 
      font-size: 25px;
      white-space: pre;
      color: white;
      line-height: 1.5;
      letter-spacing: 1.5px;
      font-family: 'Roboto', Arial, sans-serif;
      padding: 0 auto;  

   }

   .section-about__my {
      height: 900px;
      background: url(/src/img/Поезд.png) center/cover no-repeat;
      position: relative;

   }

   

   .section-about__block__my {
      display: flex;
      justify-content:center;
      flex-direction:column; 
      align-items: center;
      width: 900px;
      height: 600px;
      background-color: rgba(0, 255, 255, .2);
      position: absolute;
      top: 15%;
      left: 17%;
      border-radius: 8px;
      border: 1px solid  #cc8899;
      margin-top: 1px;
      z-index: 1;
  
   }

   .section-about__block__my img {
      width: 300px;
      height: 410px;
   
   }

   .section-about__text__my {
      font-size: 25px;
      padding: 10px 10px;
      white-space:center;    
      color: white;
      text-indent: 20px;/* с красной строки */
      line-height: 1.5; /* высота строк */
      letter-spacing: 1.5px; /* сжать или растянуть текст */
      font-family: 'Roboto', Arial, sans-serif;
      
   }

    main .container .img-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px; /* отступы */
      

   }

   .thanks {
      text-align: center;
   }

   .thanks_1 {
      text-align: center;
   }

   .container .img-container .img {
      width: 350px;
      height: 250px;
      border: 1.5px solid #00FFFF;
      overflow: hidden; /* чтобы контент не вылазил за блоки */
      

   }

   .container .img-container .img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
      transition: .5s;
      

   } 
   
   .container .img-container .img:hover img {
      transform: scale(1.1);
   }
   
   .container .pop-up { 
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color:rgba(0, 0, 0, .8);
      display: none;
      z-index: 5;
      
   }

   .container .pop-up img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #00FFFF;
      border-radius: 8px;
      width: 700px;
     
   }

   .container .pop-up span {/* крестику */
      position: fixed;
      top: 10px;
      right: 20px;
      width: 40px;
      height: 40px;
      background: white;
      font-size: 50px;
      font-weight: 900;
      text-align: center;
      line-height: 40px;
      border-radius:50px;
      cursor: pointer;
      z-index: 1;

   }

   .hr-line {
      margin: 10px 0;
      padding: 0;
      height: 0;
      border: 0;
      border-top: 1px solid rgb(0, 255, 255);
        
   }

   /* отсюда начинается footer */
   footer {      
      background-color:#151415;
      
   }

   .footerContainer {    
      width: 100%;
      padding: 1% 4%;

   }

    .socialIcons {
      display: flex;
      justify-content: center;

   }

   .socialIcons a{
      text-decoration: none;
      padding: 3px;
      background-color: white;   
      margin: 10px;
      border-radius: 10%;   

   }
   
   .socialIcons a i{
      font-size: 2em;
      color:black;
      opacity: 0.8;
      border-radius:25%;
     
   }

    .socialIcons a:hover {
      background-color:#151415;
      transition: 0.5s;

   }

   .socialIcons a:hover i{
      background-color:#00FFFF;
      transition: 0.5s;

   }

   .footerBotton {
      display: flex;
      justify-content: center;
      color:white;
      padding: 0 4% 1% ;
      font-size: 18px;
      
   }     

   /* отсюда начинается адаптация для мобильных */

   .menu {    
      position: relative;
      width: 40px;
      height: 35px;    
      background: transparent;/* фон по умолчанию прозрачный */
      cursor: pointer; /* курсор при наведении меняется на указательный */

   }

   input[type=checkbox] {
      display: none;
    /* скрыть меню */

   }

   .menu span {   /* для кнопки сверху справа , бутерброд */
      display: block;
      position: absolute;
      height: 4px;
      width: 100%;
      background: white;
      border-radius: 10px;
      transition: 0.5s;

   }
  
   .menu span:nth-child(1) {/* находит один или более элементов, основываясь на их позиции среди группы соседних элементов. Это все и ниже для трех линий бутерброда*/
      top: 0;
      transform-origin: left center;

   }

   .menu span:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
      transform-origin: left center;

   } 
   
   .menu span:nth-child(3) {
      top: 100%;
      transform: translateY(-100%);
      transform-origin: left center;

   }

   input:checked ~ label /* относится к крестику бутерброда и два ниже */
   span:nth-child(1) {
      transform: rotate(45deg);
      top: 0;
      left: 10px;
 
   }

   input:checked ~ label /* при нажатии элемент исчез */
   span:nth-child(2) {
      width: 0;
      opacity: 0;

   }

   input:checked ~ label 
   span:nth-child(3) {
      transform: rotate(-45deg);
      top: 28px;
      left: 10px;

   }

   header label {
      display: none;  /* скрываем элемент бутерброд с крестиком */

   }
  
   @media (max-width:1199px) {

   nav ul li a {
      padding: 15px 9px;

   }

   .section-about__block__my {     
      top: 10%;
      left: 2%;    
   }

   

   }

   @media (max-width:992px) {  

      header nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background:#151415;
      border: 1px solid rgb(21, 20, 21, .1);
      display: none; /* меню убирает */

   }

   header nav ul li {
      width: 100%;
      text-align: center;

   }

   header nav ul li ul {
      position: relative;
      width: 100%;

   }

   header nav ul li ul li {
      background:#151415;

   }   

   header label {
      display: initial; /* добавляем бутерброд в видимость */

   }

   #menu:checked ~ nav { /* включает меню при сужении экрана, ~ - селектор обобщенных родстенных элементов */
      display: initial;

   }

   .section-about__block__my {
      width: 80%;      
      top: 10%;
      left: 7%;
    
   }

   .section-about__block__my img {
      padding: 6%;
      
   }

   .section-about__text__my {
      font-size: 1.37em;
      padding:  1%;
      white-space: pre;
         
   }

   
   .section-basik__block {
      margin: 1% 13%;
      
   }

   .section-basik__title {
      font-size: 1.87em;

   }

   h1 {
      font-size: 1.25em;

   }

   h2 {
      font-size: 1.06em;

   }
 
   }
    
    /* отсюда второй блок адаптация */
   @media (max-width:768px) {      

   .section-about__block {
      width: 70%;
      height: 20%;
      top: 7%;
      left: 4%;   
      
   }

  
   .section-about__text {
      font-size: 1em; 
      margin: 1% 1%;  

   }

   .section-about__block__my {
      width: 80%;
      top: 10%;
      left: 7%;

   }

   .container .pop-up img {
      width: 100%;
   }

     
  
   .section-basik__block {
      margin: 0 14%;

   }

   .section-basik__title{
      font-size: 1.4em;

   }

   h1 {
      font-size: 1.1em;

   }

   h2 {
      font-size: 0.95em; 
      letter-spacing:normal;

   }

   
   }  

   @media (max-width:576px) {
   header img.logo{
       width: 90%;
   }



   .section-about__block {
       width: 85%;
       height: 10%;
       top: 15%;
       left: 5%;   
       
   
   }

   .section-about__text {
       font-size: 0.8em; 
       margin: 0 auto; 
       line-height: normal; /* высота строк */
       letter-spacing: normal; /* сжать или растянуть текст */ 
   }

   .section-about__block__my{
      width: 90%;
      width: 90%;
      border: 1px solid  rgb(0, 255, 255);
   }      

   .section-about__text__my {
      font-size: 0.9em;
      
   }   
   

   .section-basik__block {
      margin: 0 6%;
   }

   .section-basik__title {
      font-size: 1.4em;

   }

   h1 {
      font-size: 1.2em;
      font-style: normal;
      font-weight: 500;
      text-underline-offset: 5px;
      padding: 1%;
   }

   h2 {
      font-size: 0.85em;
      font-style: normal;     
   }

   .container .pop-up span {
      top: 13%;
   }
     
  
   }