@charset "utf-8";

/* Global */

:root,
:root.light {
  color-scheme: light;

  --menu-icon-slice-width: 18px;
  --menu-icon-slice-height: 2px;
  --article-page-width: 1000px;
  --gap-large: 2rem;
  --gap-small: 1.5rem;
  --header-height: 52px;

  --link: #0366d6;
  --link-visited: #336699;
  --link-black: #1f2628;

  --color-article-h2: #30040f;
  --color-article-h3: #0a5261;
  --color-article-h4: #055c26;

  --header-background: #f9f9f9;
  --header-item-focused-background-color: rgba(0, 0, 0, 0.04);
  --header-item-focused-shadow-color: rgba(0, 8, 15, 0.125);
  --header-link-color: #333;
  --header-link-color-hover: black;
  --logo-img-filter: none;

  --header-important-item-background-color: rgb(200, 0, 68);
  --header-important-item-color: #f2f2f2;
  --header-important-item-hover-color: #f1f1f1;
  --header-important-item-hover-background-color: #2c1f1c;

  --sidebar-background-color: #111;
  --background-secondary-color: #dee2e6;
  --code-bg-color: #f6f8fa;
  --elem-shadow-color: rgba(0, 0, 0, 0.05);
  --article-background: white;
  --logo-text-color: black;
  --body-text-color: #24292e;
  --box-sep-color: rgba(0, 0, 0, 0.1);
  --sidebar-link-color: #ccc;
  --target-color: cornflowerblue;
  --code-inline-bg: #f3f3f3;

  --blockquote-text-color: #575e66;
  --blockquote-border-color: #dfe2e5;
  --blockquote-bg-start: color-mix(in srgb, var(--blockquote-border-color), transparent 90%);
  --blockquote-bg-end: color-mix(in srgb, var(--blockquote-border-color), transparent 98%);

  --sidebar-link-color-hover: #f1f1f1;
  --sidebar-important-link-color-hover: #fff6f1;

  --download-button-text-color: var(--link);
  --download-button-border-color: var(--link);

  --img-shadow-color: #999;

  --nagbar-color: #453128;
  --nagbar-bg: #fbf6e3;
  --nagbar-border: #e2c491;

  --normal-underline-color: transparent;
  --hover-underline-color: transparent;
}

/* Pink theme */

:root.pink {
  color-scheme: light;

  --body-text-color: #955e4b;
  --body-bg-color: #fcf2f5;
  --logo-text-color: var(--body-text-color);

  --header-link-color: var(--body-text-color);
  --header-link-color-hover: #ac370d;
  --header-background: #fff9f3;
  --header-color: var(--link-black);
  --header-item-focused-background-color: rgba(245, 159, 146, 0.2);
  --header-item-focused-shadow-color: rgba(189, 119, 108, 0.33);
  --logo-img-filter: invert(39%) sepia(24%) saturate(834%) hue-rotate(329deg) brightness(97%) contrast(90%);

  --background-secondary-color: #f2ddd4cc;
  --article-background: #fff9f3cc;

  --link: #d47999;
  --link-visited: var(--link);
  --link-black: #973f22;
  --link-black-hover: #cf572f;

  --code-inline-color: white;
  --code-inline-bg: #e6a2ba;
  --code-bg-color: #ffdeeb;

  --sidebar-link-color: #f98e9a;
  --sidebar-background-color: #fff1ea;
  --sidebar-link-color-hover: #d47999;
  --sidebar-list-marker: var(--link);
  --sidebar-item-background-color-hover: #f59f92;

  --md-button-background: var(--code-inline-bg);
  --md-button-background-hover: var(--link);
  --summary-text-color: var(--link);
  --summary-background-color: var(--code-bg-color);
  --details-border-color: var(--link);
  --box-sep-color: rgba(149, 93, 75, 0.231);
  --hr-color: #ff9999;
  --target-color: var(--hr-color);

  --download-button-text-color: var(--link);
  --download-button-border-color: var(--link);
  --download-button-background-color: rgba(248, 181, 189, 0.15);
  --download-button-shadow-color: rgba(248, 181, 189, 0.5);

  --blockquote-text-color: #cf828b;
  --blockquote-border-color: var(--code-inline-bg);
}

:root.pink body::before,
:root.pink body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 20vw;
    z-index: -1;
    background-repeat: repeat-y;
    background-position: top right;
    background-size: 100% auto;
}

:root.pink body::before {
    left: 0;
    transform: scaleX(-1);
}

:root.pink footer {
    background-color: #744356;
    background-image: linear-gradient(rgba(197, 138, 159, 0.33), rgba(68, 47, 55, 0.66)),
        url("media/charlotte.png");
    background-size: cover;
    background-position: center 20%;
}

:root.pink footer::after {
    --decor-height: 26px;
    content: "";
    display: block;
    position: absolute;
    top: calc(-1 * var(--decor-height));
    height: var(--decor-height);
    width: 100%;
    background-position: bottom left;
    background-repeat: repeat-x;
    background-size: auto;
    transform: scaleY(-1);
}



:root.dark {
    /* Dark theme */
    color-scheme: dark;

    --background-secondary-color: rgba(255, 255, 255, 0.25);
    --article-background: #131616;
    --link: #3eafaf;
    --link-black: #a6a6a6;
    --link-black-hover: #808080;
    --link-visited: var(--link);
    --header-color: var(--link-black);

    /* Headers in articles */
    --color-article-h2: #e42253;
    --color-article-h3: #23bbda;
    --color-article-h4: #21cf64;

    --body-text-color: #c5c5c5;
    --body-bg-color: #161818;
    --logo-text-color: var(--body-text-color);
    --header-link-color: var(--body-text-color);
    --logo-img-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);

    --header-background: #2e2e2e;
    --header-item-focused-shadow-color: rgba(0, 0, 0, 0.7);
    --header-item-focused-background-color: rgba(255, 255, 255, 0.219);
    --header-link-color-hover: rgba(245, 250, 255, 0.9);

    --header-important-item-hover-background-color: rgb(255, 0, 55);

    --code-inline-color: black;
    --code-bg-color: #4d4d4d;
    --code-inline-bg: #1b3535;
    --code-inline-color: var(--link);

    --sidebar-link-color: var(--header-link-color);
    --sidebar-link-color-hover: var(--header-link-color-hover);
    --sidebar-list-marker: var(--link);

    --summary-text-color: var(--link);
    --summary-background-color: var(--code-inline-bg);

    --details-border-color: var(--link);
    --box-sep-color: rgba(233, 233, 233, 0.16);
    --kbd-color: var(--body-text-color);
    --img-shadow-color: #333;

    --md-button-background: var(--code-inline-bg);
    --md-button-background-hover: var(--link);

    --blockquote-text-color: #9c9c9c;
    --blockquote-border-color: var(--code-inline-bg);

    --nagbar-color: #f1b79c;
    --nagbar-bg: #313127;
    --nagbar-border: #554a38;

    a.anchor svg {
        /* Fix anchor visibility */
        filter: invert(1);
    }
}

/* Main elements */

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

img,
picture,
svg,
video {
    max-width: 100%;
    display: block;
    font-style: italic;
}

/* Body with sticky footer */

html,
body {
    min-height: 100vh;
    min-height: 100dvh;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    font-family: "Noto Sans", "Droid Sans", "DejaVu Sans", "Liberation Sans", Roboto, Cantarell, "Segoe UI", Arial,
        Meiryo, Oxygen, Ubuntu, "Helvetica Neue", Helvetica, "Noto Color Emoji", "Noto Sans CJK JP", IPAGothic,
        Yu Gothic, sans-serif;
    background-color: var(--body-bg-color, #f3f3f3);
    color: var(--body-text-color, black);
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

body>div#divbodyholder {
    flex: 1 0 auto;
}

body>header,
body>footer {
    flex-shrink: 0;
}

/* Links general */

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

a:visited {
    color: var(--link-visited);
}

a:hover {
    text-decoration: underline;
}

/* Accented links */

a.ablack {
    color: var(--link-black);
}

a.ablack:is(:hover, :active, :focus) {
    color: var(--link-black-hover, DarkSlateBlue);
    filter: hue-rotate(-30deg) brightness(90%);
}

/* Header */

header {
    font-family: "Noto Serif", "DejaVu Serif", "Liberation Serif", "Times New Roman", "Noto Serif CJK JP", "IPAexMincho",
        "Yu Mincho", Georgia, Times, serif;
    width: 100%;
    position: sticky;
    z-index: 100;
    top: 0;
    box-shadow: 0 5px 0 var(--background-secondary-color), 0 6px 4px 0 var(--elem-shadow-color);
    min-width: 256px;
    min-height: var(--header-height);
    background-color: var(--header-background);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    font-size: 16px;
}

/* logo; icon and title */

header a.logo,
header a.logo:visited {
    height: var(--header-height);
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    transition: opacity 0.2s;
    gap: 6px;
}

header a.logo>span {
    font-size: 20px;
    font-weight: bold;
    color: var(--logo-text-color, black);
    text-align: center;
    margin-right: 8px;
}

header a.logo:is(:hover, :active, :focus) {
    filter: saturate(1.5);
    background-color: var(--header-background);
}

header a.logo>img {
    height: 100%;
    padding: 2px;
    filter: var(--logo-img-filter, none);
}

/* Hidden elements. Description is visible only on wide screens. */

header #description,
header nav {
    display: none;
}

/* Navigation */

header>nav {
    clear: both;
    flex-flow: row nowrap;
    justify-content: space-between;
    height: var(--header-height);
    flex: 2 1 200px;
}

header>nav a,
header>nav a:visited {
    height: var(--header-height);
    white-space: nowrap;
    padding: 0 2px;
}

/* Important links inside Header */

header>nav a.important {
    color: var(--header-important-item-color);
    background-color: var(--header-important-item-background-color);

    &:is(:hover, :active, :focus) {
        color: var(--header-important-item-hover-color);
        background-color: var(--header-important-item-hover-background-color);
    }
}

/* Header on wide screens */

@media screen and (min-width: 760px) {
    header>nav {
        display: flex;
    }

    header>nav a {
        flex: 2 1 20px;
    }
}

@media screen and (min-width: 1000px) {
    header>nav a:nth-last-of-type(2) {
        margin-left: auto;
    }

    header>nav a {
        flex: 0 1 20px;
        padding: 0 16px;
    }
}

/* Common rules for buttons and anchors */

header a,
header a:visited,
header button,
header label {
    display: block;
    color: var(--header-link-color, #333);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--header-background);
    transition: background-color 0.08s ease-in-out, box-shadow 0.12s ease-in-out;
    line-height: var(--header-height);
    user-select: none;
    position: relative;

    &:not(.logo)::after {
        content: "";
        position: absolute;
        display: block;
        inset: 0;
        box-shadow: 0px 5px 0px 0px var(--normal-underline-color);
        transition: box-shadow 0.1s;
    }

    &:is(:hover, :active, :focus)::after {
        box-shadow: 0px 5px 0px 0px var(--hover-underline-color);
    }
}

header button:hover,
header button[open],
header :is(label, a:not(.logo)):is(:hover, :active, :focus) {
    color: var(--header-link-color-hover, black);
    text-decoration: none;
    background-color: var(--header-item-focused-background-color);
    box-shadow: inset 0 1px 2px 0 var(--header-item-focused-shadow-color, rgba(0, 8, 15, 0.125));
}

/* Mark guide link */

header a.guide_link {
    --normal-underline-color: rgb(253, 122, 93);
    --hover-underline-color: rgb(200, 0, 68);
}

/* body */

#divbodyholder {
    overflow-wrap: break-word;
    margin: var(--gap-large) 0 var(--gap-large);
}

#divbodyholder>div {
    border: 1px solid var(--box-sep-color);
    background-color: var(--article-background, white);
    padding: clamp(1.5rem, 3vw, 2rem);
    margin: 0 auto;
    width: 100%;
    max-width: var(--article-page-width);
    box-shadow: 0 1px 4px 0 var(--elem-shadow-color);
}

/* container for articles */

#divbodyholder>#divbody {
    padding-top: 0;
}

/* index page nag bar */

#divbodyholder>.indexnagbar {
    color: var(--nagbar-color, black);
    background-color: var(--nagbar-bg, yellow);
    border: 1px solid var(--nagbar-border, brown);
    margin-bottom: var(--gap-large);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 10px;
}

.indexnagbar a,
.indexnagbar a:visited {
    color: #a85c43;
}

.indexnagbar a:is(:hover, :active, :focus) {
    color: #ab2f17;
}

.indexnagbar svg.nagbar_icon {
    display: block;
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    fill: var(--nagbar-color, black);
}

@media screen and (max-width: 500px) {
    #divbodyholder>.indexnagbar {
        flex-flow: column nowrap;
    }
}

/* main */

main *+* {
    margin-block: 1rem 0;
}

main li> :is(ol, ul):first-of-type,
main a,
main article {
    margin-block: 0;
}

main ol,
main ul {
    padding-left: 2em;
}

main li+li {
    margin-top: 0.25em;
}

main img.shadow {
    box-shadow: 2px 2px 3px var(--img-shadow-color);
}

article>h1:first-child {
    margin-block-end: 0px;
}

article a.anchor {
    float: left;
    padding-right: 4px;
    margin-left: -20px;
    line-height: 1;
}

blockquote {
    padding: 0 1em;
    color: var(--blockquote-text-color, red);
    border-left: 0.25em solid var(--blockquote-border-color, red);
    background-image: linear-gradient(to right, var(--blockquote-bg-start, red), var(--blockquote-bg-end, yellow));
}

blockquote a {
    filter: saturate(70%);
}

main ::selection {
    background-color: #b3d4fc;
    color: #000;
    text-shadow: none;
}

main p {
    line-height: 1.5;
}

code,
kbd,
pre {
    font-family: "Noto Sans Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", "Lucida Console", Courier,
        Consolas, "Noto Sans Mono CJK JP", monospace;
}

code {
    word-break: keep-all;
    font-size: 85%;
    padding: 0.2em 0.4em;
    background-color: var(--code-inline-bg, #f3f3f3);
    color: var(--code-inline-color, currentColor);
    border-radius: 4px;
}

pre {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    background-color: var(--code-bg-color);
    border-radius: 6px;
    padding: 1rem;
    line-height: 1.45;
}

pre img {
    margin: 12px 0px;
}

pre iframe {
    margin: 12px 0px;
}

pre code {
    padding: 0;
    background-color: initial;
    color: inherit;
}

kbd {
    display: inline-block;
    margin: 0 1px 2px;
    padding: 3px 4px;
    font-size: 0.6875rem;
    line-height: normal;
    line-height: 10px;
    color: var(--kbd-color, #24292f);
    vertical-align: middle;
    background-color: var(--code-bg-color);
    border: 1px solid rgba(175, 184, 193, 0.2);
    border-radius: 6px;
    box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2);
}

#all_posts {
    margin-top: var(--gap-small);
    text-align: center;
}

article {
    display: flow-root;
}

article a {
    transition: filter 0.2s, color 0.2s;
}

article a:hover {
    filter: hue-rotate(-20deg) brightness(120%);
}

/* Article headers */

main :is(h1, h2, h3, h4, h5, h6) {
    margin-block: 1.5rem 0;
    line-height: 1.25;
    clear: both;
    color: var(--header-color, currentColor);
}

main :is(h1, h2, h3, h4, h5, h6)>a:is(:hover, :active, :focus) {
    text-decoration: none;
}

main h1 {
    font-size: 1.7rem;
}

main h2 {
    font-size: 1.5rem;
    color: var(--color-article-h2, currentColor);
}

main h3 {
    font-size: 1.25rem;
    color: var(--color-article-h3, currentColor);
}

main h4 {
    font-size: 1.125rem;
    color: var(--color-article-h4, currentColor);
}

article a.anchor>svg {
    vertical-align: middle;
    visibility: hidden;
    display: inline-block;
}

article :is(h1, h2, h3, h4, h5, h6):is(:hover, :active, :focus) .anchor>svg {
    visibility: visible;
}

article .subtitle {
    font-size: small;
    margin: 3px 0 1rem;
}

/* Highlight targets */

main [id] {
    --target-shift: calc(10px + var(--header-height));

    position: relative;
    scroll-margin-top: var(--target-shift);
    scroll-snap-align: start;
}

main [id]::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    bottom: -3px;
    height: 2px;
    width: min(33%, 275px);
    background-image: linear-gradient(to right, var(--target-color), var(--target-color) 33%, transparent);
    transition: clip-path 1s ease-out;
    /* Hidden by default */
    clip-path: inset(0 100% 0 0);
}

main [id]:target::after {
    clip-path: inset(0);
}

/* Download button */

a.download_button {
    display: inline-block;
    font-size: 1.5625rem;
    line-height: 49px;
    min-width: 220px;
    padding: 0 5px;
    color: var(--download-button-text-color, var(--link));
    border: 1px solid var(--download-button-border-color, #0366d6);
    border-radius: 2px;
    transition: all 0.3s;
}

a.download_button:is(:hover, :active, :focus) {
    background-color: var(--download-button-background-color, rgba(3, 102, 214, 0.05));
    text-decoration: none;
    box-shadow: 0 2px 4px var(--download-button-shadow-color, rgba(83, 100, 255, 0.45));
    filter: none;
}

/* Cut line */

article hr {
    border: 0;
    border-top: 2px solid var(--hr-color, lightgrey);
}

/* Tables */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

article table {
    display: block;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    width: max-content;
}

article table td,
article table th {
    border: 1px solid #e0e3e6;
    padding: 6px 13px;
}

article table td:first-child {
    white-space: nowrap;
}

article table tr:nth-child(2n) {
    background-color: var(--code-bg-color);
}

/* Menu button */

input#menu-btn {
    /* Hide checkbox, the input tag.
       The user clicks on the label instead. */
    display: none;
}

.menu-btn {
    /* Label*/
    padding: calc((var(--header-height) - var(--menu-icon-slice-height)) / 2) calc((var(--header-height) - var(--menu-icon-slice-width)) / 2);
    user-select: none;
    display: block;
}

.menu-btn>.menu-icon {
    background-color: currentColor;
    display: block;
    width: var(--menu-icon-slice-width);
    height: var(--menu-icon-slice-height);
    position: relative;
    font-size: 0px;
}

.menu-btn>.menu-icon::before,
.menu-btn>.menu-icon::after {
    content: "";
    display: block;
    background-color: inherit;
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Hamburger */

.menu-btn>.hamburger,
.menu-btn>.hamburger::before,
.menu-btn>.hamburger::after {
    transition: all 0.2s ease-out;
}

.menu-btn>.hamburger::before {
    top: 5px;
}

.menu-btn>.hamburger::after {
    top: -5px;
}

/* Hamburger checked */

input#menu-btn:checked~header label.menu-btn {
    background-color: var(--header-item-focused-background-color);
}

input#menu-btn:checked~header .hamburger {
    background-color: transparent;
}

input#menu-btn:checked~header .hamburger::before {
    rotate: -45deg;
    top: 0;
}

input#menu-btn:checked~header .hamburger::after {
    rotate: 45deg;
    top: 0;
}

body:has(input#menu-btn:checked) {
    /* When the sidebar is visible, the body shouldn't scroll.
       Instead the user scrolls the sidebar (if the sidebar is tall enough). */
    overflow-y: hidden;
}

/* Sidebar: Jump to top button */

.menu-btn>.up-arrow {
    rotate: 90deg;
}

.menu-btn>.up-arrow::before,
.menu-btn>.up-arrow::after {
    width: 58%;
    left: -2px;
}

.menu-btn>.up-arrow::before {
    rotate: 45deg;
    top: 3px;
}

.menu-btn>.up-arrow::after {
    rotate: -45deg;
    top: -3px;
}

/* Sidebar: Close button */

.menu-btn>.close-btn {
    background-color: transparent;
}

.menu-btn>.close-btn::before,
.menu-btn>.close-btn::after {
    top: 0;
}

.menu-btn>.close-btn::before {
    rotate: -45deg;
}

.menu-btn>.close-btn::after {
    rotate: 45deg;
}

/* Sidebar */

#sidebar {
    --sidebar-width: min(100vw, 400px);
    --main-shadow: 0 0 1rem rgb(0 0 0 / 0.33);
    --overlay-shadow-off: 0 0 0 200vmax transparent;
    --overlay-shadow-on: 0 0 0 200vmax rgb(0 0 0 / 0.25);

    width: var(--sidebar-width);
    max-width: 100vw;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-block: contain;
    font-size: 1rem;
    z-index: 150;
    background-color: var(--sidebar-background-color);
    color: gray;
    position: fixed;
    inset: 0 calc(-1 * var(--sidebar-width)) 0 auto;
    visibility: hidden;
    transition: right 0.2s, visibility 0.2s, box-shadow 0.33s;
    box-shadow: var(--main-shadow), var(--overlay-shadow-off);
}

/* Opened sidebar */

input#menu-btn:checked~#sidebar {
    right: 0px;
    visibility: visible;
    box-shadow: var(--main-shadow), var(--overlay-shadow-on);
}

/* Inside sidebar */

#sidebar ul,
#sidebar ol {
    list-style-position: inside;
    padding-left: 1em;
}

#sidebar>.page-contents>ul,
#sidebar>.page-contents>ol {
    clear: both;
    margin: 8px;
    padding-left: 0;
}

#sidebar>.page-contents ::marker {
    color: var(--sidebar-list-marker, #7fdbffaa);
}

#sidebar ul:only-child,
#sidebar ol:only-child {
    padding-left: 0;
}

#sidebar li+li {
    padding-top: 0.25em;
}

#sidebar a,
#sidebar a:visited {
    display: inline;
    color: var(--sidebar-link-color);
    text-decoration: none;
    user-select: none;
}

#sidebar a:is(:hover, :active, :focus) {
    color: var(--sidebar-link-color-hover, #f1f1f1);
}

#sidebar>hr {
    border: 0px;
    border-top: 2px solid var(--hr-color, lightgrey);
    opacity: 0.25;
    margin: 10px 20px;
}

#sidebar> :is(div:empty, div:empty + hr) {
    visibility: hidden;
    display: none;
}

/* Sidebar: Top links */

#sidebar .sidebar_header {
    display: flex;
    background-color: inherit;
    align-content: stretch;
    align-items: stretch;
    flex-flow: row nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 18px;
    height: var(--header-height);
}

#sidebar .sidebar_header>a:first-child {
    flex: 2 1 auto;
}

#sidebar .sidebar_header>*,
#sidebar .sidebar_header>*:visited {
    user-select: none;
    min-width: var(--header-height);
    line-height: var(--header-height);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.1s, color 0.1s;
}

#sidebar .sidebar_header> :is(:hover, :active) {
    background-color: var(--sidebar-item-background-color-hover, #3f3f3f);
    color: var(--sidebar-important-link-color-hover, #f1f1f1);
}

/* Theme selector */

.sidebar_header input[type="radio"] {
    --button-size: 14px;
    --button-outline: 3px;
    appearance: none;
    display: grid;
    place-items: center;
}

.sidebar_header input[type="radio"]::after {
    display: block;
    content: "";
    width: var(--button-size);
    height: var(--button-size);
    outline: var(--button-outline) solid var(--theme-radio-color, currentColor);
    outline-offset: var(--button-outline);
    border-radius: 100vmax;
    margin: auto;
}

.sidebar_header input[type="radio"]:checked::after {
    background-color: var(--theme-radio-color, currentColor);
}

.sidebar_header input[type="radio"]#light {
    --theme-radio-color: lightgrey;
}

.sidebar_header input[type="radio"]#pink {
    --theme-radio-color: pink;
}

.sidebar_header input[type="radio"]#dark {
    --theme-radio-color: rgb(94, 94, 94);
}

/* Sidebar: Buttons */

#sidebar .menu-btn>.menu-icon:not(.close-btn),
#sidebar .menu-btn>.menu-icon::before,
#sidebar .menu-btn>.menu-icon::after {
    background-color: var(--sidebar-link-color);
    transition: background-color 0.1s;
}

#sidebar .menu-btn:is(:hover, :active, :focus)>.menu-icon:not(.close-btn),
#sidebar .menu-btn:is(:hover, :active, :focus)>.menu-icon::before,
#sidebar .menu-btn:is(:hover, :active, :focus)>.menu-icon::after {
    background-color: var(--sidebar-important-link-color-hover);
}

/* Sidebar: important links */

#sidebar .important-links {
    margin: 10px 20px;
    gap: 10px;
    columns: 2;
}

#sidebar .important-links a {
    display: block;
    padding: 6px 0 6px 6px;
    text-align: left;
    column-gap: 10px;
    transition: background-color 0.1s, color 0.1s;
}

#sidebar .important-links a:last-child:nth-child(odd) {
    column-span: all;
}

#sidebar .important-links a:is(:hover, :active, :focus) {
    color: var(--sidebar-important-link-color-hover, #f1f1f1);
    background-color: var(--sidebar-item-background-color-hover, #3f3f3f);
}

/* Tooltips */

article :is(span, abbr)[title] {
    cursor: help;
    text-decoration: underline dotted;
}

article :is(span, abbr)[title]:is(:hover, :active, :focus) {
    text-decoration: none;
    color: rgb(159, 20, 26);
}

/*
   Inline images
   The Yomichan guide utilizes inline images.
*/

article img {
    display: inline-block;
    margin: 0;
}

/* Link buttons */

a.md-button,
a.md-button:visited {
    min-width: 225px;
    max-width: 100%;
    height: 50px;
    color: white;
    background-color: var(--md-button-background, #0b5570);
    font-weight: 700;
    border-radius: 2.2px;
    text-decoration: none;
    line-height: 1.6;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    column-gap: 5px;
    flex-flow: row nowrap;
    transition: background-color 125ms;
    padding: 0 1.8em;
    font-size: 1rem;
    text-shadow: none;
}

a.md-button:is(:hover, :active, :focus) {
    text-decoration: none;
    background-color: var(--md-button-background-hover, #00bad6);
    color: white;
    filter: none;
}

a.md-button::before {
    --icon-side: 1.4em;

    content: "";
    width: var(--icon-side);
    height: var(--icon-side);
    background-size: auto var(--icon-side);
    background-position: center;
    background-repeat: no-repeat;
}



/* ToC navigation */

#divbodyholder>#divbody {
    position: relative;
}

.toc_navigation {
    position: absolute;
    z-index: 50;
    bottom: -1rem;
    right: 0px;
    padding-right: inherit;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    gap: 10px;
}

.toc_navigation>a {
    min-width: 50px;
    height: 31px;
    padding: 0 1.4em;
}

.toc_navigation>a::before {
    filter: invert(1);
    width: 1em;
    height: 1em;
    background-size: 1em;
}

.toc_navigation>a.next::before {
    rotate: 90deg;
}

.toc_navigation>a.prev::before {
    rotate: -90deg;
}

/* copy/select button for code blocks */

article div.pre-wrap {
    /* Wraps all pre tags. */
    position: relative;
}

article pre>.select_button {
    position: absolute;
    display: block;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 6px;
    margin: 0;
    right: 6px;
    top: 6px;
    text-transform: capitalize;
    background-color: var(--code-bg-color);
    border: 1px solid #1b1f2426;
    border-radius: 6px;
    transition: background-color cubic-bezier(0.33, 1, 0.68, 1) 80ms, opacity ease-in 0.15s, visibility ease-in 0.15s;
    color: #57606a;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
}

article pre>.select_button::before {
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: -4px;
    cursor: pointer;
    filter: invert(34%) sepia(19%) saturate(307%) hue-rotate(171deg) brightness(99%) contrast(87%);
}

article pre>.select_button:is(:hover, :active, :focus) {
    background-color: #f3f4f6;
}

article pre>.select_button:active {
    background-color: #ebecf0;
}

article pre:is(:hover, :active, :focus)>.select_button {
    visibility: visible;
    opacity: 1;
}

/* Status tooltip for copy/select button */

article pre>.select_button::after {
    display: block;
    content: "";
    line-height: 18px;
    min-width: 90px;
    background-color: #000000b2;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 3px 0px;
    position: absolute;
    z-index: 150;
    top: 0px;
    right: calc(100% + 6px);
    opacity: 0;
    visibility: hidden;
}

article pre:is(:hover, :active, :focus)>.select_button[status]::after {
    visibility: visible;
    opacity: 1;
}

.select_button[status="copied"]::after {
    content: "Copied.";
}

.select_button[status="selected"]::after {
    content: "Selected.";
}

/* Footer */

footer {
    font-size: 1rem;
    border-top: solid 1px var(--box-sep-color, #ccc);
    background-color: #51628f;
    background-image: linear-gradient(rgba(197, 138, 159, 0.33), rgba(68, 47, 55, 0.66)),
        url("media/charlotte.png");
    color: white;
    text-shadow: #0006 1px 1px 2px;
    background-size: cover;
    background-position: center 20%;
}

footer p {
    line-height: 1.5;
}

footer a,
footer a:visited {
    color: #e9e2dc;
}

footer a:is(:hover, :active, :focus) {
    color: #fff8ee;
}

footer>.footer-linkbox {
    display: grid;
    max-width: 1350px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 1rem;
    align-content: start;
    justify-content: space-around;
    text-align: left;
    padding: 15px 10px;
}

footer>.footer-linkbox div {
    padding: 5px;
}

footer>.footer-linkbox h3 {
    text-transform: uppercase;
    font-size: 1.3125rem;
    line-height: 25px;
    letter-spacing: 0px;
    margin-bottom: 10px;
}

footer>.footer-linkbox p {
    margin-bottom: 1rem;
}

footer>.footer-linkbox p:last-child {
    margin-bottom: 0;
}

footer>.footer-linkbox ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer>.footer-linkbox ul li a {
    line-height: 28px;
    display: inline-block;
}

footer>.footer-bottom {
    background-color: #0004;
    font-size: 0.875rem;
    text-align: center;
    padding: 10px 4px;
    border-top: 1px solid #ffffff1e;
}



/* Floating images in articles */

article img[float] {
    /* Mobile screens first */
    float: none;
    display: block;
    margin-inline: auto;
    max-height: min(40vh, 250px);
}

article *+img[float] {
    margin-block: 1rem 0;
}

@media only screen and (min-width: 800px) {

    /* Wide screens. Enable floating. */
    article img[float] {
        float: right;
        max-width: 33.3%;
        margin-inline: 5px 0;
    }

    article img[float="left"] {
        float: left;
        margin-inline: 0 5px;
    }
}

/* Audio elements with controls */

article audio {
    display: block;
    max-width: 100%;
    margin: 0.25em 0 0;
    height: 1.8em;
}