@keyframes moveclouds {
    0% {
        margin-left: 1000px
    }

    to {
        margin-left: -1000px
    }
}

@-webkit-keyframes movingleftright1 {
    0% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0)
    }

    40% {
        -webkit-transform: translateX(50px) translateY(-50px);
        transform: translateX(50px) translateY(-50px)
    }

    75% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px)
    }

    to {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@keyframes movingleftright1 {
    0% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0)
    }

    40% {
        -webkit-transform: translateX(50px) translateY(-50px);
        transform: translateX(50px) translateY(-50px)
    }

    75% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px)
    }

    to {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@-webkit-keyframes movingleftright2 {
    0% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0)
    }

    40% {
        -webkit-transform: translateX(-50px) translateY(50px);
        transform: translateX(-50px) translateY(50px)
    }

    75% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px)
    }

    to {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@keyframes movingleftright2 {
    0% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0)
    }

    40% {
        -webkit-transform: translateX(-50px) translateY(50px);
        transform: translateX(-50px) translateY(50px)
    }

    75% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px)
    }

    to {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@-webkit-keyframes movingleftright3 {
    0% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0)
    }

    40% {
        -webkit-transform: translateX(100px) translateY(-50px);
        transform: translateX(100px) translateY(-50px)
    }

    75% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px)
    }

    to {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@keyframes movingleftright3 {
    0% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0)
    }

    40% {
        -webkit-transform: translateX(100px) translateY(-50px);
        transform: translateX(100px) translateY(-50px)
    }

    75% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px)
    }

    to {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0)
    }
}

@-webkit-keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 #0c1fd7
    }

    70% {
        box-shadow: 0 0 0 20px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 #0c1fd7
    }

    70% {
        box-shadow: 0 0 0 20px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes pulse5 {
    0% {
        box-shadow: 0 0 0 0 #7885ffb5
    }

    70% {
        box-shadow: 0 0 0 11px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

@-webkit-keyframes movinground {
    0%,to {
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1)
    }

    60% {
        -webkit-transform: rotate(180deg) scale(1.5);
        transform: rotate(180deg) scale(1.5)
    }

    80% {
        -webkit-transform: rotate(90deg) scale(.6);
        transform: rotate(90deg) scale(.6)
    }
}

@keyframes movinground {
    0%,to {
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1)
    }

    60% {
        -webkit-transform: rotate(180deg) scale(1.5);
        transform: rotate(180deg) scale(1.5)
    }

    80% {
        -webkit-transform: rotate(90deg) scale(.6);
        transform: rotate(90deg) scale(.6)
    }
}

@-webkit-keyframes pulse2 {
    0% {
        box-shadow: 0 0 0 0 #5edfff
    }

    70% {
        box-shadow: 0 0 0 8px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

@-webkit-keyframes pulse6 {
    0% {
        box-shadow: 0 0 0 0 #e30000
    }

    70% {
        box-shadow: 0 0 0 4px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes pulse2 {
    0% {
        box-shadow: 0 0 0 0 #ff0026
    }

    70% {
        box-shadow: 0 0 0 8px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes pulse3 {
    0% {
        box-shadow: 0 0 0 0 #03add86e
    }

    70% {
        box-shadow: 0 0 0 10px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes pulse4 {
    0% {
        box-shadow: 0 0 0 0 #03add86e
    }

    70% {
        box-shadow: 0 0 0 20px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

    @keyframes popupShow {
            from {transform: scale(0.8); opacity: 0;}
            to {transform: scale(1); opacity: 1;}
        }

        /* Yılbaşı süsleri */
        .popup-content::before {
            content: 'logo';
            font-size: 50px;
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
        }
@keyframes colorChange {
    0% {
        color: #ff0000; /* Kırmızı */
    }
    25% {
        color: #ff9900; /* Turuncu */
    }
    50% {
        color: #33cc33; /* Yeşil */
    }
    75% {
        color: #3399ff; /* Mavi */
    }
    100% {
        color: #ff0000; /* Kırmızı */
    }
}

.animate-rank-210 {
    animation: colorChange 5s infinite; /* 5 saniyelik döngü */
    font-weight: bold;  /* Yazıyı kalın yapıyoruz */
    font-size: 0.75em;   /* Font boyutunu biraz büyütüyoruz */
    text-transform: uppercase;  /* Yazıyı büyük harfe dönüştürür */
    letter-spacing: 1px;  /* Harfler arası boşluk ekler */
}