html[data-theme="light"],
:root {
    --primary: #55b6f2;
    --secondary: rgb(44, 44, 44);
    --primary-fg: rgb(240, 240, 240);

    --breadcrumbs-bg: rgb(34, 34, 34);

    --link-fg: rgb(34, 34, 34);
    --link-hover-color: #55b6f2;

    --selected-row: var(--primary);

    --button-hover-bg: var(--primary);
    --default-button-bg: var(--primary);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #264b5d;
        --primary-fg: rgb(240, 240, 240);

        --breadcrumbs-bg: var(--primary);

        --link-fg: #81d4fa;
        --link-hover-color: #55b6f2;

        --selected-row: var(--primary);

        --button-hover-bg: var(--primary);
        --default-button-bg: var(--primary);

        color-scheme: dark;
    }
}

html[data-theme="dark"] {
    :root {
        --primary: #264b5d;
        --primary-fg: rgb(240, 240, 240);

        --breadcrumbs-bg: var(--primary);

        --link-fg: #81d4fa;
        --link-hover-color: #55b6f2;

        --selected-row: var(--primary);

        --button-hover-bg: var(--primary);
        --default-button-bg: var(--primary);

        color-scheme: dark;
    }
}

#site-name img {
    filter: invert(1);
}

body {
    font-size: 1rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

.site-version {
    font-size: 0.6875rem;
}

.welcome-msg {
    display: flex;
    flex-direction: column;
}

.timezone {
    font-size: 0.6875rem;
}

#changelist-filter-extra-actions h3 {
    font-size: 0.675rem;
}