@media (prefers-color-scheme: no-preference) or (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --tide-focus-outline: 2px #E36209 dashed;
        --tide-focus-outline-offset: 4px;
        --tide-background-size-sidebar: cover;
        --tide-background-position-sidebar: bottom;
        --tide-background-repeat-sidebar: no-repeat;
        --tide-background-attachment-sidebar: local;
        --tide-color-primary: #1F5297;
        --tide-color-secondary: #028090;
        --tide-color-background-primary: #FFFFFF;
        --tide-color-background-secondary: #EAEAEA;
        --tide-color-background-sidebar: #1F5297;
        --tide-color-text-primary: #323739;
        --tide-color-text-secondary: #5C6669;
        --tide-color-text-diminished: #EAEAEA;
        --tide-color-text-sidebar: #FFFFFF;
        --tide-color-link: #1F5297;
        --tide-color-link-hover: #1F5297;
        --tide-color-link-visited: #028090;
        --tide-color-code-inline: #323739;
        --tide-color-table-border: #E3E3E3;
        --tide-color-table-background-head: #EAEAEA;
        --tide-color-table-background-even: #F9F9F9;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --tide-focus-outline: 2px #E36209 dashed;
        --tide-focus-outline-offset: 4px;
        --tide-background-size-sidebar: cover;
        --tide-background-position-sidebar: bottom;
        --tide-background-repeat-sidebar: no-repeat;
        --tide-background-attachment-sidebar: local;
        --tide-color-primary: #CCCCCC;
        --tide-color-secondary: #00ADB5;
        --tide-color-background-primary: #151515;
        --tide-color-background-secondary: #2C2C2C;
        --tide-color-background-sidebar: #2C2C2C;
        --tide-color-text-primary: #CCCCCC;
        --tide-color-text-secondary: #8C8C8C;
        --tide-color-text-diminished: #2C2C2C;
        --tide-color-text-sidebar: #CCCCCC;
        --tide-color-link: #70B1FF;
        --tide-color-link-hover: #70B1FF;
        --tide-color-link-visited: #81C3D7;
        --tide-color-code: #CCCCCC;
        --tide-color-table-border: #333333;
        --tide-color-table-background-head: #2C2C2C;
        --tide-color-table-background-even: #1F1F1F;
    }
}

:root[data-color-scheme="light"] {
    color-scheme: light;
    --tide-focus-outline: 2px #E36209 dashed;
    --tide-focus-outline-offset: 4px;
    --tide-background-size-sidebar: cover;
    --tide-background-position-sidebar: bottom;
    --tide-background-repeat-sidebar: no-repeat;
    --tide-background-attachment-sidebar: local;
    --tide-color-primary: #1F5297;
    --tide-color-secondary: #028090;
    --tide-color-background-primary: #FFFFFF;
    --tide-color-background-secondary: #EAEAEA;
    --tide-color-background-sidebar: #1F5297;
    --tide-color-text-primary: #323739;
    --tide-color-text-secondary: #5C6669;
    --tide-color-text-diminished: #EAEAEA;
    --tide-color-text-sidebar: #FFFFFF;
    --tide-color-link: #1F5297;
    --tide-color-link-hover: #1F5297;
    --tide-color-link-visited: #028090;
    --tide-color-code-inline: #323739;
    --tide-color-table-border: #E3E3E3;
    --tide-color-table-background-head: #EAEAEA;
    --tide-color-table-background-even: #F9F9F9;
}

:root[data-color-scheme="dark"] {
    color-scheme: dark;
    --tide-focus-outline: 2px #E36209 dashed;
    --tide-focus-outline-offset: 4px;
    --tide-background-size-sidebar: cover;
    --tide-background-position-sidebar: bottom;
    --tide-background-repeat-sidebar: no-repeat;
    --tide-background-attachment-sidebar: local;
    --tide-color-primary: #CCCCCC;
    --tide-color-secondary: #00ADB5;
    --tide-color-background-primary: #151515;
    --tide-color-background-secondary: #2C2C2C;
    --tide-color-background-sidebar: #2C2C2C;
    --tide-color-text-primary: #CCCCCC;
    --tide-color-text-secondary: #8C8C8C;
    --tide-color-text-diminished: #2C2C2C;
    --tide-color-text-sidebar: #CCCCCC;
    --tide-color-link: #70B1FF;
    --tide-color-link-hover: #70B1FF;
    --tide-color-link-visited: #81C3D7;
    --tide-color-code: #CCCCCC;
    --tide-color-table-border: #333333;
    --tide-color-table-background-head: #2C2C2C;
    --tide-color-table-background-even: #1F1F1F;
}

body {
    color: var(--tide-color-text-primary);
    background-color: var(--tide-color-background-primary);
    font-family: 'Noto Sans', 'Noto Sans SC', 'Noto Sans CJK SC', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', system-ui, sans-serif;
}

[tabindex]:not([tabindex="-1"]):focus,
a:focus,
.icon-wrapper:has(a:focus),
button:focus,
input:focus,
select:focus:focus,
textarea:focus,
summary:focus {
    outline: var(--tide-focus-outline);
    outline-offset: var(--tide-focus-outline-offset);
}

a {
    color: var(--tide-color-link);
    text-decoration-line: underline;
}

a:hover {
    text-underline-offset: 4px;
}

.indieweb-webring,
#go-home {
    color: var(--tide-color-text-secondary);
    text-decoration: none;
}

#go-home {
    font-size: initial;
}

.indieweb-webring:hover,
#go-home:hover {
    text-decoration-line: underline;
}

#content-container {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 1rem;
    text-align: center;
}

#site-title,
#not-found-title {
    box-sizing: border-box;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 1rem;
    text-align: center;
    font-family: 'Noto Serif', 'Noto Serif SC', 'Noto Serif CJK SC', Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    font-weight: 700;
    color: var(--tide-color-primary);
}

#site-title:has(#mirror-tag) {
    width: unset;
    padding: 0;
    display: inline-block;
    white-space: nowrap;
}

#mirror-tag {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    transform: translateX(0) translateY(-80%);
    font-size: initial;
    white-space: nowrap;
}

.h-card {
    display: none;
}

#jump-tip {
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 1rem;
    text-align: center;
}

#site-list,
#possible-links {
    padding: 0;
    list-style: none;
    font-size: 1.25rem;
}

#site-list li,
#possible-links li {
    margin-bottom: 1rem;
}

#footer {
    box-sizing: border-box;
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 1rem;
    text-align: center;
}

#travelling-logo {
    vertical-align: bottom;
}