CSS file that goes along with the Pi Simulator given index.html file.

main.css

body {
    background: #DDDDDD;
}

.navbar {
    background-color: #800000;
    color: white;
}

.page-container {
    margin-top: 75px;
}

.sectionHeading {
    color: #bbb;
    font-size: 2.0em;
    position: relative;
    top: 6px;
}

.output-label {
    color: #aaa;
    font-size: 1.25em;
}

.output-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

input[type=radio] {
    display: none;
}

.btn-secondary.active.custom-file-control:focus:before, .btn-secondary.active.custom-file-control:hover:before, .btn-secondary.active.focus.custom-file-control:before, .btn-secondary.custom-file-control:active.focus:before, .btn-secondary.custom-file-control:active:focus:before, .btn-secondary.custom-file-control:active:hover:before, .btn.btn-secondary.active.focus, .btn.btn-secondary.active:focus, .btn.btn-secondary.active:hover, .btn.btn-secondary:active.focus, .btn.btn-secondary:active:focus, .btn.btn-secondary:active:hover, .open>.btn-secondary.dropdown-toggle.custom-file-control:focus:before, .open>.btn-secondary.dropdown-toggle.custom-file-control:hover:before, .open>.btn-secondary.dropdown-toggle.focus.custom-file-control:before, .open>.btn.btn-secondary.dropdown-toggle.focus, .open>.btn.btn-secondary.dropdown-toggle:focus, .open>.btn.btn-secondary.dropdown-toggle:hover {
    /* color: #6c757d;
    background-color: hsla(0,0%,60%,.4);
    border-color: hsla(0,0%,60%,.4); */

    color: #fff;
    background-color: #545b62;
    border-color: #4e555b;
}

.btn-group-toggle {
    padding: 15px 0;
}

#redOnButton.active {
    background-color: #800000;
}

#yellowOnButton.active {
    background-color: #dacc12;
}

#greenOnButton.active {
    background-color: darkgreen;
}