body {
    font-family: sans-serif;
    display: flex;
    gap: 20px;
    /* padding: 20px; */
    overflow: hidden;

    /* Новые свойства для центрирования */
    justify-content: center;
    /* Центрирование по горизонтали (ось X) */
    align-items: center;
    /* Центрирование по вертикали (ось Y) */

    /* Обязательно для того, чтобы центрирование работало по высоте */
    min-height: 100vh;
    /* Высота не меньше высоты окна */
}

#controls {
    width: 250px;
}

.hex {
    /* fill: #a0d2f2; */
    /* fill: #dfbea5c9; */
    stroke: #333;
    stroke-width: 2;
    transition: fill 0.2s;
}

.hex:hover {
    fill: #ffeb3b;
    cursor: pointer;
}

input,
button {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    box-sizing: border-box;
}

.hex-centered {
    /* Свойство order позволяет управлять порядком элементов во flex-контейнере.
       Если нужно, чтобы блок был поверх других элементов flex, ставим -1. */
    order: -1;
}

.hex-container {
    overflow: hidden;

}

.top-menuBar{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 8888;
    background: #fff;
}

#fullScreenOverlay{
    z-index: 9999;
}