body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden; /* Предотвращаем появление полос прокрутки */
    background-color: #f0f0f0;
}

.container {
    position: relative; /* Для позиционирования мухи */
    display: inline-block;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    margin: auto;
    width: 300px; /* Примерная ширина контейнера */
    z-index: 1; /* Отображаем контейнер поверх мухи */
}

h1 {
    font-size: 2em;
    margin: 0;
    width: 100px; /* Примерная ширина контейнера */
}

p {
    font-size: 1.5em;
    margin: 0;
}

#counter {
    font-weight: bold;
    color: #ff6347;
    opacity: 0;
}

#fly {
    position: fixed; /* Позиционируем муху абсолютно по отношению к окну браузера */
    top: 50%; /* Положение в вертикальной плоскости */
    left: 50%; /* Положение в горизонтальной плоскости */
    transform: translate(-50%, -50%) rotate(0deg); /* Центрируем муху и устанавливаем начальный поворот */
    width: 526px; /* Ширина мухи */
    height: 342px; /* Высота мухи */
    z-index: 1; /* Размещаем муху поверх других элементов */
    animation: flyAnimation 5s infinite; /* Применяем анимацию полета */
}

@keyframes flyAnimation {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
        top: 50%; /* Исходное положение мухи по вертикали */
    }
    25% {
        transform: translate(-50%, -50%) rotate(-10deg);
        top: 40%; /* Полет вверх, муха на 40% от верха экрана */
    }
    50% {
        transform: translate(-50%, -50%) rotate(0deg);
        top: 50%; /* Возврат в исходное положение */
    }
    75% {
        transform: translate(-50%, -50%) rotate(10deg);
        top: 60%; /* Полет вниз, муха на 60% от верха экрана */
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg);
        top: 50%; /* Возврат в исходное положение */
    }
}
.coin {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('/static/media/coin.png'); /* Путь к изображению монеты */
    background-size: cover;
    z-index: 3; /* Размещаем монеты поверх контейнера и мухи */
}