:root {
    --flexoki-black: #100F0F;
    --flexoki-base-900: #282726;
    --flexoki-base-600: #CECDC3;
    --flexoki-base-500: #6F6E69;
    --flexoki-base-200: #878580;
    --flexoki-base-100: #E6E4D9;
    --flexoki-paper: #FFFCF0;


    --flexoki-red-800: #6C201C;
    --flexoki-red-600: #AF3029;
    --flexoki-red-400: #D14D41;
    --flexoki-orange-800: #71320D;
    --flexoki-orange-600: #BC5215;
    --flexoki-orange-400: #DA702C;
    --flexoki-yellow-800: #664D01;
    --flexoki-yellow-600: #AD8301;
    --flexoki-yellow-400: #D0A215;
    --flexoki-green-800: #3D4C07;
    --flexoki-green-600: #66800B;
    --flexoki-green-400: #879A39;
    --flexoki-cyan-800: #164F4A;
    --flexoki-cyan-600: #24837B;
    --flexoki-cyan-400: #3AA99F;
    --flexoki-blue-800: #163B66;
    --flexoki-blue-600: #205EA6;
    --flexoki-blue-400: #4385BE;
    --flexoki-purple-800: #3C2A62;
    --flexoki-purple-600: #5E409D;
    --flexoki-purple-400: #8B7EC8;
}

@media (prefers-color-scheme: light) {
    :root {
        --tx: var(--flexoki-black);
        --tx2: var(--flexoki-base-600);
        --bg: var(--flexoki-paper);
        --ui: var(--flexoki-base-100);

        --red: var(--flexoki-red-600);
        --red-bg: var(--flexoki-red-400);
        --orange: var(--flexoki-orange-600);
        --orange-bg: var(--flexoki-orange-400);
        --yellow: var(--flexoki-yellow-600);
        --yellow-bg: var(--flexoki-yellow-400);
        --green: var(--flexoki-green-600);
        --green-bg: var(--flexoki-green-400);
        --cyan: var(--flexoki-cyan-600);
        --cyan-bg: var(--flexoki-cyan-400);
        --cyan2: var(--flexoki-cyan-600);
        --blue: var(--flexoki-blue-600);
        --blue-bg: var(--flexoki-blue-400);
        --purple: var(--flexoki-purple-600);
        --purple-bg: var(--flexoki-purple-400);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        /*--tx: var(--flexoki-base-200);*/
        --tx: var(--flexoki-paper);
        --tx2: var(--flexoki-base-500);
        --bg: var(--flexoki-black);
        --ui: var(--flexoki-base-900);

        --red: var(--flexoki-red-400);
        --red-bg: var(--flexoki-red-800);
        --orange: var(--flexoki-orange-400);
        --orange-bg: var(--flexoki-orange-800);
        --yellow: var(--flexoki-yellow-400);
        --yellow-bg: var(--flexoki-yellow-800);
        --green: var(--flexoki-green-400);
        --green-bg: var(--flexoki-green-800);
        --cyan: var(--flexoki-cyan-400);
        --cyan2: var(--flexoki-cyan-600);
        --cyan-bg: var(--flexoki-cyan-800);
        --blue: var(--flexoki-blue-400);
        --blue-bg: var(--flexoki-blue-800);
        --purple: var(--flexoki-purple-400);
        --purple-bg: var(--flexoki-purple-800);
    }
}

html {
  scroll-padding-top: 40px;
}

body {
    background-color: var(--bg);
    color: var(--tx);
    font-family: Arial, sans-serif;
    padding: 20px;
}

nav.menu-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    margin-bottom: 20px;
}

.menu-table {
    table-layout: fixed;
    margin-top: 0;
}

.menu-cell {
    background-color: var(--bg);
    padding: 10px;
    text-align: center;
    white-space: nowrap;
    font-weight: normal;
}

.menu-cell.active {
    background-color: var(--tx);
    color: var(--bg);
    font-weight: bold;
}

.menu-cell a {
    text-decoration: none;
    color: inherit;
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th,
td {
    border: 1px solid var(--tx2);
    padding: 8px;
}

th {
    background-color: var(--tx);
    color: var(--bg)
}

.filter-buttons {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.filter-buttons button {
    border: 1px solid var(--tx2);
    background-color: var(--bg);
    color: var(--tx);
    padding: 8px 12px;
    cursor: pointer;
    font: inherit;
    border-radius: 0;
    transition: background-color 0.2s ease;
}

.filter-buttons button:hover {
    background-color: var(--ui);
}

.status-successful {
    background-color: var(--green-bg);
}

.status-failure {
    background-color: var(--red-bg);
}

.status-planning {
    background-color: var(--blue-bg);
}

.status-recruiting {
    background-color: var(--yellow-bg);
}

.status-expired {
    background-color: var(--tx2);
}

.status-default {
    background-color: var(--bg);
}

a {
    text-decoration: none;
    color: var(--cyan);
    display: block;
}

/* oc team editor */
textarea {
    width: 100%;
    height: 500px;
    font-family: monospace;
    color: inherit;
    background-color: inherit;
}

form {
    max-width: 1000px;
    margin: auto;
}

/* a:visited {
    color: var(--cyan2)
} */

/*
img.chart {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
} */