/* Насктройки кнопок переключения эффектов страницы efects.html*/

body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Предотвращает появление полос прокрутки */
    background-color: #000; /* Фон страницы */
    color: #fff;
    font-family: Arial, sans-serif;
}

#controls {
    position: fixed;
    top: 20px;
    left: 30%;
    transform: translateX(-50%);
    z-index: 1000;
}

#controls button {
    margin: 0 5px;
    padding: 1px 30px;
    font-size: 16px;
    cursor: pointer;
    background: transparent; /* Прозрачный фон */
    color: #444444;            /* Белый цвет текста */
    border: 1px solid #111111; /* Белая граница (опционально) */
    transition: background 0.5s, color 0.5s; /* Плавный переход */
}

#controls button:hover {
    background: #888888; /* Непрозрачный фон при наведении */
    color: black;      /* Изменение цвета текста при наведении */
    /* Если добавили границу, можно её изменить или убрать при наведении */
    border: 1px solid black; /* Изменение цвета границы при наведении */
}

#effect-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Насктройки размеров таблицы страницы index.html */

         /* Устанавливаем высоту для html и body */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /* Определяем CSS-переменные для размеров */
        :root {
            --left-cell-width: 0%; /* Ширина левой ячейки */
            --right-cell-width: 100%; /* Ширина правой ячейки */
            --top-row-height: 95%; /* Высота верхнего ряда */
            --bottom-row-height: 10%; /* Высота нижней ячейки */
            --iframe-height: 100%; /* Высота iframe относительно родительской ячейки */
        }

        body {
            font-family: Arial, sans-serif;
            height: 100%;
        }

        table {
            width: 100%;
            height: 100%; /* Высота таблицы 100% от родителя (body) */
            border-collapse: collapse;
            table-layout: fixed; /* Для равномерного распределения столбцов */
        }

        td {
            border: 1px solid #000;
            padding: 10px;
            vertical-align: top;
            box-sizing: border-box;
        }

        /* Верхний ряд */
        tr.top-row {
            height: var(--top-row-height);
        }

        .left-cell {
            width: var(--left-cell-width);
            background-color: #f9f9f9;
        }

        .right-cell {
            width: var(--right-cell-width);
            background-color: #000000;
        }

        /* Нижняя ячейка */
        tr.bottom-row td.bottom-cell {
            height: var(--bottom-row-height);
            text-align: left;
            background-color: #000000;
			
        }

        /* Настройки для iframe */
        iframe {
            width: 100%;
            height: var(--iframe-height);
            border: none;
        }
		
		    /* Контейнер для области наведения и панели */
    .hover-container {
      position: relative;
      display: inline-block;
    }

    /* Небольшая область, которая всегда видна */
    .hover-trigger {
      width: 30px;
      height: 30px;
      background-color: #333;
      color: #777;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 4px;
    }

    /* Панель, которая выезжает */
    .hover-panel {
      position: absolute;
      top: 0;
      left: 35px;
      background-color: transparent;
      min-width: 160px;
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      border-radius: 4px;
      z-index: 1;
    }

    /* Видимость панели при наведении */
    .hover-container:hover .hover-panel {
      opacity: 1;
      visibility: visible;
    }

    /* Стилизация ссылок внутри панели */
    .hover-panel a {
      color: #555;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    /* Изменение фона при наведении на ссылку */
    .hover-panel a:hover {
      background-color: #ddd;
    }