.background-container {
    background-image: url('../src/aster_preview.png');
    background-size: cover; /* или 'contain', в зависимости от желаемого эффекта */
    background-position: center;
    height: 300px; /* высота контейнера */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* чтобы избежать выхода размытых частей за пределы контейнера */
}

.background-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: inherit; /* наследуем фоновое изображение */
    background-size: inherit;
    background-position: inherit;
    filter: blur(2px); /* размытие фона */
    z-index: 1; /* помещаем под текст */
}

.text-overlay {
    position: relative; /* меняем на relative, чтобы текст был поверх размытости */
    color: rgb(255, 255, 255); /* цвет текста */
    font-size: 7em; /* размер текста */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* тень для лучшей читаемости */
    z-index: 2; /* помещаем над размытым фоном */
}

.lang {
    float: right;
    margin-right: 10px;
}

.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    color: white; /* Цвет текста */
    text-align: center; /* Центрирование текста */
    padding: 10px 0; /* Отступы сверху и снизу */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Минимальная высота 100% высоты окна */
}

.container {
    flex: 1; /* Позволяет контейнеру занимать оставшееся пространство */
}