body {
    margin: 0;
    min-height: 100vh;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    perspective: 10em;
    perspective-origin: 50% calc(50% - 2em);
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    width: 20em;
    aspect-ratio: 1/1;
    animation: expand 1s infinite linear;
}

.neon {
    --color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    border: .1em solid #fff;
    box-shadow: 0 0 .2em #fff,
        0 0 .2em #fff,
        0 0 2em var(--color),
        0 0 .8em var(--color),
        0 0 2.8em var(--color),
        inset 0 0 1.3em var(--color);
    -webkit-box-reflect: below 2em linear-gradient(to bottom, 
        rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    transform: translateZ(calc(-10em * var(--order)));
    transition: 2s;
}

@keyframes expand {
    to {
        transform: translateZ(10em);
    }
}

@keyframes colorChange {
    0% {
        --color: #fff;
    }
    25% {
        --color: aqua;
    }
    50% {
        --color: yellow;
    }
    75% {
        --color: pink;
    }
    100% {
        --color: #fff;
    }
}