.number-container.active {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
}
@media (min-width: 800px) {
    .number-container.active {
        animation: moveToCornerLarge 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    }
}

@media (max-width: 799px) {
    .number-container.active {
        animation: moveToCornerSmall 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    }
}
.number-container.active .number {
    font-size: 120px;
    font-weight: bold;
    color: #ff3366;
    white-space: nowrap;
    animation: numberAnimation 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards,
    colorChange 3s ease infinite,
    glowEffect 2s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255, 51, 102, 0.8);
}

@media (max-width: 800px) {
    .number-container.active .number {
        font-size: 70px;
    }
}

@media (max-width: 500px) {
    .number-container.active .number {
        font-size: 50px;
    }
}

@keyframes moveToCornerLarge {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(2.5) rotate(360deg);
    }
    100% {
        right: 0%;
        top: 150px;
        transform: translate(-50%, 0) scale(0.5) rotate(720deg);
    }
}
@keyframes moveToCornerSmall {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(2.5) rotate(360deg);
    }
    100% {
        right: 0%;
        transform: translate(-50%, 0) scale(0.5) rotate(720deg);
        top: 250px;
    }
}

@keyframes numberAnimation {
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    20% {
        opacity: 1;
        filter: blur(0);
    }
    50% {
        filter: blur(0);
    }
    90% {
        filter: blur(2px);
    }
    100% {
        filter: blur(0);
    }
}

@keyframes colorChange {
    0% {
        color: #ff3366;
    }
    33% {
        color: #33ff66;
    }
    66% {
        color: #3366ff;
    }
    100% {
        color: #ff3366;
    }
}

@keyframes glowEffect {
    0% {
        text-shadow: 0 0 20px rgba(255, 51, 102, 0.8);
    }
    50% {
        text-shadow: 0 0 40px rgba(255, 51, 102, 0.4),
        0 0 60px rgba(255, 51, 102, 0.6),
        0 0 80px rgba(255, 51, 102, 0.8);
    }
    100% {
        text-shadow: 0 0 20px rgba(255, 51, 102, 0.8);
    }
}