default.css

@charset "utf-8";

body {
    margin: 3ex 0ex 10ex 2ex;
}

article {
    line-height: 1.8;
}

nav span {
    margin-right: 1ex;
}

section {
    margin-top: 3ex;
}

div {
    margin: 1ex 0ex;
}

div.space {
    margin-top: 3ex;
}

select {
    padding: 0.5ex 1ex;
    width: 80vw;
    font-size: large;
}

button {
    width: 80vw;
    font-size: large;
}

textarea {
    width: 80vw;
    height: 20ex;
}

input {
    width: 80vw;
}

input[type="checkbox"] {
    margin-right: 2ex;
    width: auto;
}

input[type="radio"] {
    width: auto;
}

table.border {
    border-collapse: collapse;
    margin-bottom: 2ex;
}

table.border tr th {
    border: 1px solid black;
    padding: 0.5ex;
}

table.border tr td {
    border: 1px solid black;
    padding: 0.5ex;
}

#display {
    margin-bottom: 3ex;
}

#number label {
    font-size: large;
}

#key {
    border-collapse: collapse;
    border-spacing: 0ex;
}

#key td {
    width: 15vw;
    text-align: center;
}

#key button {
    width: 100%;
}

#key span {
    font-size: small;
}

#key.solid button {
    color: blue;
}

#key.decision button {
    color: black;
}

#key.candidate button {
    color: green;
}

.note {
    padding-left: 1em;
    font-size: small;
}

.symbol {
    text-align: center;
}

.valid {
    color: blue;
}

.invalid {
    color: red;
}

.error {
    background-color: pink;
}

@media (min-width: 768px) {

    article {
        line-height: 1.5;
    }

    select {
        width: auto;
    }

    button {
        width: auto;
    }

    textarea {
        width: 50ex;
        height: 20ex;
    }

    input[type="number"] {
        width: 30ex;
    }

    #board {
        width: 300px;
        height: 300px;
    }

    #number {
        margin-left: 1ex;
    }

    #key td {
        width: 50px;
    }

    #key button {
        height: 3ex;
        font-size: x-large;
    }

    .table {
        display: table;
    }

    .table .row {
        display: table-row;
    }

    .table .row .cell {
        display: table-cell;
        vertical-align: top;
        padding: 0ex 2ex 1ex 0ex;
    }

}