body, html {
    width: 100%;
    height: 100%;
    background: rgb(30, 30, 30);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    --pi: 3.14159265358979;
}

.spinner {
    position: relative;
    aspect-ratio: 1;
    width: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner .core {
    position: relative;
    aspect-ratio: 1;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proton, .neutron {
    position: absolute;
    width: 0.7rem;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: inset 1px -1px 7px black;
}

.proton::before, .neutron::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1;
    z-index: 10;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.3), transparent);
    transform: translate(20%, -10%);
}

.proton {
    background: hsl(240, 100%, 55%)
}

.neutron {
    background: hsl(0, 100%, 40%);
}

/*
DISTANCE : d = ?
ANGLE : pi/3
SHIFT X : d * cos(n * pi/3) = d / 2
SHIFT Y : d * sin(n * pi/3) = 
*/

.neutron[data-n="1"] {
    z-index: 1;
    transform:
        translateX(calc(cos(0 * var(--pi) / 3) * 0.5rem))
        translateY(calc(sin(0 * var(--pi) / 3) * 0.5rem));
}

.proton[data-n="2"] {
    z-index: 2;
    transform:
        translateX(calc(cos(1 * var(--pi) / 3) * 0.5rem))
        translateY(calc(sin(1 * var(--pi) / 3) * 0.5rem));
}

.neutron[data-n="3"] {
    z-index: 3;
    transform:
        translateX(calc(cos(2 * var(--pi) / 3) * 0.5rem))
        translateY(calc(sin(2 * var(--pi) / 3) * 0.5rem));
}

.proton[data-n="4"] {
    z-index: 4;
    transform:
        translateX(calc(cos(3 * var(--pi) / 3) * 0.5rem))
        translateY(calc(sin(3 * var(--pi) / 3) * 0.5rem));
}

.neutron[data-n="5"] {
    z-index: 5;
    transform:
        translateX(calc(cos(4 * var(--pi) / 3) * 0.5rem))
        translateY(calc(sin(4 * var(--pi) / 3) * 0.5rem));
}

.proton[data-n="6"] {
    z-index: 6;
    transform:
        translateX(calc(cos(5 * var(--pi) / 3) * 0.5rem))
        translateY(calc(sin(5 * var(--pi) / 3) * 0.5rem));
}

.neutron[data-n="7"] {
    z-index: 7;
}

.electron {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: 70%;
    aspect-ratio: 0.35;
    border-radius: 50%;
}

.electron::before {
    content: "";
    position: absolute;
    width: 0.35rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: black;
    offset-path: ellipse(50% 50% at 50% 50%);
    animation: orbit 4s linear infinite;
}

@keyframes orbit {
    to {
        offset-distance: 100%;
    }
}

.electron[data-n="2"] {
    transform: rotateZ(120deg);
}

.electron[data-n="3"] {
    transform: rotateZ(240deg);
}