.app {
    margin: auto;
    max-width: 600px;
}

.cell {
    position: relative;
    /* border: 5px solid transparent; */
    border-radius: 5px;
    cursor: pointer;
}

.cell::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 5px; /* dikte van border */
    border-radius: 5px;
    background: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red);
    -webkit-mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
}

.playing::before {
    opacity: 1;
    animation: 1s rotate linear infinite;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}