html {
    font-family: sans-serif;
    display: block;
    text-align: center;
}
body {
    margin: 0 auto;
    max-width: 1200px;
    background-color: #000000;
}
h1 {
    font-size: 1.4rem;
    color: white;
}
h2 {
    font-size: 1.2rem;
    color: white;
}
h3 {
    font-size: 1.0rem;
    color: white;
}
p {
    padding: 5px; 
}
button {    
    color: white;
    padding: 5px 5px;   
    margin: 5px 5px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
.topnav {
    text-align: center;
    background-color: #000000;
}
.wrapper {
    color: #bebebe;
    text-align: center;
    display: grid;
    grid-template-columns: 2fr 3fr 1fr ;
    grid-template-rows: .75fr 2.5fr 1.5fr .3fr ;
}
.section1 { /*connection*/
    padding: 5px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;  
}
.section2 { /*animation*/
    padding: 5px;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2; 
}
.section3 { /*brightness/color*/
    padding: 5px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3; 
}
.section4 { /*layers*/
    padding: 5px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4; 
}
.section5 { /*pattern control*/
    padding: 5px;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4; 
}
.section6 { /*presets*/
    padding: 5px;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4; 
}
.section7 { /*last value sent*/
    padding: 5px;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5; 
}
DIV.table {
    display:table;
    table-layout: fixed;
    width: 100%;
}
FORM.tr, DIV.tr {
    display:table-row;
    padding: 2px;
}
SPAN.td {
    display:table-cell; 
    padding: 2px;
}
input[type=range] {
  width: 100%;
}
.card {
    background-color: rgb(36, 36, 36);
    padding: 5px;
}
.onButton{
    background-color: #7f7f7f;
}
.offButton{
    background-color: #5c5c5c;
}
.resetButton{
    background-color: #000000;
    color: white;
    padding: none;
    margin: none;
    border: none;
    cursor: pointer;
    border-radius: none;
    border-radius: none;
}
.gray-label {
    color: #bebebe;
    font-size: 1rem;
    text-align: center;
}
.credits {
    color: #aaaaaa;
    font-size: .8rem;
}
[data-used="true"] {
  color: white;
}
[data-used="false"] {
  color: #3e3e3e;
}