:root {
    background-color: #212223;
    color: #C9DCFF;
    font-family: sans;
}

body {
    margin: 10px;
    align-items: center;
}

.invis {
    opacity: 0%;
}

#game {
    column-count: 3;
    margin: 10px;
    padding: 10px;
    background-color: #191A1C;
    border: solid #C9DCFF 1px;
}

canvas#canvas {
    background: #FF7700;
    background: linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 112, 0, 1) 100%);
    /* image-rendering: -moz-crisp-edges; */
    /*  image-rendering: -webkit-crisp-edges; */
    /*  image-rendering: pixelated; */
    border: solid #EFEFEF 1px;
}

#console {
    background-color: #1C1D21;
    color: #B0C0D0;
    font-family: monospace;
    padding: 20px;
    height: 560px;
    overflow-y: hidden;
    border: solid #B0C0D0 1px;
}

input {
    background-color: #212223;
    color: #B0C0D0;
    caret-color: #B0C0D0;
    border: solid #B0C0D0 2px;

    padding: 8px;
    font-weight: bold;
    font-family: sans;
    width: 125px;
}

select {
    background-color: #212223;
    color: #B0C0D0;
    caret-color: #B0C0D0;
    border: solid #B0C0D0 2px;

    padding: 8px;
    font-weight: bold;
    font-family: sans;
    width: 125px;
}

button {
    background-color: #212223;
    color: #B0C0D0;
    caret-color: #B0C0D0;
    border: solid #B0C0D0 2px;

    padding: 8px;
    font-weight: bold;
    font-family: monospace;
}

#settings {
    display: none;
}

.game {
    background-color: #1C1D21;
    color: #EFEFEF;
    padding: 10px;
    margin: 10px;
    margin-top: 0px;
    border: solid #FB3D54 2px;
    width: 250px;
    height: 750px;
}

.game input {
    background-color: #1C1D21;
    color: #FB3D54;
    caret-color: #FB3D54;
    border: solid #FB3D54 2px;
}

.game select {
    background-color: #1C1D21;
    color: #FB3D54;
    caret-color: #FB3D54;
    border: solid #FB3D54 2px;
}

.enabled {
    background-color: #1C1D21;
    color: #EFEFEF;
    padding: 10px;
    margin: 10px;
    margin-top: 0px;
    border: solid #21D992 2px;
    width: 250px;
    height: 750px;
}

.enabled input {
    background-color: #1C1D21;
    color: #21D992;
    caret-color: #21D992;
    border: solid #21D992 2px;
}

.classes {
    background-color: #1C1D21;
    color: #EFEFEF;
    padding: 10px;
    margin: 10px;
    margin-top: 0px;
    border: solid #FFFE57 2px;
    width: 250px;
    height: 750px;
}

.classes input {
    background-color: #1C1D21;
    color: #FFFE57;
    caret-color: #FFFE57;
    border: solid #FFFE57 2px;
}

.classes select {
    background-color: #1C1D21;
    color: #FFFE57;
    caret-color: #FFFE57;
    border: solid #FFFE57 2px;
}

.p1controls, .p2controls, .p3controls, .p4controls {
    height: 358px;
}

.p1controls {
    background-color: #1C1D21;
    color: #EFEFEF;
    padding: 10px;
    margin: 10px;
    margin-top: 0px;
    border: solid #f43 2px;
    width: 250px;
}

.p1controls input {
    background-color: #1C1D21;
    color: #f43;
    caret-color: #f43;
    border: solid #f43 2px;
}

.p2controls {
    background-color: #1C1D21;
    color: #EFEFEF;
    padding: 10px;
    margin: 10px;
    margin-top: 0px;
    border: solid #09f 2px;
    width: 250px;
}

.p2controls input {
    background-color: #1C1D21;
    color: #09f;
    caret-color: #09f;
    border: solid #09f 2px;
}

.p3controls {
    background-color: #1C1D21;
    color: #EFEFEF;
    padding: 10px;
    margin: 10px;
    margin-top: 0px;
    border: solid #3f4 2px;
    width: 250px;
}

.p3controls input {
    background-color: #1C1D21;
    color: #3f4;
    caret-color: #3f4;
    border: solid #3f4 2px;
}

.p4controls {
    background-color: #1C1D21;
    color: #EFEFEF;
    padding: 10px;
    margin: 10px;
    margin-top: 0px;
    border: solid #ff4 2px;
    width: 250px;
}

.p4controls input {
    background-color: #1C1D21;
    color: #ff4;
    caret-color: #ff4;
    border: solid #ff4 2px;
}

.cards {
    font-family: monospace;
    font-size: 120%;
    font-weight: bold;
    background-color: #1C1D21;
    padding: 10px;
    margin: 10px;
}