*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #374151;
    height: 100vh;
    overflow: hidden;
}

#box-size-placeholder {
    /* should be same size as .box */
    width: 12vmin;
}

.box {
    width: 12vmin;
    height: 12vmin;
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    box-shadow: 2px 2px 10px #212121;
}

.box[data-status="active"] {
    display: block;
}

.box[data-status="inactive"] {
    display: none;
}

.box:nth-of-type(12n) {
    background-color: #ff8080;
}

.box:nth-of-type(12n + 1) {
    background-color: #ffbf80;
}

.box:nth-of-type(12n + 2) {
    background-color: #ffff80;
}

.box:nth-of-type(12n + 3) {
    background-color: #bfff80;
}

.box:nth-of-type(12n + 4) {
    background-color: #80ff80;
}

.box:nth-of-type(12n + 5) {
    background-color: #80ffbf;
}

.box:nth-of-type(12n + 6) {
    background-color: #80ffff;
}

.box:nth-of-type(12n + 7) {
    background-color: #80bfff;
}

.box:nth-of-type(12n + 8) {
    background-color: #8080ff;
}

.box:nth-of-type(12n + 9) {
    background-color: #bf80ff;
}

.box:nth-of-type(12n + 10) {
    background-color: #ff80ff;
}

.box:nth-of-type(12n + 11) {
    background-color: #ff80bf;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0lBR0ksc0JBQXNCO0FBQzFCOztBQUVBO0lBQ0ksU0FBUztJQUNULHlCQUF5QjtJQUN6QixhQUFhO0lBQ2IsZ0JBQWdCO0FBQ3BCOztBQUVBO0lBQ0ksZ0NBQWdDO0lBQ2hDLGFBQWE7QUFDakI7O0FBRUE7SUFDSSxhQUFhO0lBQ2IsY0FBYztJQUNkLGtCQUFrQjtJQUNsQixnQ0FBZ0M7SUFDaEMsa0JBQWtCO0lBQ2xCLGdDQUFnQztBQUNwQzs7QUFFQTtJQUNJLGNBQWM7QUFDbEI7O0FBRUE7SUFDSSxhQUFhO0FBQ2pCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCOztBQUVBO0lBQ0kseUJBQXlCO0FBQzdCIiwiZmlsZSI6InN0eWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIiosXG4qOjpiZWZvcmUsXG4qOjphZnRlciB7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbn1cblxuYm9keSB7XG4gICAgbWFyZ2luOiAwO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICMzNzQxNTE7XG4gICAgaGVpZ2h0OiAxMDB2aDtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xufVxuXG4jYm94LXNpemUtcGxhY2Vob2xkZXIge1xuICAgIC8qIHNob3VsZCBiZSBzYW1lIHNpemUgYXMgLmJveCAqL1xuICAgIHdpZHRoOiAxMnZtaW47XG59XG5cbi5ib3gge1xuICAgIHdpZHRoOiAxMnZtaW47XG4gICAgaGVpZ2h0OiAxMnZtaW47XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpO1xuICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgICBib3gtc2hhZG93OiAycHggMnB4IDEwcHggIzIxMjEyMTtcbn1cblxuLmJveFtkYXRhLXN0YXR1cz1cImFjdGl2ZVwiXSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG59XG5cbi5ib3hbZGF0YS1zdGF0dXM9XCJpbmFjdGl2ZVwiXSB7XG4gICAgZGlzcGxheTogbm9uZTtcbn1cblxuLmJveDpudGgtb2YtdHlwZSgxMm4pIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmY4MDgwO1xufVxuXG4uYm94Om50aC1vZi10eXBlKDEybiArIDEpIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZiZjgwO1xufVxuXG4uYm94Om50aC1vZi10eXBlKDEybiArIDIpIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZjgwO1xufVxuXG4uYm94Om50aC1vZi10eXBlKDEybiArIDMpIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjYmZmZjgwO1xufVxuXG4uYm94Om50aC1vZi10eXBlKDEybiArIDQpIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjODBmZjgwO1xufVxuXG4uYm94Om50aC1vZi10eXBlKDEybiArIDUpIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjODBmZmJmO1xufVxuXG4uYm94Om50aC1vZi10eXBlKDEybiArIDYpIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjODBmZmZmO1xufVxuXG4uYm94Om50aC1vZi10eXBlKDEybiArIDcpIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjODBiZmZmO1xufVxuXG4uYm94Om50aC1vZi10eXBlKDEybiArIDgpIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjODA4MGZmO1xufVxuXG4uYm94Om50aC1vZi10eXBlKDEybiArIDkpIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjYmY4MGZmO1xufVxuXG4uYm94Om50aC1vZi10eXBlKDEybiArIDEwKSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmODBmZjtcbn1cblxuLmJveDpudGgtb2YtdHlwZSgxMm4gKyAxMSkge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNmZjgwYmY7XG59XG4iXX0= */