#starCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
}

.circle-container {
    display: flex;
    align-items: center;
    align-content: center;
    filter: blur(10px);
    position: absolute;
    z-index: -50;
    height: 100%;
}

.back-circle {
    will-change: transform;
    position: absolute;
    flex: none;
    width: clamp(0px, 80vw, 400px);
    height: clamp(0px, 80vw, 400px);
    border-radius: 100%;
    translate: -50% 0;
    animation: rotate-big-circle 10s steps(360) infinite;
    background-color: black;
    z-index: -50;
}

.big-circle {
    will-change: transform;
    position: absolute;
    flex: none;
    width: clamp(0px, 80vw, 400px);
    height: clamp(0px, 80vw, 400px);
    background: linear-gradient(229deg, #656565 0%, rgba(255, 255, 255, 0) 37%, rgba(255, 255, 255, 0) 63%, #656565 100%);
    border-radius: 100%;
    translate: -50% 0;
    animation: rotate-big-circle 10s steps(360) infinite;
    background-color: black;
    opacity: 0.6;
    z-index: -45;
}

.small-circle {
    will-change: transform;
    position: absolute;
    flex: none;
    width: clamp(0px, 60vw, 300px);
    height: clamp(0px, 60vw, 300px);
    background: linear-gradient(142deg, #ffffff 0%, rgba(255, 255, 255, 0) 37%, rgba(255, 255, 255, 0) 63%, #ffffff 100%);
    border-radius: 100%;
    translate: -50% 0;
    animation: rotate-small-circle 12s steps(360) infinite;
    opacity: 0.6;
    z-index: -45;
}

@keyframes rotate-big-circle {
    from { rotate: 0deg; }
    to { rotate: -360deg; }
}

@keyframes rotate-small-circle {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}