div a {
    color:#F5F5F5; font-size: 1.5em; font-weight: bold; text-decoration: none;   
   }
   
   li a {
    color:#2E3436; font-size: 1.5em; font-weight: bold; text-decoration: none;   
   }      .image-container {
        background-image: url('gerb2.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 336px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(63, 223, 52, 0.5);
        border-radius: 10%;
      }
     .image-container h1 {
       color: white;
       font-size: 3em;
       text-align: center;
     }
 .image-container1 {
  background-image: url('orig.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 336px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(240, 244, 168, 0.5);
  border-radius: 10%;
  font-size: 30px;
  font-weight: bold;
  color: #9379e1;

}


[data-tooltip] {
    position: relative; /* Относительное позиционирование */ 
   }
   [data-tooltip]::after {
    content: attr(data-tooltip); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    width: 300px; /* Ширина подсказки */
    left: 0; top: 0; /* Положение подсказки */
    background: #0DCAF0; /* цвет фона */
    color: #a91ec9; /* Цвет текста */
    padding: 0.5em; /* Поля вокруг текста */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Параметры тени */
    pointer-events: none; /* Подсказка */
    opacity: 0; /* Подсказка невидима */
    transition: 1s; /* Время появления подсказки */
   } 
   [data-tooltip]:hover::after {
    opacity: 1; /* Показываем подсказку */
    top: 2em; /* Положение подсказки */
    border-radius: 10%;
    font-size: 20px;
    font-weight: bold;
    color: #F0F0F0;
   }