html  {
    font-family: Inconsolota, "Lucida Console", monospace, Arial;
    text-align: center;
}
body {
    max-width: 50em;
    margin: 0 auto;
}
[show=false] { display: none; }
hr { margin: 1em 0; }

buttons {
    display: block;
    margin: 1em auto;
}
buttons button { margin: 0 2em; }
button:hover { cursor: pointer; }
button[enable=false] { opacity: 0.5; }
button[enable=false]:hover { cursor: none; }

parameters {
    display: flex;
    justify-content: space-around;
    margin: 1em 0;
}
parameters parameter input {
    width: 2em;
}
parameters error {
    background: orange;
}

play {
    display: flex;
    justify-content: space-around;
}
warning {
    font-weight: bold;
}
options {
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
}
options img {
    width: 21%;
    border: solid 5px transparent;
}
options img[clickable=true]:hover {
    cursor: pointer;
    border: solid 5px orange;
}
options img[selected=true] {
    border: solid 5px green;
}
options img[result=true] {
    border: solid 5px green;
}
options img[result=false] {
    border: solid 5px red;
}
selected-options {
    display: block;
    margin-top: 1em;
}
selected-options img {
    height: 3em;
    margin: 0 .2em;
}
result img { height: 1em; }

history {
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-around;
}
history selected-options { margin: 1em; }