body {
background: #000;
color: #fff;
text-align: center;
}
canvas {
height: calc(100vmin - 50px);
width: calc(100vmin - 50px);
}
#cover {
height: 500px;
border: 1px solid #222;
visibility: hidden;
}
div#start-screen, div#controls-setup {
margin-top: 32px;
}
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
.buttons {
padding-top: 32px;
clear: both;
}
.buttons button {
margin: 0 8px;
background: #555;
padding: 8px;
color: #400;
border: 2px solid #888;
border-right-color: #444;
border-bottom-color: #444;
}
.buttons button:hover {
cursor: pointer;
color: #f00;
}
.buttons button:active {
cursor: pointer;
background: #888;
}
select {
background: #555;
color: #400;
max-width: 75%;
}
table {
width: 100%;
font-size: 20pt;
}
table tr th {
padding: 25px;
}
table tr td {
padding: 0;
padding-top: 20px;
text-align: right;
min-width: 100px;
}
table tr td.control {
text-align: center;
color: #800;
}
table tr td.control.active {
color: #0f0;
}
table tr#gamepad-config-row td {
text-align: center;
}
td.control:hover {
cursor: pointer;
color: #f00;
}
input[type='radio'] {
accent-color: #f00;
}
label.radio {
margin: 0 20px;
}
.hide {
display: none;
}
.invisible {
visibility: hidden;
}
#control-info {
color: #090;
}