:root {
    /* variables are written with 2 hyphens */
    --background: #DCDCDC;
    --font-color: #232323;
    --font-accent: blue;
    --logo-color: silver;
    --link-color: darkslategray;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #232323;
        --font-color: #DCDCDC;
        --font-accent: orange;
        --logo-color: #555555;
        --link-color: lightblue;
    }
}

* {
    box-sizing: border-box;
}

html {
    font-family: "Lucida Sans", sans-serif;
    color: var(--font-color);
    background-color: var(--background);
}

a {
    text-decoration: none !important;
    color: var(--link-color);
}

a:hover {
    color: white;
}

input[type=submit] {
    min-width: 100px;
    background: darkgray;
    padding: 3px 5px;
    border-radius: 3px;
    color: #444;
    cursor: pointer;
    transition: background .2s ease-in-out;
    border: 1px solid lightgray;
    border-right-color: #555555;
    border-bottom-color: #555555;
    font-size: 0.85em;
}

input[type=submit]:hover:not([disabled]) {
    background: dimgray;
    color: white;
}

input[type=submit]:disabled {
    color: lightgray;
}

.btn {
    border-radius: 5px;
    border: 2px solid white;
    font-size: smaller;
    padding: 2px 20px 2px 20px;
    background-color: gray;
    color: white;
}

.btn:hover {
    background-color: #DCDCDC;
    color: #232323;
}

.btn:disabled,
.btn[disabled]{
    border: 2px solid #999999;
    background-color: #cccccc;
    color: #666666;
}

.copyprevious {
    cursor: copy;
}