body {
    margin: 0;
    padding: 0rem;

    background: rgb(30, 30, 30);
}

#background {
    position: fixed;
    top: 1rem;
    left: 1rem;
    height: calc(100vh - 2rem);
    width: calc(100vw - 2rem);
    z-index: -1;
}

#background > div {
    overflow: hidden;
}

#background > div > div {
    float: left;
    width: 8px;
    height: 8px;
    margin: 1px;
}

#background > div > div[data-r="0"][data-n="0"]:not([data-b="0"]) {
    background-color: hsl(240, 100%, 50%);
}

#background > div > div[data-b="0"][data-n="0"]:not([data-r="0"]) {
    background-color: hsl(0, 100%, 50%);
}

#background > div > div[data-b="0"][data-r="0"]:not([data-n="0"]) {
    background-color: hsl(0, 0%, 50%);
}

#background > div > div[data-r="0"][data-n="0"][data-b="1"] {
    background-color: hsl(240, 100%, 25%);
}

#background > div > div[data-b="0"][data-n="0"][data-r="1"] {
    background-color: hsl(0, 100%, 25%);
}

#background > div > div[data-b="0"][data-r="0"][data-n="1"] {
    background-color: hsl(0, 0%, 25%);
}

#background > div > div:not([data-b="0"]):not([data-r="0"]) {
    background-color: hsl(300, 100%, 50%);
}

#background > div > div:not([data-b="0"]):not([data-n="0"]) {
    background-color: hsl(240, 100%, 75%);
}

#background > div > div:not([data-r="0"]):not([data-n="0"]) {
    background-color: hsl(0, 100%, 75%);
}

#background > div > div:not([data-b="0"]):not([data-r="0"]):not([data-n="0"]) {
    background-color: hsl(300, 100%, 75%);
}

#counter {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    padding: 1rem;
}

#counter, main > div {
    border: 1px solid gray;
    background: rgba(64, 64, 64, 0.9);
    color: white;
}

main > div {
    margin: 1rem;
    padding: 1rem;
}

ul.reactions {
    list-style: none;
    padding: 0;
    margin: 1rem;
}

.b {
    color: blue;
}

.r {
    color: red;
}

.n {
    color: white;
}