@font-face {
 font-family: Pompadur; /* Имя шрифта */
 src: url(../fonts/pompadur.ttf); /* Путь к файлу со шрифтом */
}

body {
  position: relative;
//  background-color: #c7b39b; 
  background-color: #0e1a2a; /* тёмно-синий фон */
//  background-color: #cfd6ff; 

  overflow: hidden;
  animation: zoomBackground 2s forwards linear; /* 20s - время одного цикла анимации */
//  animation: zoomBackground 3s forwards ease-out; /* 20s - время одного цикла анимации */

}

@keyframes zoomBackground {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/Img/Bkgd/derpy_hooves_by_ramiras_dcuypxp-fullview.jpg);
//  background-image: url(/Img/Bkgd/lunar_music_by_yakovlev_vad_dcn3gs6.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: -1;
  animation: fadeBackground 7s forwards; /* 20s - время одного цикла анимации */
}

@keyframes fadeBackground {
  0% {
    background-size: 100%; /* начальный размер (в данном случае, уменьшение до 120%) */
    opacity: 0;
  }
  100% {
    background-size: 120%; /* начальный размер (в данном случае, уменьшение до 120%) */
    opacity: 1;
  }
}



@keyframes moveBoxMenu {
  0% {
// Сначала выезжало от цента в нужнопе положение.;
//    top: 50%;
//    left: 50%;
//    transform: translate(-50%, -50%);
// -------------;
// Потом решил, чтобы оно слева выезжало.;
    top: -100%;
  }
  100% {
    top: 20px;
//    transform: none;
  }
}

.box_menu {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 80%;
  animation: moveBoxMenu 4s  ease-out; /* 5s - длительность анимации */
//  border: 1px solid black; 
}



.ShowIP {
 position: absolute;
// font-family: Pompadur;
 top: 140;
 left: 140;
 right: 73%;
}


.pruvet {
 position: relative;
 text-align: center;
 top: 0; 
 left: 0;
 right: 73%;
 font-size: 1.2em;
/* border: 1px solid black; */
}

.pruvet > h3 {
/* font-style  	 : italic; */
 font-size: 3.2em; // Это 120% от родителя.;
 font-weight  	 : bold;
 font-family: Pompadur;
 text-align: center;
 text-shadow 	 : #FAEB00 2px 2px 5px;
// text-decoration : underline; 
 margin: 0 auto; /* Центрирование по горизонтали с использованием margin */

 top: 0; 
 left: 0;
 width: 480;
 color		 : #7a6000; 
// border: 1px solid black;  
}


.instruction {
// background-image: url(/Img/Bkgd/derpy_hooves_by_ramiras_dcuypxp-fullview.jpg);
 position: relative;
 font-size: 1.5em;
 text-align: center;
 text-shadow 	 : #FAEB00 2px 2px 3px;
 top: 0; 
 left: 0;
 width: 880;
 font-weight: 900; // Это жирность. Вместо bold можно цифры указывать и более точно подбирать жирность.;

// -webkit-text-stroke: 0.5px #FAEB00; /* обводка толщиной 2 пикселя и цвета черный */
//  color: white; /* цвет текста */

// border: 1px solid black;  
}


.instruction > a {
 color:      Red;
 font-family: Pompadur, 'Arial', 'Times New Roman', Times, serif;
 font-size: 150%;
 font-weight  	 : bold;
 text-shadow 	 : #35090C 2px 2px 3px;
}

.instruction > a:hover {
 color:      DarkGreen;
 text-shadow 	 : Lime 2px 2px 5px;
// font-family: Pompadur;
// font-weight  	 : bold;
// font-size: 150%;

}



#hl_text {
  color: red;
  font-weight: bold;
}



.link_menu {
 /* Этот слой будет вкладываться в box_menu, поэтому здесь относительная позиция указывается. */
 position: relative;
 top: 0;
 left: 0;
 float: left;
 text-align: center;


/* background: repeat; */
// background-image: url(../img/background/link_menu.jpg ); 
 background-color: #fcf5d4;
 background-size: contain;

 background-attachment: fixed;
// display: inline-block; /* В этом случае размер блока, а значит и рамки вокруг, будут зависеть от содержимого блока. */
 border: solid  black 1pt;
 border-collapse: collapse; /* Если два блока рядом, то между ними граница будет одниарная, а не у каждого своя. */
 border-radius: 10px; /* Уголки */
// filter: blur(5px);

 padding: 10px; 
 box-sizing: content-box;

 z-index: 0; // Этот параметр влияет ;
 width: 100%; 
// background: #fc3; /* Цвет фона */
}

.link_menu > a {
 color:      black;
}

.link_menu > a:visited {
 color:      green;
}

.link_menu > a:link {
 color:      black;
}
                                                                 
.link_menu > a:hover {
// color:      #21ff60;
 color:      Green;
 font-family: Pompadur;
 font-weight  	 : bold;
 font-size: 130%;
 text-shadow 	 : Lime 2px 2px 5px;

}

.link_menu > h3 {
 font-style  	 : italic;
 text-shadow 	 : #409c03 2px 2px 5px;
/* text-decoration : underline; */
 color		 : #8a6000;


}

.video_frame {
 /* Этот слой будет вкладываться в box_menu, поэтому здесь относительная позиция указывается. Этот слой идёт за link_menu. top: 20; - получается, что это отступ от предыдущего элемента. */
 position: relative;
 top: 20;
 margin-top: 20;
}



.block-photo {
 opacity: 0;
 animation: zoomBackground 3s forwards linear; /* 20s - время одного цикла анимации */
 animation-delay: 5s;
}

#copy-msg {
      position: absolute;
      background-color: yellow;
      color: black;
      padding: 5px 10px;
      border: 1px solid black;
      border-radius: 4px;
      font-family: sans-serif;
      font-size: 14px;
      display: none;
      z-index: 1000;
      pointer-events: none; /* чтобы не мешал кликам */
    }