* {
    font-size: 1em;
    font-family: monospace;
}

a {
    color: blue;
}

select {
    width: 100%;
    overflow: hidden;
    outline: none;
    padding-top: 0.3em;
    border-radius: 0 0 0.3em 0.3em;
    border: 1pt solid #888;
    border-top: 0;
}

option.clear {
    color: #888;
}

option {
    display: block;
    /*white-space: pre-wrap;*/
    padding: 0.3em 0.4em;
}

option:hover {
    background: #ccf;
}

.action, .action.or {
    min-width: 15em;
    width: fit-content;
    float: left;
    padding: 0 0.6em 0.6em 0;
}

.action label {
    border: 1pt solid black;
    border-bottom: 0;
    border-radius: 0.3em 0.3em 0 0;
    font-weight: bold;
    font-size: 1.5em;
    background-color: #333;
    color: white;
    padding: 0.2em 0.4em 0.3em 0.4em;
    display: block;
}

.action select {
    width: 100%;
}

.clear:has(button) {
    font-size: 1.4em;
    clear: both;
}

button {
    padding: 0.3em 0.6em;
    background-color: #fee;
    border: 1pt solid #a64;
    border-radius: 0.3em;
}

a[target="_blank"]:hover:after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 66 66'> <path d='M14 66q-14 0-14-14v-29q0-14 14-14 11 0 14-1c3-1 3 6 0 7q-3 1-14 1-7 0-7 7v29q0 7 7 7h29q7 0 7-7 0-12 1-15c1-3 8-3 7 0q-1 3-1 15 0 14-14 14zM66 26q0 5-4 1l-5-7q-5-1-28 22c-3 3-8-2-5-5q23-23 22-28l-7-5q-4-4 1-4h23q3 0 3 3z' fill='blue'/></svg>");
    content: ' ';
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    margin-left: 5px;
}

/* Animate text color; border uses currentColor */
@keyframes colorPulse {
  from { border-color: #000; background-color: darkgreen; }
  to   { border-color: #040; background-color: #2a2; }
}

.clear.result {
    border: 1pt solid darkgreen;
    background-color: #2a2;
    border-radius: 0.3em;
    width: fit-content;
    margin-top: 0.3em;
    padding: 0.3em 0 0.3em 0.6em;
    animation: colorPulse 1s linear infinite alternate;
}

.result {
    font-size: 2em;
    margin: 0.2em 0;
    font-weight: bold;
    color: white;
}

.result a {
    text-decoration: none;
    color: black;
    background-color: white;
    border-radius: 0 0.3em 0.3em 0;
    padding: 0.3em 0.6em;
}

.result a:hover {
    color: blue;
    text-decoration: underline;
}