@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader {
    position: relative;
    width: 300px;
    height: 300px;
    background: #c9d5e0;
    border-radius: 50px;
    box-shadow:
        30px 30px 30px-10pxrgba(0, 0, 0, 0.15),
        inset 15px 15px 10pxrgba(255, 255, 255, 0.75),
        -15px-15px 35pxrgba(255, 255, 255, 0.55),
        inset-1px-1px 10pxrgba(0, 0, 0, 0.2);

    .circle {
        position: absolute;
        inset: 35px;
        background: #acbaca;
        border-radius: 50%;
        box-shadow:
            5px5px15px#152b4a66,
            inset 5px5px5pxrgba(255, 255, 255, 0.55),
            -6px -6px10pxrgba(255, 255, 255, 1);
        background: linear-gradient(#2196f3, #e91e63);
        animation: animate 2s linear infinite;
    }

    .circle::before {
        content: '';
        position: absolute;
        inset: 4px;
        background: linear-gradient(#2196f3, #e91e63);
        border-radius: 50%;
        animation: animate 2s linear infinite;
    }

    .circle::after {
        content: '';
        position: absolute;
        inset: 35px;
        background: #acbaca;
        border-radius: 50%;
    }

    .circle span {
        position: absolute;
        inset: 4px;
        background: linear-gradient(#2196f3, #e91e63);
        border-radius: 50%;
        animation: animate 2s linear infinite;
        filter: blur(20px);
        z-index: 1000;
        mix-blend-mode: plus-lighter;
    }

    .circle span::before {
        content: '';
        position: absolute;
        inset: 40px;
        background: #bdcbdb;
        border-radius: 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .circle::before {
        animation: none;
    }
}