/* Global Styles */
@-viewport { width: device-width; }

H1 {
 font-family: Helvetica;
 font-size: 23px;
 font-weight: bold;
 line-height: 24px;
 color: Darkslategray;
 text-align: center;
}

H2 {
 font-family: Helvetica;
 font-size: 22px;
 font-weight: bold;
 line-height: 23px;
 color: Darkslategray;
 text-align: center;
}

H3 {
 font-family: Helvetica;
 font-size: 22px;
 font-weight: bold;
 line-height: 23px;
 color: Darkslategray;
 text-align: center
}

H4 {
 font-family: Helvetica;
 font-size: 22px;
 font-weight: bold;
 line-height: 23px;
 color: Darkslategray;
 text-align: center
}

H5 {
 font-family: Helvetica;
 font-size: 22px;
 font-weight: bold;
 line-height: 23px;
 color: Darkslategray;
 text-align: center
}

H6 {
 font-family: Helvetica;
 font-size: 22px;
 font-weight: bold;
 line-height: 23px;
 color: Darkslategray;
 text-align: center
}

body {
 font-family: Helvetica;
 font-size: 22px;
 font-weight: normal;
 line-height: 23px;
 color: Darkslategray;
}

table:hover {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}

td {
 font-family: Helvetica;
 font-size: 21px;
 font-weight: normal;
 line-height: 21px;
 color: Darkslategray;
}

td:hover {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}

p {
 text-indent: 15px;
 font-family: Helvetica;
 font-size: 21px;
 font-weight: normal;
 line-height: 22px;
 color: Darkslategray;
}

li {
 text-indent: 2px;
 font-family: Helvetica;
 font-size: 21px;
 font-weight: normal;
 line-height: 22px;
 color: Darkslategray;
 text-align: left;
}

li:hover {
 text-indent: 2px;
 font-family: Helvetica;
 font-size: 21px;
 font-weight: bold;
 line-height: 22px;
 color: Darkslategray;
 text-align: left;
}

a {
 font-family: Helvetica;
 font-size: 21px;
 font-weight: normal;
 line-height: 22px;
 color: Crimson;
 text-decoration: none;
}

.menu:hover {
 font-family: Helvetica;
 font-size: 21px;
 font-weight: bold;
 line-height: 22px;
 color: Crimson;
 text-decoration: none;
}

button {
 font-family: Helvetica;
 font-size: 22px;
 font-weight: normal;
 line-height: 23px;
 color: Crimson;
 text-decoration: none;
 border-radius: 5px;
 border-color: Crimson
}

button:hover {
 font-family: Helvetica;
 font-size: 22px;
 font-weight: bold;
 line-height: 23px;
 color: Crimson;
 text-decoration: none;
 border-radius: 5px;
 border-color: Crimson
}


.image-gallery {
  display: flex; /* Или grid, для расположения миниатюр */
  gap: 10px;
}

.image-item {
  position: relative; /* Для позиционирования полного изображения */
  overflow: hidden; /* Чтобы полное изображение не выходило за пределы миниатюры */
  cursor: pointer;
}

.image-item img {
  display: block;
  max-width: 100px; /* Размер миниатюры */
  height: auto;
}

/* Скрытие полноразмерного изображения по умолчанию */
.image-item .full-size {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Занимает всю ширину родительского элемента */
  height: auto;
}

/* При наведении на контейнер изображения - показывать полноразмерное */
.image-item:hover .full-size {
  display: block;
}

/* При наведении на миниатюру - изменять ее */
.image-item:hover img:not(.full-size) {
  opacity: 0.7; /* Пример изменения для миниатюры */
}