body {
    margin: 0;
    background-color: #c0c0c0;
}
#pixel-container {
    width: 100vw;
    font-family: monospace;
}

#pixel-container span {
    display: inline-block;
    padding: 0px 3px;
    line-height: 1;
    will-change: background-color;
}
canvas {
    display: none;
}

.bg0 {
    background-color: #000000;
    color: #ffffff;
}
.bg1 {
    background-color: #0000ff;
    color: #ffffff;
}
.bg2 {
    background-color: #ff0000;
    color: #ffffff;
}
.bg3 {
    background-color: #808080;
    color: #ffffff;
}
.bg4 {
    background-color: #ff00ff;
    color: #000000;
}
.bg5 {
    background-color: #dddddd;
    color: #000000;
}
.bg6 {
    background-color: #00ff00;
    color: #000000;
}
.bg7 {
    background-color: #00ffff;
    color: #000000;
}
.bg8 {
    background-color: #ffff00;
    color: #000000;
}
.bg9 {
    background-color: #ffffff;
    color: #000000;
}

details#credits {
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 1rem;
    background-color: #c0c0c0;
    padding: 0.5rem;
    a:hover {
        text-decoration: none;
        color: #ff0;
        background-color: #000;
    }
}

details#credits summary {
    cursor: pointer;
    color: #000;
    background-color: #c0c0c0;
}

details#credits summary:hover {
    background-color: #ff0;
}
details#credits summary::marker {
    color: #f00;
    content: "⤊";
}
details#credits[open] summary::marker {
    content: "⤋";
}
li {
    list-style: none;
}
li::marker {
    color: #f00;
    content: "⇛ ";
}