body {
  transition: background-color 0s ease, color 0.3s ease; /* Добавляем transition для фона и текста */
}

body.theme-transition {
  transition: none; /* Временно отключаем transition во время установки класса */

}body.light-theme {
  background-color: #171717;
}

body.light-theme .header {
  background-color: #1d1d1d;
}

body.light-theme .up_menu {
  background-color: #eeeeee;
}

body.light-theme .content {
  background-color: #171717;
}

body.light-theme .Black-box {
  background-color: #1d1d1d;
}

body.light-theme .content2 {
  background-color: #171717;
}

body.light-theme .white-box {
  background-color: #eeeeee;
}

body.light-theme .titel {
  color: #eeeeee;
  opacity: 1;
}

body.light-theme h2 {
  color: #eeeeee;
}

body.light-theme .subtitle {
  color: #eeeeee;
}

body.light-theme .Zag {
  color: #1d1d1d;
}

body.light-theme .Zag1 {
  color: #1d1d1d;
}

body.light-theme .instruction {
  color: #1d1d1d;
}

body.light-theme .subtitle1 {
  color: #1d1d1d;
}

body.light-theme .subtitle2 {
  color: #1d1d1d;
}

body.light-theme .subtitle3 {
  color: #eeeeee;
}

body.light-theme .content p {
  color: #eeeeee;
}

body.light-theme .link-button {
  color: #eeeeee;
}

body.light-theme #themeToggle {
  color: #eeeeee;
  background-color: #1d1d1d;
}





body.dark-theme {
  background-color: #ffffff;
}

body.dark-theme .header {
  background-color: #1d1d1d;
  border-bottom: 2px solid #2c2c2c;
  border-left: 2px solid #2c2c2c;
  border-right: 2px solid #2c2c2c;
}

body.dark-theme .up_menu {
  background-color: #eeece1;
  border: 2px solid #2c2c2c;
}

body.dark-theme .content {
  background-color: #ffffff;
}

body.dark-theme .Black-box {
  background-color: #eeece1;
  border: 2px solid #2c2c2c;
}

body.dark-theme .content2 {
  background-color: #ffffff;
}

body.dark-theme .white-box {
  background-color: #eeece1;
  border: 2px solid #2c2c2c;
}

body.dark-theme .titel {
  color: #5c4f82;
  opacity: 1;
}

body.dark-theme h2 {
  color: #1d1d1d;
}

body.dark-theme .subtitle {
  color: #d06904;
}

body.dark-theme .Zag {
  color: #1d1d1d;
}

body.dark-theme .Zag1 {
  color: #1d1d1d;
}

body.dark-theme .instruction {
  color: #1d1d1d;
}

body.dark-theme .subtitle1 {
  color: #1d1d1d;
}

body.dark-theme .subtitle2 {
  color: #1d1d1d;
}

body.dark-theme .content p {
  color: #1d1d1d;
}

body.dark-theme .link-button {
  color: #1d1d1d;
}

body.dark-theme #themeToggle {
  color: #eeece1;
  background-color: #1d1d1d;
  border: 2px solid #2c2c2c; /* Уточните, какой цвет или стиль нужен для границ */
}


.titel {
  margin: 0;
  opacity: 1; 
  font-size: 1.9em; /* Размер шрифта */
  text-align: left; /* Выравнивание по левому краю */
  font-weight: bold; /* Жирный шрифт */
  padding: 10px 0; /* Отступы сверху и снизу */
  padding-left: 20px; /* Увеличение отступа слева */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Тень для текста */
  font-family: "Verdana", sans-serif; /* Шрифт */
  text-transform: uppercase; /* Заглавные буквы */
  background: transparent; /* Убираем фон */
  border: none; 
  cursor: pointer; /* Добавьте этот стиль */
  text-decoration: none;
}
.boxed-text {
  border: 2px solid currentColor;
  padding: 15px;
  margin-top: 20px;
}


h2 {
  margin: 0;
  font-size: 0.75em; /* Размер шрифта */
  text-align: left; /* Выравнивание по левому краю */
  padding: 0 0 10px 0; /* Отступы сверху и снизу, слева и справа */
  padding-left: 22px; /* Увеличиваем отступ слева для смещения текста */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Тень для текста */
  font-family: "Verdana", sans-serif; /* Шрифт */
}
.subtitle {
  display: block;
  margin: 0;
  font-weight: bold;
  font-size: 0.8em; /* Размер шрифта */
  text-align: left; /* Выравнивание по левому краю */
  padding: 0 0 0 0; /* Отступы сверху и снизу, слева и справа */
  padding-left: 22px; /* Увеличиваем отступ слева для смещения текста */
  text-shadow: 0.2px 0.2px 0.2px rgba(0, 0, 0, 0.3); /* Тень для текста */
  font-family: "Verdana", sans-serif; /* Шрифт */
}
.Zag {
  margin: 0px;
  font-weight: bold;
  font-size: 1.2em; /* Размер шрифта */
  text-align: left; /* Выравнивание по левому краю */
  padding: 0 0 0 0; /* Отступы сверху и снизу, слева и справа */
  padding-left: 22px; /* Увеличиваем отступ слева для смещения текста */
  text-shadow: 0.2px 0.2px 0.2px rgba(0, 0, 0, 0.3); /* Тень для текста */
  font-family: "Verdana", sans-serif; /* Шрифт */
}
.Zag1 {
  display: block;
  margin: 0 0 1.5vw 2vw;
  font-weight: bold; /*Жирный шрифт*/
  font-size: 1em; /* Размер шрифта */
  text-align: left; /* Выравнивание по левому краю */
  padding: 0; /* Отступы сверху и снизу, слева и справа */
  text-shadow: 0.2px 0.2px 0.2px rgba(0, 0, 0, 0.3); /* Тень для текста */
  font-family: "Verdana", sans-serif; /* Шрифт */
}
.instruction {
  line-height: 1.3vw;
  margin: 0 0 1vw 1vw;
  text-align: center;
  font-size: 1em; /* Размер шрифта */
  padding: 10px 10px 10px 10px; /* Отступы сверху и снизу, слева и справа */
  text-shadow: 0.2px 0.2px 0.2px rgba(0, 0, 0, 0.3); /* Тень для текста */
  font-family: "Verdana", sans-serif; /* Шрифт */
}
.image_inst {
  display: flex;
}
.subtitle1 {
  display: block;
  margin: 0;
  font-weight: bold;
  font-size: 0.9em; /* Размер шрифта */
  text-align: left; /* Выравнивание по левому краю */
  padding: 5px 0 0 0; /* Отступы сверху и снизу, слева и справа */
  padding-left: 22px; /* Увеличиваем отступ слева для смещения текста */
  text-shadow: 0.2px 0.2px 0.2px rgba(0, 0, 0, 0.3); /* Тень для текста */
  font-family: "Verdana", sans-serif; /* Шрифт */
}
.subtitle2 {
  display: block;
  text-decoration: underline;
  margin: 0;
  font-weight: bold;
  font-size: 0.9em; /* Размер шрифта */
  text-align: left; /* Выравнивание по левому краю */
  padding: 5px 0 0 0; /* Отступы сверху и снизу, слева и справа */
  padding-left: 22px; /* Увеличиваем отступ слева для смещения текста */
  text-shadow: 0.2px 0.2px 0.2px rgba(0, 0, 0, 0.3); /* Тень для текста */
  font-family: "Verdana", sans-serif; /* Шрифт */
}
.subtitle3 {
  display: block;
  margin: 0;
  font-weight: bold;
  font-size: 0.9em; /* Размер шрифта */
  text-align: left; /* Выравнивание по левому краю */
  padding: 5px 0 0 0; /* Отступы сверху и снизу, слева и справа */
  padding-left: 22px; /* Увеличиваем отступ слева для смещения текста */
  text-shadow: 0.2px 0.2px 0.2px rgba(0, 0, 0, 0.3); /* Тень для текста */
  font-family: "Verdana", sans-serif; /* Шрифт */
}
.content p {
  margin: 0;
  font-size: 1.5em; /* Размер шрифта */
  text-align: left; /* Выравнивание по левому краю */
  padding: 2vw 2vw 3vw 0vw; /* Отступы сверху и снизу, слева и справа */
  padding-left: 3.2vw; /* Увеличиваем отступ слева для смещения текста */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Тень для текста */
  font-family: "Verdana", sans-serif; /* Шрифт */
}
#themeToggle{
  font-size: 1em;
  font-family: "Verdana", sans-serif; /* Шрифт */
  text-align: right;
  justify-content: right;
  border: none;  
  margin: 0 0 5.3% 0;
  border-radius: 0.4vw 0 0 0.4vw;
}
.link-button {
  display: block;
  text-decoration: none;
  text-align: left;
  font-size: 1em;
  padding: 0.5vw 0 0.5vw 0;
  padding-left: 3.2vw;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-family: "Verdana", sans-serif;
  position: relative;
  font-weight: bold;
}
.link-button_twitebox{
  display: block;
  text-decoration: none;
  text-align: left;
  font-size: 1em;
  padding: 0.5vw 0 0.5vw 0;
  padding-left: 3.2vw;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-family: "Verdana", sans-serif;
  position: relative;
  font-weight: bold;
}

.link-button::before {
  content: "";
  position: absolute;
  margin: 4px;
  width: 17px;
  height: 17px;
  background-size: cover;
  opacity: 0;
}
.link-button::after {
  content: "";
  position: absolute;
  margin: 4px;
  width: 35px;
  height: 35px;
  background-size: cover;
  opacity: 0;
}

.link-button::before {
  left: 1.4vw;
  background-image: url("Images/lashLEFT.png");
}

.link-button::after {
  background-image: url("Images/lashRIGHT.png");
}

.link-button:hover {
  background-color: #484848; /* Цвет фона при наведении */
}
.link-button:hover::before,
.link-button:hover::after {
  opacity: 1;
  transform: translateX(10px);
}

.button_Contact {
  width: 10px; /* Ширина картинки */
  height: auto;
}