:root {
    --background: #ffffff;
    --foreground: #171717;
    --solidcolor: #000000;
    --bordercolor: #d0d0d0;
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed;
        --solidcolor: #a0a0a0;
        --bordercolor: #d0d0d0;
    }
}
body {
    background-color: #000;
    color: #0f0;
    font-family: Courier New, Courier, monospace;
}

button {
    border: 3px solid var(--bordercolor);
    border-radius: 25px;
    background-color: #002020;;
    color: var(--solidcolor);
    font-size: 3em;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
}

.card {
    background-color: #ffffff;
    color: var(--solidcolor);
    border: 3px solid var(--bordercolor);
    text-align: center;
    padding: 10px;
    margin: 10px;
    border-radius: 25px;
    font-size: 5em;
    font-family: Times New Roman, serif;
    width: auto;
    display: inline-block;
}
li.special {
    color: #ffa040;
}
li.full {
    color: #ff4040;
}
li.up {
    font-size: 3em;
    color: #408040;
}
li.card span {
    color: #a0a0a0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    margin: 5px;
    display: inline-block;
    border: dotted 1px var(--bordercolor);
}

input.card {
    font-size: 3em;
}