* {
    --rev1: 10s;
}

.atom-container {
    display: grid;
    place-content: center;
    padding: 2em;
    animation: revMinor calc(var(--rev1) / 2) linear infinite;

    .circle {
        border-radius: 50%;
        aspect-ratio: 1;
    }

    .nucleus {
        display: grid;
        width: 100px;
        background-image: linear-gradient(45deg, hsl(120, 90%, 77%), green);
        position: relative;
    }

    .electron1 {
        position: absolute;
        transform: translate(-50%, -50%);
        width: 30px;
        /* aspect-ratio: 1 / 1; */
        /* background-color: red; */
        background: linear-gradient(#f34242, #c70a0a);
        animation: revolution var(--rev1) linear infinite;
    }
    .electron2 {
        position: absolute;
        width: 30px;
        /* aspect-ratio: 1 / 1; */
        background: linear-gradient(hwb(251 26% 5%), #0a23c7);
        right: 0;
        top: 50%;
        transform: translate(100%);
    }
}

@keyframes revolution {
    0% {
        left: 0;
        top: 0;
        z-index: 1;
    }

    50% {
        left: 100%;
        top: 100%;
        z-index: 1;
    }

    52% {
        z-index: -1;
    }

    100% {
        left: 0;
        top: 0;
        z-index: -1;
    }
}

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

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