:root {
    --main-color: black;
    --control-color: green;
}

body {
	font: 100% Verdana, sans-serif;
	color: black;
	color: var(--main-color);
}

div.counter > span:last-of-type {
	color: red;
}

table {
    width: 100%;
    border: solid 1px black;
    border: solid 1px var(--main-color);
    border-spacing: 0;
}

table tbody {
        border-bottom: solid 1px black;
        border-bottom: solid 1px var(--main-color);
    }

table th {
        padding: 0.5em 1em;
    }

table th, table td {
        margin: 0;
        border-bottom: 1px solid black;
        border-bottom: 1px solid var(--main-color);
        border-right: 1px solid black;
        border-right: 1px solid var(--main-color);
        text-align: center;
    }

table th input, table td input {
            border: 0;
            width: 99%;
        }

.control {
    padding: 0.5em 2em;
    background-color: hsl(120, 100%, 80%);
}

.symbol {
    font-weight: bold;
}

.confirmation {
    background-color: hsl(120, 100%, 60%);
    font-weight: bold;
    color: rgb(51, 0, 0);
}

.control:disabled {
    padding: 0.5em 2em;
    background-color: hsl(120, 100%, 90%);
    color: rgb(153, 153, 153);
}

nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
    background-color: hsl(0, 0%, 90%);
    padding: 1em 1em;
}

nav a {
        flex: 1 1 auto;
        background-color: hsl(120, 100%, 10%);
        color: hsl(120, 100%, 90%);
        border-radius: 0.5em;
        padding: 0.5em 1em;
    }

nav a.active {
        font-weight: bold;
    }