var newSheet = document.styleSheets.item(document.styleSheets.length - 1);

function idToColor(id) {
    return 'hsl(' + (200 + ((id & 15) << 4)) + ', 100%, 94%)';
}
var newSheet = document.styleSheets.item(document.styleSheets.length - 1);
function addColor(stylesheet, id) {
    var c1 = idToColor(id);
    var c2 = idToColor(id + 16);
    var rot1 = Math.random() * 10 + 2;
    var rot2 = Math.random() * 10 + 2;
    var rot3 = Math.random() * 10 + 2;
    if (Math.random() > .5) {
        rot1 *= -1;
    }
    if (Math.random() > .5) {
        rot2 *= -1;
    }
    if (Math.random() > .5) {
        rot3 *= -1;
    }
        var keyFrames = `
@keyframes spinIt${id} {
    0% {
       background-color: ${c1};
        transform: rotateX(${rot2}deg) rotateY(${rot3}deg) rotateZ(${rot1}deg);
    }
    50% {
        background-color: ${c2};
        transform: rotateX(${rot1}deg) rotateY(${rot2}deg) rotateZ(${rot3}deg);
    }
    100% {
        background-color: ${c1};
        transform: rotateX(${rot2}deg) rotateY(${rot3}deg) rotateZ(${rot1}deg);
    }
}`;
    stylesheet.insertRule(keyFrames);
    var rule = `tr.id${id} {animation: spinIt${id} ${(Math.random() * 5000 + 300)}ms infinite linear;}`;
    console.log(keyFrames, rule);
    stylesheet.insertRule(rule);
}
var rules = {};
function addFor(selector) {
    var nodes = document.querySelectorAll(selector);
    for (var idx in nodes) {
        try {
            var node = nodes[idx];
          if (typeof(node) != 'object') continue;
            var id = node.id.split('-') [1];
            if (rules[id]) continue;
            rules[id] = true;
            addColor(newSheet, id);
        } catch (e) {
            console.error(e);
        }
    }
}
addFor('#messages tr.in, tr.adm');