@font-face {
        font-family: 'StirkaFontBold'; /* Choose a name for your font */
        src: url('./fonts/CeraRound/CeraRoundPro-Black.otf') format('opentype'); /* Path to your OTF file */
        font-weight: bold; /* Specify font weight if needed */
        font-style: normal; /* Specify font style if needed */
    }
    @font-face {
        font-family: 'StirkaFont'; /* Choose a name for your font */
        src: url('./fonts/CeraRound/CeraRoundPro-Regular.otf') format('opentype'); /* Path to your OTF file */
        font-weight: normal; /* Specify font weight if needed */
        font-style: normal; /* Specify font style if needed */
    }

.right {
    text-align: right;
    min-width: 250px;
}

@media (min-width: 1400px) {
  .top {
    font-size: 2em;
  }
}


        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            overflow: hidden;
            flex-direction: column;
            font-family: 'StirkaFont', Arial, sans-serif;
        }

        #logo {
            margin-right: 20px;
        }

        #datetime-container {
            flex-grow: 1;
            text-align: center;
            font-size: 24px;
            margin-right: 40px;
            font-weight: bold;
        }

        #info-text {
            margin: 40px 200px 50px 200px;
            font-size: 1.5em;
        }
        .top .info-image {
            height: 100%;
            overflow-y: auto;
        }
        .info-image {
            height: 100%;
        }
        #info-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
.info-video {
  display: flex;
  justify-content: center; /* по горизонтали */
  align-items: center;     /* по вертикали */
  width: 100vw;
  height: 100vh;
}


.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    font-size: calc(16px + 3vw); /* адаптивный размер шрифта */
}


.bottom-centered {
    position: absolute;
    bottom: 30px; /* отступ от низа */
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    font-size: calc(16px + 3vw);
}

video {
  max-width: 100vw;
  max-height: 70vh;
  width: auto;
  height: auto;
  display: block;
}
        .navigation {
            display: none;
            top: 0;
            position: absolute;
            left: 300px;
        }
        .row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .center {
            font-weight: bold;
        }
        button {
            padding: 5px 10px;
            cursor: pointer;
        }


                
        .block {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5em;
            font-weight: bold;
        }
        
        .top {
            flex-shrink: 0; /* Не сжимать */
            height: 140px;
            background-color: #231F46;
            color: white;
            display: flex;
            align-items: center;
            max-height: 140px;
            padding: 20px 20px;
            font-family: 'StirkaFontBold', Arial, sans-serif;
            text-transform: uppercase;
        }
        

        .middle {
            flex: 1; /* Растягивается на всю оставшуюся высоту */
            flex-grow: 1;
            background-color: #274292;
            color: white;
            padding: 20px;
            max-height: 80%;
            overflow: hidden; /* Предотвращает скроллинг, скрывая выходящие части */
            position: relative; /* Для позиционирования, если нужно */
        }
        
        /* Синусоидальная волнистая граница сверху для нижнего блока — повторяющийся гребень шириной 100 px */
.middle::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 20px; /* Высота волны */
    background-color: #231F46;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C16.7,20 33.3,20 50,60 C66.7,100 83.3,100 100,60 L100,120 L0,120 Z' fill='%23274292'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 100px 20px; /* Размер одного гребня волны */
}


        .info-image img {
            width: 100%; /* Растягивает на всю ширину */
            height: 100%; /* Растягивает на всю высоту */
            object-fit: cover; /* Растягивает по большей стороне, покрывая блок, сохраняя пропорции */
            display: block; /* Убирает лишние отступы */
        }



.bottom {
    color: white;
    background-color: #231F46;
    max-height: 60px;
    height: 60px; /* Фиксированная высота нижнего блока */
    flex-shrink: 0; /* Не сжимать */
    position: relative; /* Для позиционирования волны */
    display: flex; /* Flexbox для размещения элементов */
    justify-content: space-between; /* Распределение: лево-центр-право */
    align-items: center; /* Вертикальное центрирование */
    padding: 0 20px; /* Отступы по бокам для красоты */
    font-family: 'StirkaFontBold', Arial, sans-serif;
    font-size: 2em;
}

.bottom .left-text {
    flex: 1; /* Занимает левую часть */
    text-align: right; /* Выравнивание текста по правому краю */
    color: white;
    padding: 10px;
}

.bottom .logo {
    flex: 0 0 auto; /* Центр, не растягивается */
    text-align: center; /* Центрирование текста логотипа */
    color: white;
    font-size: 20px;
    font-weight: bold;
}

.bottom .right-text {
    flex: 1; /* Занимает правую часть */
    text-align: left; /* Выравнивание текста по левому краю */
    color: white;
    padding: 10px;
}

/* Синусоидальная волнистая граница сверху для нижнего блока — повторяющийся гребень шириной 100 px */
.bottom::before {
    content: "";
    position: absolute;
    top: -20px; /* Поднимаем волну выше блока */
    left: 0;
    width: 100%;
    height: 20px; /* Высота волны */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C16.7,20 33.3,20 50,60 C66.7,100 83.3,100 100,60 L100,120 L0,120 Z' fill='%23231F46'%3E%3C/path%3E%3C/svg%3E") repeat-x;
    background-size: 100px 20px; /* Размер одного гребня волны */
}

.square {
        width: 32px;
        height: 32px;
        margin: 0 32px;
        background: #6fbced;
    }