html {
  font-size: 10px;
  font-family: Source Sans, sans-serif;
  background-color: rgb(191, 229, 177);
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 35px;
  text-align: center;
  margin: 0px 5px 0px 5px;
  padding: 10px 0;
  color: #062f56;
  text-shadow: 1px 1px 1px rgb(109, 32, 32);
}
h2 {
  font-size: 30px;
  text-align: center;
  color: rgba(0, 159, 31, 0.94);
}
h3 {
  font-size: 25px;
  text-align: center;
  color: rgba(159, 0, 141, 0.94);
  margin: 0;
  
}
h4 {
  font-size: 20px;
  text-align: center;
  color: black;
  margin: 0;
}
h5 {
  font-size: 20px;
  text-align: left;
  color: black;
  margin: 0px 5px 0px 5px;
  text-align: justify;
}
p {
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0px;
  margin: 10px;           /* однакова відстань з усіх боків */
  text-align: justify; /* Вирівнювання за шириною */
  text-indent: 40px; /* Отступ первой строки в пикселах */
}
a {
  text-decoration: none; /* Отменяем подчеркивание у ссылки */
}
li:hover {
  background: #4b0f7b;
}
.test {
  position: relative;
  display: flex;
  justify-content: space-between;
  top: 10px;
  border: 3px solid rgb(243, 75, 75);
  border-radius: 10px;
  padding: 5px;
  margin: 10px;
  z-index: 1;
}
.main {
  position: absolute;
  width: auto;
  left: 5px;
  right: 5px;
  margin: 5px;
  padding: 5px;
  background-color: rgb(142, 246, 213);
  border: 3px solid rgb(243, 75, 75);
  border-radius: 10px;
}
.image-align {
  text-align: center;
  margin: 20px;
}
table, th, td {
  border: 1px solid black;
}
td {
  line-height: 1;
  letter-spacing: 0px;
  text-align: justify; /* Вирівнювання за шириною */
}
td {
  padding: 10px; /* Поля в ячейках */
  text-align: center;
}
.text {
  text-align: left;
}
.table-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}
.color {
  background-color: rgb(101, 141, 243);
}
.color2 {
  background-color: rgb(231, 243, 101);
}
.color3 {
  background-color: rgb(248, 120, 120);
}
.color4 {
  background-color: rgb(101, 243, 113);
}
.colortext {
  color: red; /* цвет выделения */
}
.colortext2 {
  color: orange; /* цвет выделения */
}
.colortext3 {
  color: Yellow; /* цвет выделения */
}
.colortext4 {
  color: green; /* цвет выделения */
}
.colortext5 {
 color: aqua; /* цвет выделения */
}
.colortext6 {
 color: blue; /* цвет выделения */
}
.colortext7 {
 color: purple; /* цвет выделения */
}
footer {
  text-align: center;
  padding: 15px;
  background: #8eaef5;
  color: rgb(255, 0, 0);
  margin-top: 20px;
  border-radius: 10px;
  font-size: 20px;
}
table {
        width: 100%;
        border-collapse: collapse;
    }

table td {
        vertical-align: middle;
        padding: 5px;
        min-height: 40px;
        height: 35px; /* задаємо фіксовану висоту */
        font-size: 20px;
}

table input {
        width: 100%;
        height: 100%;
        border: none;
        padding: 5px;
        text-align: center;
        font-size: 1em;
        box-sizing: border-box;
        background-color: transparent;
}

table input:focus {
        outline: none;
        background-color: #f0f8ff;
    }

.text {
        text-align: left;
}
/* Кнопка "вгору" — стилі */
#scrollTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: #8eaef5;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none; /* блокуємо клики, коли невидима */
}
#scrollTopBtn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
#scrollTopBtn:hover { background-color: #4b0f7b; }

/* === Меню === */
nav {
  background: #8eaef5;
}
/* базова стрічка меню */
ul {
  font-size: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
/* пункт меню */
ul li {
  position: relative;
}
/* посилання */
ul li a {
  display: block;
  padding: 1.2rem;
  color: rgb(255, 0, 0);
  text-decoration: none;
}
/* підменю — за замовчуванням приховане */
ul li ul.dropdown {
  display: none;
  position: absolute;
  background: #8eaef5;
  top: 100%;
  left: 0;
  width: 220px;
  z-index: 1000;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
/* поки що правило для JS-імітації відкриття */
ul li.show > ul.dropdown {
  display: flex;
  flex-direction: column;
}
.tax-info {
  background: #9ef5dc;
  padding: 10px 15px;
  font-size: 20px;
  line-height: 1;
}

.tax-info > div {
  margin-bottom: 4px;
}

.tax-info .note {
  font-style: italic;
}


/* hover-показ підменю — тільки на десктопі (min-width: 769px) */
@media (min-width: 769px) {
  ul li:hover > ul.dropdown {
    display: flex;
    flex-direction: column;
  }
  .menu-toggle { display: none; } /* ховаємо бургер на великих екранах */
}

/* Бургер-кнопка */
.menu-toggle {
  display: none;
  background: #8eaef5;
  color: rgb(255, 0, 0);
  font-size: 2.4rem;
  border: none;
  padding: 1rem;
  cursor: pointer;
}

/* мобільні правила */
@media (max-width: 768px) {
  ul {
    display: none;            /* ховаємо горизонтальне меню — буде показуватись при клацанні бургеру */
    flex-direction: column;
    width: 100%;
  }
  ul.show {
    display: flex;
  }
  .menu-toggle {
    display: block;
    width: 100%;
    text-align: left;
  }
  ul li { width: 100%; }
  /* робимо підменю статичним у потоці для мобільного (вкладено як вертикальний список) */
  ul li ul.dropdown {
    position: static;
    width: 100%;
    box-shadow: none;
  }
  h1 {
    font-size: 20px; /* наприклад, 25px замість 35px */
  }
  h2 {
    font-size: 20px; /* наприклад, 25px замість 35px */
  }
  h3 {
    font-size: 15px; /* наприклад, 25px замість 35px */
  }
  h4 {
    font-size: 15px; /* наприклад, 25px замість 35px */
  }
  h5 {
    font-size: 15px; /* наприклад, 25px замість 35px */
  }
  p {
    font-size: 15px;
    text-indent: 20px; /* Отступ первой строки в пикселах */
  }
  footer {
    font-size: 15px;
  }
  table td {
    font-size: 15px;
    height: 15px; /* задаємо фіксовану висоту */
  }
  .tax-info {
  font-size: 15px;
}
}