* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    --c1: white;
    --c2: black;

    background: #899BA7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    width: 100dvw;
    overflow: hidden;
}

main {
    position: relative;
    width: 100vmin;
    height: 100vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: blur(1px);
}


span {
   box-shadow: 0px 0.05vmin 0.5vmin white, 0px 0.1vmin 1vmin var(--c2);
    position: absolute;
    width: 1vmin;
    height: 1vmin;
}

span:nth-child(4n) {
    background: linear-gradient(to left, var(--c1), var(--c2), var(--c2), var(--c2), var(--c2), var(--c1));
}

span:nth-child(4n+1) {
    background: linear-gradient(to left, var(--c1), var(--c1), var(--c2), var(--c2));
}

span:nth-child(4n+2) {
    background: linear-gradient(to left, var(--c2), var(--c1), var(--c1), var(--c2));
}

span:nth-child(4n+3) {
    background: linear-gradient(to left, var(--c2), var(--c2), var(--c1), var(--c1));
}


span.half:nth-child(4n) {
    background: linear-gradient(to left, var(--c2), var(--c1), var(--c1), var(--c1), var(--c1), var(--c2));
}

span.half:nth-child(4n+1) {
    background: linear-gradient(to left, var(--c1), var(--c1), var(--c2), var(--c2));
}

span.half:nth-child(4n+2) {
    background: linear-gradient(to left, var(--c1), var(--c2), var(--c2), var(--c1));
}

span.half:nth-child(4n+3) {
    background: linear-gradient(to left, var(--c2), var(--c2), var(--c1), var(--c1));
}


span::before {
    content: '';
    position: absolute;
    top: 4%;
    left: 4%;
    width: 92%;
    height: 92%;
    border: thin solid white;
}

span::after {
    content: '';
    position: absolute;
    top: 2%;
    left: 2%;
    width: 96%;
    height: 96%;
    border: thin solid black;
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.circle {
    /* width: 100vw;
    height: 100vh; */
    transform-origin: top left;
    animation: rotate 36000s linear infinite;
}

.circle:nth-child(2n) {
    animation: rotate 35900s linear reverse infinite;
}