body{
	margin:0;
	padding:0;
	height:100vh;
	background-image:linear-gradient(40deg, #7FFFD4, #B192F9);
	background-size: 200% 100%; /* Ключевой момент! */
	transition: background-position 1s ease; /* Плавный переход */
	font-family: 'Comic Sans MS', cursive, sans-serif;
}
button{
	font-family: 'Comic Sans MS', cursive, sans-serif;
}
h1{
	text-align:center;	
}
#magic_info_left h3{
	text-align:center;
}
#magic_info_left_2 h3{
	text-align:center;
}
.main{
	z-index:2;
	margin-bottom:3%;
	margin-top:1.5%;
	float:right;
	padding:1%;
	border-radius:25px;
	width:70%;
	margin-right:14%;
	background-color:#ffffff;
}
.vertical-line{
	margin: 0 0 0 1%;
	float:right;
	width: 1%; /* Толщина полосы (можно изменить) */
	height: 100%; /* Высота полосы (можно задать в px, %, vh и т. д.) */
	background-color: black; /* Цвет полосы — чёрный */
	display: inline-block; /* Позволяет размещать полосу рядом с текстом/элементами */
}
.for_text_example{
	color:black;
	text-decoration:none;
}
.hidden{
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease, transform 1s ease;
}
.visible{
	opacity:1;
	transform: translateY(0);
}
.example:hover{
	border-radius:25px;
	background: linear-gradient(40deg, #C6E9F9, #B192F9);
}
#for_menu_grid{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
}
#for_menu{
	text-decoration:none;
	color:black;
}
#cyber-mod-button{
	width:11%;
    border-radius: 20px 0 0 20px; /* Закругление углов, как у левой кнопки */
    font-size:20pt; /* Такой же размер шрифта */
    position: fixed; /* Абсолютное позиционирование для размещения справа */
    top: 20%; /* Выравниваем по вертикали аналогично левой кнопке (отступ сверху) */
    right: 0.1; /* Отступ от правого края (соотнесён с margin-right у .main) */
    background-color: white; /* Фон, как у левого меню */
    z-index: 10; /* Слои: кнопка будет поверх других элементов */
	padding: 20px 20px;
    border: none;
    cursor: pointer;
    font-size: 23px;
	transition: transform 0.2s, box-shadow 0.2s; /* Плавность анимации */
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#cyber-mod-button-plusAndMinus{
	width:11%;
    border-radius: 20px 0 0 20px; /* Закругление углов, как у левой кнопки */
    font-size:20pt; /* Такой же размер шрифта */
    position: fixed; /* Абсолютное позиционирование для размещения справа */
    top: 20%; /* Выравниваем по вертикали аналогично левой кнопке (отступ сверху) */
    right: 0.1; /* Отступ от правого края (соотнесён с margin-right у .main) */
    background-color: white; /* Фон, как у левого меню */
    z-index: 10; /* Слои: кнопка будет поверх других элементов */
	padding: 20px 20px;
    border: none;
    cursor: pointer;
    font-size: 23px;
	transition: transform 0.2s, box-shadow 0.2s; /* Плавность анимации */
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#cyber-mod-button-HowDo{
	width:11%;
    border-radius: 20px 0 0 20px; /* Закругление углов, как у левой кнопки */
    font-size:20pt; /* Такой же размер шрифта */
    position: fixed; /* Абсолютное позиционирование для размещения справа */
    top: 20%; /* Выравниваем по вертикали аналогично левой кнопке (отступ сверху) */
    right: 0.1; /* Отступ от правого края (соотнесён с margin-right у .main) */
    background-color: white; /* Фон, как у левого меню */
    z-index: 10; /* Слои: кнопка будет поверх других элементов */
	padding: 20px 20px;
    border: none;
    cursor: pointer;
    font-size: 23px;
	transition: transform 0.2s, box-shadow 0.2s; /* Плавность анимации */
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.main-content {
	color: #9400D3;
}

#full-text, #compact-text {
  opacity: 1;
  visibility: visible;
  transition: 
    opacity 0.5s ease, 
    visibility 0.5s ease;
}

img {
  opacity: 1;
  transition: opacity 0.5s ease;
  display: inline; /* Исходное состояние */
}
.hide-on-click {
	opacity: 1;
	transition: opacity 0.5s ease;
}

body.compact-mode .hide-on-click {
	opacity: 0;
	pointer-events: none;
}
#cyber-mod-button:active {
	transform: translateY(2px); /* Имитация «нажатия» — кнопка чуть опускается */
	box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Тень становится плотнее при нажатии */
}
#cyber-mod-button-plusAndMinus:active {
  transform: translateY(2px); /* Имитация «нажатия» — кнопка чуть опускается */
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Тень становится плотнее при нажатии */
}
#cyber-mod-button-HowDo:active {
  transform: translateY(2px); /* Имитация «нажатия» — кнопка чуть опускается */
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Тень становится плотнее при нажатии */
}
.list-item {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 1;
  transform: translateY(0);
}

/* Стиль для кнопки при активном состоянии */
#cyber-mod-button-plusAndMinus.active {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.hidden_menu {
	pointer-events: none; /* Отключаем обработку событий мыши */
}
#magic_info_left{
	overflow-y: auto;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	padding: 0 0 0 1%;
	border-radius:20px 0 0 20px;
	top:43%;
	position:absolute;
	background-color: white;
	left:4%;
	width:10%;
	height:190px;
	transition: left 0.5s ease-in-out; /* Анимация при движении */
	opacity: 0; /* изначально полностью прозрачный */
	transform: translateX(-20%); /* изначально справа за экраном */
	transition: all 0.4s ease-in-out; /* плавная анимация всех свойств */
	pointer-events: none; /* отключаем взаимодействие, пока скрыт */
	z-index: 0; /* поверх других элементов */
}
#magic_info_left_3{
	overflow-y: auto;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	padding: 0 0 0 1%;
	border-radius:20px 0 0 20px;
	top:127%;
	position:absolute;
	background-color: white;
	left:4%;
	width:10%;
	height:190px;
	transition: left 0.5s ease-in-out; /* Анимация при движении */
	opacity: 0; /* изначально полностью прозрачный */
	transform: translateX(-20%); /* изначально справа за экраном */
	transition: all 0.4s ease-in-out; /* плавная анимация всех свойств */
	pointer-events: none; /* отключаем взаимодействие, пока скрыт */
	z-index: 0; /* поверх других элементов */
}
.info_container_magic_wow{
	font-size:13pt;
	overflow-y: auto; /* Включаем прокрутку */
}
.containerMagic{
	position: relative;
	overflow: hidden; /* Скрывает содержимое за пределами контейнера */
}
#hiddenText {
	color:#9400D3;
	opacity: 0; /* Изначально скрыт */
	padding: 0;
	margin: 0;
	line-height: normal;
	font-size: inherit;
	transition: opacity 0.5s ease; /* Плавный переход за 0.5 с */
	display: inline; /* Чтобы текст шёл в строку */
	pointer-events: none; /* Запрещаем клики и наведение */
	user-select: none; /* Запрещаем выделение текста */
}
#hiddenText2 {
	color:#9400D3;
	opacity: 0; /* Изначально скрыт */
	padding: 0;
	margin: 0;
	line-height: normal;
	font-size: inherit;
	transition: opacity 0.5s ease; /* Плавный переход за 0.5 с */
	display: inline; /* Чтобы текст шёл в строку */
	pointer-events: none; /* Запрещаем клики и наведение */
	user-select: none; /* Запрещаем выделение текста */
}
#hiddenText3 {
	color:#9400D3;
	opacity: 0; /* Изначально скрыт */
	padding: 0;
	margin: 0;
	line-height: normal;
	font-size: inherit;
	transition: opacity 0.5s ease; /* Плавный переход за 0.5 с */
	display: inline; /* Чтобы текст шёл в строку */
	pointer-events: none; /* Запрещаем клики и наведение */
	user-select: none; /* Запрещаем выделение текста */
}
#hiddenText4 {
	color:#9400D3;
	opacity: 0; /* Изначально скрыт */
	padding: 0;
	margin: 0;
	line-height: normal;
	font-size: inherit;
	transition: opacity 0.5s ease; /* Плавный переход за 0.5 с */
	display: inline; /* Чтобы текст шёл в строку */
	pointer-events: none; /* Запрещаем клики и наведение */
	user-select: none; /* Запрещаем выделение текста */
}
#hiddenText.visible {
	opacity: 1; /* Полностью виден */
	pointer-events: auto; /* Разрешаем взаимодействие */
	user-select: auto; /* Разрешаем выделение */
}
#hiddenText2.visible {
	opacity: 1; /* Полностью виден */
	pointer-events: auto; /* Разрешаем взаимодействие */
	user-select: auto; /* Разрешаем выделение */
}
#hiddenText3.visible {
	opacity: 1; /* Полностью виден */
	pointer-events: auto; /* Разрешаем взаимодействие */
	user-select: auto; /* Разрешаем выделение */
}
#hiddenText4.visible {
	opacity: 1; /* Полностью виден */
	pointer-events: auto; /* Разрешаем взаимодействие */
	user-select: auto; /* Разрешаем выделение */
}
.magic_info_title_wow{
	position: sticky; /* Фиксируем заголовок */
	top: 0; /* Позиция сверху */
	background-color: white; /* Совпадает с фоном, чтобы не было перекрытия */
	padding: 10px; /* Отступы для эстетики */
	z-index: 1; /* Заголовок будет поверх прокрутки */
}
#magic_info_left_2{
	overflow-y: auto;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	padding: 0 0 0 1%;
	border-radius:20px 0 0 20px;
	top:87%;
	position:absolute;
	background-color: white;
	left:4%;
	width:10%;
	height:190px;
	transition: left 0.5s ease-in-out; /* Анимация при движении */
	opacity: 0; /* изначально полностью прозрачный */
	transform: translateX(-20%); /* изначально справа за экраном */
	transition: all 0.4s ease-in-out; /* плавная анимация всех свойств */
	pointer-events: none; /* отключаем взаимодействие, пока скрыт */
	z-index: 0; /* поверх других элементов */
}
#magic_info_left_2.visible_magic {
	opacity: 1; /* полностью видимый */
	transform: translateX(-9%); /* на своём месте */
	pointer-events: auto; /* включаем взаимодействие */
}
#magic_info_left.visible_magic {
	opacity: 1; /* полностью видимый */
	transform: translateX(-9%); /* на своём месте */
	pointer-events: auto; /* включаем взаимодействие */
}
#magic_info_left_3.visible_magic {
	opacity: 1; /* полностью видимый */
	transform: translateX(-9%); /* на своём месте */
	pointer-events: auto; /* включаем взаимодействие */
}
.info_container_magic{
	font-size:13pt;
}
#menu{
	z-index:123;	
	text-align:center;
	position:fixed;
	font-size:20pt;
	margin-top:10%;
	float:left;
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
	background-color:white;
	width:13%;
	transition: border-radius 0.5s ease, transform 0.5s ease;
}
#menu-button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    font-size: 23px;
}
#mod-purpose{
	position:relative;
}
.arrow {
    margin-left: 5px;
    font-size: 16px;
	transition: transform 0.3s ease; /* Плавный поворот */
	display: inline-block; /* Для корректной работы transform */
}
.arrow.rotated {
    transform: rotate(180deg); /* Поворот на 180 градусов */
}
#menu-items {
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    border-radius: 0 0 20px 0px;
    box-shadow: 0 2px 0px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px); /* Смещение вверх */
    opacity: 0; /* Полная прозрачность — меню скрыто */
	pointer-events: none; /* Отключаем все взаимодействия */
    transition: transform 0.5s ease, opacity 0.5s ease;
    list-style: none;
}
#menu-items a {
    display: block;
    padding: 10px 20px;
    color: black;
    text-decoration: none;
    border-bottom: 1px solid #333;
}
/* Класс для открытого меню */
#menu-items.open {
    transform: translateY(0);
    opacity: 1;
	pointer-events: auto; /* Включаем взаимодействия */
}
#menu.open {
  border-bottom-right-radius: 0px; /* Возвращаем скругление при открытии */
}
/* Верхняя граница только для ПЕРВОГО пункта */
#menu-items a:first-child {
    border-top: 1px solid #333; /* Видимая верхняя граница */
}

/* Убираем нижнюю границу у ПОСЛЕДНЕГО пункта */
#menu-items a:last-child {
    border-bottom: none;
}
#vertical_line{
	border-radius:30px;
	width:0.3%;
	background-color:black;
}
#plus_and_minus{
	display:flex;
	gap: 3%;
}
#plus{
	width:49%;
}
#minus{
	width:49%;
}
.info_container{
	font-size:15pt;
}
.important{
	font-weight:bold;
}
#for_why_mods{
	font-size:15pt;
}
.footer{
	margin-left:40%;
}
.image_right_main{
	width:25%;
	float:right;
}
.for_image_four{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	grid-gap:1%;
}
.for_image_three{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:1%;
}
.for_image_sus{	
	width:100%;
	padding-top:13%;
}
.for_image_sus3{
	padding-top:8%;
	width:100%;
}
.for_image_sus4{
	padding-top:8%;
	height:88%;
	width:100%;
}
.for_image_small_sus{
	padding-left:32%;
	width:30%;
	padding-top:13%;
}
.for_image_sus2{
	width:70%;
	padding-top:13%;
}
.before_after{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:5%;
}