body {
    background: #1C1B1F;
    color: #B0BEC5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.led-table td {
    border: 2px solid #B0BEC5;
}

.led-table {
    border-collapse: collapse;
    min-width: 325px;
}

@media (max-width: 600px) {
    .led-table {width: 95vw;}
}

@media (min-width: 600px) {
    .led-table {width: 95vw;}
}

@media (min-width: 768px) {
    .led-table {width: 90vw;}
}

@media (min-width: 992px) {
    .led-table {width: 80vw;}
}

@media (min-width: 1200px) {
    .led-table {width: 75vw;}
}

@media (min-width: 1920px) {
    .led-table {width: 50vw;}
}

.section-table td {
    border: 0;
    vertical-align: top;
}

.has-color-description {
    width: 100%;
}

.has-color-description td:last-child {
    text-align: right;
    padding-right: 10px;
}

.bold {
    font-weight: bold;
}

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}

.orange {
    background-color: orange;
}

.yellow {
    background-color: yellow;
}

.green {
    background-color: green;
}

.cyan {
    background-color: cyan;
}

.white {
    background-color: white;
}

.magenta {
    background-color: magenta;
}

.black {
    background-color: black;
}

.blink {
    animation: blink 1000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.vivid-led {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.fast100 {
    animation: blink 100ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.fast50 {
    animation: blink 50ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.fast {
    animation: blink 500ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.slow {
    animation: blink 2000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.double-blink-red {
    animation: double-blink-red 2000ms infinite;
    animation-timing-function: steps(3, jump-none);
}

.double-blink-orange {
    animation: double-blink-orange 2000ms infinite;
    animation-timing-function: steps(3, jump-none);
}

.double-blink-green {
    animation: double-blink-green 2000ms infinite;
    animation-timing-function: steps(3, jump-none);
}

.offset-orange-a {
    animation: offset-orange-A 1000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.offset-orange-b {
    animation: offset-orange-B 1000ms infinite;
    animation-timing-function: steps(3, jump-none);
}

.offset-red-a {
    animation: offset-red-A 1000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.offset-red-b {
    animation: offset-red-B 1000ms infinite;
    animation-timing-function: steps(3, jump-none);
}

.fast-strobe-red {
    animation: fast-strobe-red 333ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.fast-strobe-orange {
    animation: fast-strobe-orange 333ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.fast-strobe-green {
    animation: fast-strobe-green 333ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.blink-white {
    animation: blink-white 1000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.blink-white-fast250 {
    animation: blink-white 250ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.blink-orange {
    animation: blink-orange 1000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.blink-orange-fast {
    animation: blink-orange 500ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.blink-red {
    animation: blink-red 1000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.blink-red-fast {
    animation: blink-red 500ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.blink-yellow {
    animation: blink-yellow 1000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.blink-purple {
    animation: blink-purple 1000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.blink-yellow-fast {
    animation: blink-yellow 500ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.blink-green {
    animation: blink-green 1000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.blink-black {
    animation: blink-black 1000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.slow-white {
    animation: blink-white 2000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.slow-orange {
    animation: blink-orange 2000ms infinite;
    animation-timing-function: steps(2, jump-none);
}

.vivid-blink-blink-pause {
    animation: vivid-blink-blink-pause 2400ms infinite linear;
}

@keyframes blink {
    100% {
        background-color: black;
    }
}

@keyframes double-blink-red {
    0% {
        background-color: red;
    }

    16.67% {
        background-color: red;
    }
    
    17% {
        background-color: black;
    }
    
    33% {
        background-color: black;
    }

    33.33% {
        background-color: red;
    }

    49% {
        background-color: red;
    }

    50% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}

@keyframes double-blink-orange {
    0% {
        background-color: orange;
    }

    16.67% {
        background-color: orange;
    }
    
    17% {
        background-color: black;
    }
    
    33% {
        background-color: black;
    }

    33.33% {
        background-color: orange;
    }

    49% {
        background-color: orange;
    }

    50% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}

@keyframes double-blink-green {
    0% {
        background-color: green;
    }

    16.67% {
        background-color: green;
    }
    
    17% {
        background-color: black;
    }
    
    33% {
        background-color: black;
    }

    33.33% {
        background-color: green;
    }

    49% {
        background-color: green;
    }

    50% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}

@keyframes offset-orange-A {
    0% {
        background-color: orange;
    }

    32% {
        background-color: orange;
    }

    33% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}

@keyframes offset-orange-B {
    0% {
        background-color: black;
    }

    32% {
        background-color: black;
    }

    33% {
        background-color: orange;
    }

    65% {
        background-color: orange;
    }

    66% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}

@keyframes offset-red-A {
    0% {
        background-color: red;
    }

    32% {
        background-color: red;
    }

    33% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}

@keyframes offset-red-B {
    0% {
        background-color: black;
    }

    32% {
        background-color: black;
    }

    33% {
        background-color: red;
    }

    65% {
        background-color: red;
    }

    66% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}

@keyframes fast-strobe-red {
    0% {
        background-color: red;
    }

    79% {
        background-color: red;
    }

    80% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}

@keyframes fast-strobe-orange {
    0% {
        background-color: orange;
    }

    79% {
        background-color: orange;
    }

    80% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}

@keyframes fast-strobe-green {
    0% {
        background-color: green;
    }

    79% {
        background-color: green;
    }

    80% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}

@keyframes blink-white {
    100% {
        background-color: white;
    }
}

@keyframes blink-orange {
    100% {
        background-color: orange;
    }
}

@keyframes blink-red {
    100% {
        background-color: red;
    }
}

@keyframes blink-yellow {
    100% {
        background-color: yellow;
    }
}

@keyframes blink-purple {
    100% {
        background-color: purple;
    }
}

@keyframes blink-green {
    100% {
        background-color: green;
    }
}

@keyframes blink-black {
    100% {
        background-color: black;
    }
}

@keyframes vivid-blink-blink-pause {
    0% {
        background-color: green;
    }

    20% {
        background-color: green;
    }

    20.0001% {
        background-color: black;
    }

    40% {
        background-color: black;
    }

    40.0001% {
        background-color: green;
    }

    60% {
        background-color: green;
    }

    60.0001% {
        background-color: black;
    }

    100% {
        background-color: black;
    }
}

.led {
    width: 50px;
    border: 1px black solid !important;
}

.highlight {
    background-color: #FBC02D;
    font-weight: bold;
    color: #000000;
}

summary {
    font-size: 24px;
}

code {
    background-color: #212121;
    border-radius: 2px;
    padding: 1px 2px;
}

a {
    color: cornflowerblue;
}

.isWebView .hideInWebView {
    display: none;
}