html {
	height: 100%;
	background: radial-gradient(aliceblue, skyblue);
}

.invalid {
    color: red;
    box-shadow: 0 0 4px 1px red;
}

button#new {
    height: 36pt;
    width: 36pt;
    float: left;
}

button#size {
    height: 36pt;
    width: 62pt;
    float: left;
}

select {
    width: 100%;
    max-width: 200px;
    min-width: 88pt;
}

#left {
    max-width: 200px;
    min-width: 88pt;
	margin: auto;
	margin-bottom: 6pt;
}

#flagCounter {
    border: 5px solid #eee;
    padding: 2pt;
    color: red;
    font-family: monospace;
    font-weight: bold;
    font-size: 20pt;
    background: #500;
    height: 34pt;
    float: left;
    min-width: 50pt;
    text-align: right;
	margin: 1pt;
}

table {
    background-color: #eee8;
    margin: auto;
}

td {
    text-align: center;
    background-color: #fff8;
    border-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
}

td.unseen {
    background-color: #aaa;
    border: 2px outset #ccc;
}

td.flag {
    background-image: url(flag.png);
}

td.flag:hover {
    border-color: lightcyan;
    border-style: solid;
}

td.win {
    background-color: green;
    border-style: solid;
    border-color: limegreen;
}

td.win:hover {
    border-color: lightgreen;
}

td.explode {
    background-image: url(explode.png);
    background-color: lightcoral;
    border-size: 0;
}

td.explode:hover, td.bomb:hover, td.wrong:hover {
    background-color: red;
}

td.bomb {
    background-image: url(bomb.png);
    background-color: lightcoral;
    border-color: transparent;
}

td.wrong {
    background-image: url(wrong.png);
}

td:hover {
    background-color: lightcyan;
}

td:active {
    border-style: inset;
}

td[val="1"] {
    color: blue;
}
td[val="2"] {
    color: green;
}
td[val="3"] {
    color: red;
}
td[val="4"] {
    color: black;
}
td[val="5"] {
    color: darkred;
}
td[val="6"] {
    color: lightseagreen;
}

td.question {
    color: black;
}