body {
    --c0: #ffffff;
    --c03: #fcfcfc;
    --c07: #fafafa;
    --c1: #f5f5f5;
    --c2: #e0e0e0;
    --c3: #cccccc;
    --c4: #b3b3b3;
    --c5: #999999;
    --c6: #808080;
    --c7: #5c5c5c;
    --c8: #2e2e2e;
    --c9: #000000;
    --c-link: #0d6efd;
    --icon-shadow: drop-shadow(0px 0px 2px var(--c0));
    --default-image: url(framework/default.png);
}
body.dark {
    --c0: #000000;
    --c03: #0a0a0a;
    --c07: #171717;
    --c1: #2e2e2e;
    --c2: #5c5c5c;
    --c3: #808080;
    --c4: #999999;
    --c5: #b3b3b3;
    --c6: #cccccc;
    --c7: #e0e0e0;
    --c8: #f5f5f5;
    --c9: #ffffff;
    --c-link: #bdd7ff;
    --icon-shadow: drop-shadow(0px 0px 2px var(--c9));
    --default-image: url(framework/default_dark.png);
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue;
    padding: 20;
    max-width: 960;
    margin: auto;
    color: var(--c9);
    background-color: var(--c0);
    line-height: 1.5;
    transition: all 100ms ease;
}

a {
    color: var(--c-link);
    text-decoration: none;
}

img {
    max-width: 100%;
}

iframe {
    max-width: 100%;
    border: none;
}

table {
    color: var(--c9);
}

.setting-button {
    position: relative;
    width: 20;
    height: 20;
    filter: var(--icon-shadow);
    opacity: 0.7;
}

.setting-button:hover {
    opacity: 1;
}

.album {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--c07);
}

.debug {
    box-shadow: inset 0 0 0 1px #3399ff;
}

.background-cover {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    filter: blur(3px);
}

.text-shadow {
    text-shadow: 1px 1px 0px var(--c0), -1px 1px 0px var(--c0), 1px -1px 0px var(--c0), -1px -1px 0px var(--c0);
}

.language-option-link {
    color: var(--c6);
}

.language-option-link:hover {
    color: var(--c9);
}