:root {
    --background-color: #ffffff;
    --secondary-color: #e6e6e6;
    --third-color: #c9c9c9;
    --text-dark: #101010;
    --text: #333333;
    --text-light: #888888;
    --text-lighter: #ababab;
    --blue: #3498db;
    --blue-background: #81cdff;
    --blue-text: #07324e;
    --green: #27ae60;
    --green-background: #62ffa4;
    --green-text: #084622;
    --yellow: #feca57;
    --yellow-background: #ffdd92;
    --yellow-text: #79570d;
    --red: #c0392b;
    --red-background: #ff7667;
    --red-text: #61150c;
    --white: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1f1f1f;
        --secondary-color: #242424;
        --third-color: #353535;
        --text-dark: #ffffff;
        --text: #c4c5c9;
        --text-light: #6c6d71;
        --text-lighter: #4b4b4b;
        --blue-text: #81cdff;
        --blue-background: #07324e;
        --green-text: #62ffa4;
        --green-background: #084622;
        --yellow-text: #ffdd92;
        --yellow-background: #79570d;
        --red-text: #ff7667;
        --red-background: #61150c;
    }
} 

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lucida Console', monospace;
    color: var(--text);
    background-color: var(--background-color);
}

a {
    color: inherit;
    text-decoration: none;
}

input{
    font-family: 'Lucida Console', monospace;
    color: var(--text);
    background-color: var(--background-color);
    border-style: solid;
    border-width: 1px;
    border-color: var(--text-light);
}

select{
    font-family: 'Lucida Console', monospace;
    color: var(--text);
    background-color: var(--background-color);
}

.button {
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    background-color: var(--background-color);
}

.button:hover {
    color: var(--text);
    background-color: var(--secondary-color);
}

.button:active {
    color: var(--background-color);
    background-color: var(--text);
}

.border {
    z-index: 1;
    background-color: var(--background-color);
    border-style: solid;
    border-width: 1px;
    border-color: var(--text-light);
}

.topborder {
    z-index: 1;
    background-color: var(--background-color);
    border-top:1px solid var(--text-light);
}

.bottomborder {
    z-index: 1;
    background-color: var(--background-color);
    border-bottom:1px solid var(--text-light);
}

.leftborder {
    z-index: 1;
    background-color: var(--background-color);
    border-left:1px solid var(--text-light);
}

.rightborder {
    z-index: 1;
    background-color: var(--background-color);
    border-right:1px solid var(--text-light);
}

.textcenter {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.textvertcenter {
    display: flex;
    padding: 5px;
    align-items: center;
}

.list {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: minmax(min-content, max-content);
    grid-auto-rows: minmax(min-content, max-content);
}

.textarea {
    color: var(--text);
    background-color: var(--background-color);
    border-style: solid;
    border-width: 1px;
    border-color: var(--text);
  }