:root {
    --text-color: black;
    --highlight-blue: #85b7d9;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: white;
        --dark-bg-dimmed: #4d5057;
    }

    body {
        background: #2d2f33;
        color: #fff;
    }

    .ui.table.inverted {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: 0;
    }

    .ui.basic.inverted.table>tbody>tr>th, .ui.basic.inverted.table>thead>tr>th, .ui.basic.inverted.table>tr>th {
        background: 0;
    }

    .ui.very.basic.table.inverted {
        border: 0;
    }

    .ui.secondary.inverted.segment {
        background: #2a2d31;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ui.inverted.segment, .ui.inverted.segments, .ui.inverted.segments.segment {
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ui.inverted.label, .ui.inverted.labels .label {
        color: #000;
        background: #909090;
    }

    .ui.inverted.form input:is([type="text"], [type="password"], [type="email"]),
    .ui.inverted.form textarea {
        color: var(--text-color);
        background: var(--dark-bg-dimmed);
        border-color: rgba(255,255,255,.2);
        border-width: 2px;
    }

    .ui.inverted.form input:is([type="text"], [type="password"], [type="email"]):focus,
    .ui.inverted.form textarea:focus,
    .ui.inverted.input > input#search:focus {
        border-color: var(--highlight-blue);
    }

    /* Previous selector would overwrite the `border-right-color: transparent;` in dark mode. */
    /* So we reset it here. */
    .ui.inverted.action.input:not([class*="left action"]) > input {
        border-right-color: transparent;
    }

    .ui.inverted.action.input:not([class*="left action"]) > input:focus {
        border-color: var(--highlight-blue);
    }

    .ui.inverted.input > input {
        color: var(--text-color);
        background: var(--dark-bg-dimmed);
        border: 2px solid rgba(255,255,255,.2);
    }

    .ui.inverted.input > input#search {
        color: var(--text-color);
        background: var(--dark-bg-dimmed);
        border: 1px solid rgba(255,255,255,.2); /* use 1px border in search bar */
                                                  /* makes it visually better */
    }

    .ui.action.input:not([class*="left action"]) > input::selection {
        color: var(--text-color);
        background-color: #00B5AD;
    }

    :is(
        .ui.inverted.form input:is([type="text"], [type="password"], [type="email"]),
        .ui.inverted.form textarea,
        .ui.inverted.input > input#search
    )::selection {
        color: var(--text-color);
        background-color: #54C8FF;
    }
}

.outer {
    width: 100%;
    display: none;
}

.markd p>code {
    padding: .2rem .4rem;
    margin: 0;
    font-size: 85%;
    white-space: break-spaces;
    background-color: rgba(175, 184, 193, 0.2);
    border-radius: .4rem;
}

#navbar {
    padding-bottom: 3rem;
    margin-bottom: 2rem;
}

#navbar span {
    font-size: 14px;
}

img {
    max-width: 100%;
}

.toast-container {}

.flex-center {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 8px 6px;
}

.head-tags .ui.label.basic {
    background: transparent !important;
}

.ui.input > input#search.active {
    outline: 2.5px solid var(--highlight-blue);
    outline-offset: -1px;
}