:root {
    --linear: linear-gradient(90deg, #C82CFF -4.52%, #6E4AFF 96.66%);
    --primary: #53CAFD;
    --secondary: #E43BFF;
    --primary-hover: #21bafc;
    --primary-dark: #027fb5;
    --rgba-primary-1: rgba(83, 202, 253, 0.1);
    --rgba-primary-2: rgba(83, 202, 253, 0.2);
    --rgba-primary-3: rgba(83, 202, 253, 0.3);
    --rgba-primary-4: rgba(83, 202, 253, 0.4);
    --rgba-primary-5: rgba(83, 202, 253, 0.5);
    --rgba-primary-6: rgba(83, 202, 253, 0.6);
    --rgba-primary-7: rgba(83, 202, 253, 0.7);
    --rgba-primary-8: rgba(83, 202, 253, 0.8);
    --rgba-primary-9: rgba(83, 202, 253, 0.9);
    --font-family-base: Roboto, sans-serif;
    --font-family-title: Roboto, sans-serif;
    --title: #000;
    --text-color: #fff;
    --bs-body-color: rgba(255, 255, 255, 0.6);
    --bs-card-bg: rgba(94, 62, 208, 0.6);
    --bg-circle: linear-gradient(131.92deg, #5811CF 14.55%, rgba(49, 24, 152, 0.5) 95.62%);
}

.animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

    .animation .circle {
        width: 259px;
        height: 259px;
        display: block;
        border-radius: 50%;
        background: var(--bg-circle);
        position: fixed;
    }

    .animation .one {
        left: 35%;
        top: -16px;
        animation: MoveX 5s ease infinite;
    }

    .animation .two {
        left: -11px;
        top: 205px;
        animation: MoveY 5s ease infinite;
    }

    .animation .three {
        left: 80%;
        top: 80%;
        animation: MoveX 6s ease infinite;
    }

    .animation .circle.four {
        width: 387px;
        height: 387px;
        display: block;
        border-radius: 50%;
        background: #6F1898;
        opacity: 0.8;
        position: fixed;
        right: -5%;
        top: -15%;
        filter: blur(70px);
    }

    .animation .line-1 {
        position: absolute;
        top: -5px;
        left: -255px;
        z-index: -1;
    }

        .animation .line-1 svg {
            width: 100%;
        }

    .animation .line-2 {
        position: absolute;
        top: 80%;
        /*left: 20px;*/
        right: -20px;
        z-index: -1;
    }

        .animation .line-2 svg {
            width: 100%;
        }

@keyframes MoveX {
    100%, 0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -70px);
    }
}

@keyframes MoveY {
    100%, 0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-70px);
    }
}