/* reset style */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
main, section, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing: border-box;
}
/** ================
 *     basement style
 ** ================ */
:root {
    interpolate-size: allow-keywords;

    --html-height: 100vh;

    --bg-color-body: #fff;
    --color-body: #2b2b2b;
    --color-link: #007b43;
    --color-link-hover: #E6B422;
    --color-title: #2b2b2b;

    --color-accent-black: #2b2b2b;
    --color-accent-gray: #808080;
    --color-accent-blue: #2f81f7;
    --color-accent-green: #3fb950;
    --color-accent-purple: #a371f7;
    --color-accent-yellow: #d29922;
    --color-accent-red: #f85149;
    --bg-color-accent-light: #efefef;
    --bg-color-accent-dark: #d0d0d0;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color-body: #1c1c1c;
        --color-body: #d0d0d0;
        --color-link: color-mix(in srgb, #007b43, #fff 10%);

        --color-accent-black: #d0d0d0;
        --color-accent-gray: #808080;
        --bg-color-accent-light: #2f2f2f;
        --bg-color-accent-dark: #4c4c4c;
    }
}
body { 
    font-size: 18px;
    font-family: --apple-system,
        "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
    color: var(--color-body);
    background-color: var(--bg-color-body);
    font-weight: 400;
    line-height: 1.5;
}
p {
    margin: 4px 16px;
}
/* heading */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}
h1 {
    font-size: 32px;
    margin: 24px 0 16px 0; 
}
h2 {
     font-size: 28px;
     margin: 21px 0 14px 0;
}
h3 {
     font-size: 24px;
     margin: 18px 0 12px 0;
}
h4 {
     font-size: 20px;
     margin: 15px 0 10px 0;
}
h5 {
    font-size: 20px;
     margin: 15px 0 10px 0;
}
h5 {
     font-size: 20px;
     margin: 15px 0 10px 0;
}
h6 {
    font-size: 20px;
    margin: 15px 0 10px 0;
}
/* inline tags */
a {
    color: var(--color-link);
    transition: color 0.05s linear;
}
a:hover {
    color: var(--color-link-hover);
    text-decoration: none;
}
b, strong, a b, a strong {
    font-weight: 700;
}
em, a em {
    font-style: italic;
}
ins {
    background-color: color-mix(in srgb, var(--color-accent-green) 20%, var(--bg-color-body));
}
del {
    background-color: color-mix(in srgb, var(--color-accent-red) 20%, var(--bg-color-body));
}
mark {
    background-color: color-mix(in srgb, var(--color-accent-yellow) 40%, var(--bg-color-body));
}
ins, del, mark {
    border-radius: 2px;
    padding: 0 4px;
}
img { 
    display: inline-block; 
    border-radius: 8px;
    max-width: 100%;
}
/* listing */
ul, ol, dl {
    margin: 4px 16px 8px 16px;
    list-style-position: inside;
}
li > p:first-child, 
dd > p:first-child {
    display: inline-block;
}
/* quotes */
q, code {
    display: inline-block;
    background-color: var(--bg-color-accent-light);
    border-radius: 2px;
    padding: 0 4px;
}
code {
    font-family: Consolas, Courier, Osaka, monospace;
    font-size: 18px;
}
pre > code {
    display: block;
    background-color: var(--bg-color-accent-light);
    border-radius: 2px;
    padding: 8px 16px;
    margin: 8px 16px;
}
blockquote {
    border-left: 4px solid var(--color-accent-gray);
    border-top: 1px solid var(--bg-color-accent-dark);
    border-bottom: 1px solid var(--bg-color-accent-dark);
    border-right: 1px solid var(--bg-color-accent-dark);
    border-radius: 2px;
    padding: 4px 2px;
    margin: 8px 16px;
}
blockquote > blockquote {
    margin-right: 4px;
}
details {
    margin: 8px 16px;
    padding: 8px 16px;
    background-color: var(--bg-color-accent-light);
    border-radius: 2px;
    &::details-content {
        height: 0;
        overflow: clip;
        transition: height 0.05s ease, content-visibility 0.05s ease allow-discrete;
    }
    &[open]::details-content {
        height: auto;
        height: calc-size(auto, size);
    }
}
details summary {
    cursor: pointer;
    overflow: hidden; /* マーカーを回転したときにはみ出さないように */
    &::before {
        content: "";
        display: inline-block;
        background: var(--color-accent-black);
        mask-image: url("/assets/caret-right.svg");
        mask-size: 1.25rem;
        mask-repeat: no-repeat;
        height: 1.25rem;
        width: 1.25rem;
        margin-left: -2px;
        margin-right: 8px;
        vertical-align: middle;
        transition: transform 0.05s linear;
    }
    [open] &::before {
        transform: rotate(90deg);
    }
    &::marker {
        display: none;
        content: ""; /* display: none が効かないので */
    }
}
/* table */
table {
    margin: 8px 16px;
    width: calc(100% - 32px);
}
th {
    padding: 8px;
    background-color: var(--bg-color-accent-dark);
}
td {
    padding: 8px;
    background-color: var(--bg-color-accent-light);
}
tr:first-child th:first-child,
tr:first-child td:first-child {
    border-top-left-radius: 2px;
}
tr:first-child th:last-child,
tr:first-child td:last-child {
    border-top-right-radius: 2px;
}
tr:last-child td:first-child {
    border-bottom-left-radius: 2px;
}
tr:last-child td:last-child {
    border-bottom-right-radius: 2px;
}
hr {
    border: 0;
    background-color: var(--color-accent-green);
    height: 3px;
    margin: 16px 0;
    width: 100%;
    border-radius: 2px;
}

/* alerts with markdown-it-container */
.alert {
    border-radius: 2px;
    padding: 8px 16px;
    margin: 8px 16px;
    background-color: color-mix(in srgb, var(--color-alert) 20%, var(--bg-color-body));

    &.note {
        --image-alert: url("/assets/info.svg");
        --color-alert: var(--color-accent-blue);
    }
    &.tip {
        --image-alert: url("/assets/lightbulb-on.svg");
        --color-alert: var(--color-accent-green);
    }
    &.important{
        --image-alert: url("/assets/comment-alt-dots.svg");
        --color-alert: var(--color-accent-purple);
    }
    &.warning {
        --image-alert: url("/assets/triangle-warning.svg");
        --color-alert: var(--color-accent-yellow);
    }
    &.caution {
        --image-alert: url("/assets/octagon-exclamation.svg");
        --color-alert: var(--color-accent-red);
    }
    > p:first-child::before {
        display: inline-block;
        position: relative;
        content: "";
        background-color: var(--color-alert);
        mask-image: var(--image-alert);
        mask-size: contain;
        mask-repeat: no-repeat;
        vertical-align: middle;
        width: 1.25rem;
        height: 1.25rem;
        margin-left: -16px;
        margin-right: 16px;
    }
}

/* ===================
 *    site style
 **===================*/
html {
    --width-content: 800px;
    --size-logo: 300px;
    --fill-color-logo: #E6B422;
}
#title {
    & {
        margin-top: 48px;
        margin-bottom: 48px;
        position: relative;
        text-align: center;
        overflow: visible;
    }
    h1 {
        display: inline-block;
        font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W6", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HiraMinProN-W6", "MS 明朝", serif;
        font-size: 80px;
        line-height: 1;
        margin: 0;
        padding: 0;
        letter-spacing: 1rem;
        padding-left: 1rem;
        paint-order: stroke fill;
        -webkit-text-stroke: 8px #fff;
    }
    h1::before, 
    h1::after {
        content: "";
        display: block;
        position: absolute;
        top: calc(50% - var(--size-logo) * 0.5);
        left: calc(50% - var(--size-logo) * 0.5);
        width: var(--size-logo);
        height: var(--size-logo);
        pointer-events: none;
    }
    h1::before {
        background-image: linear-gradient(to bottom, #fffc, #0000 50%);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.4s ease-out, transform 0.4s linear;
        mask-image: linear-gradient(100deg, #0000,#0000 40%, #000 50%, #000 65%,#0000 70%, #0000);
    }
    h1:hover::before {
        opacity: 1;
        transform: rotate(5deg), translateX(20px);
    }
    h1::after {
        background-color : color-mix(in srgb, var(--fill-color-logo) 30%, color-mix(in srgb, var(--bg-color-body), #9c9c9c));
        /*
        filter: grayscale を transition させるとぼやけるのでカラーコードで直指定
        grayscale: #E6B422,#DCB12F,#D2AE3B,#C9AB47,#BFA853,#B5A55F,#ABA26B,#A29F77,#989C83,#8E9990,#9C9C9C 
        */
        mask: url("/logo.svg");
        mask-size: cover;
        transform: rotate(-3deg);
        z-index: -2;
        transition: background-color .2s ease, transform .4s ease;
    }
    h1:hover::after {
        background-color: color-mix(in srgb, var(--fill-color-logo) 70%, var(--bg-color-body));
        transform: scale(1.02) rotate(2deg);
    }
    a {
        color: var(--color-title);
        text-decoration: none;
    }
    rt {
        font-size: 24px;
        font-weight: 700;
    }
}

#content {
    & {
        width: var(--width-content);
        margin: 0 auto;
        padding: 16px;
    }
    .markdown {
        display: none;
    }
}

#global-footer {
    & {
        width: var(--width-content);
        margin: 16px auto;
        text-align: center;
    }
    #footer-menu {
        & {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 16px;
            margin: 16px 0;
        }
        .item:nth-child(1) {
            text-align: right;
            grid-column: 1;
        }
        .item:nth-child(2) {
            text-align: left;
            grid-column: 2;
        }
    }

    #copyright {
        margin-top: 8px;
    }
}

.cactus::before {
    display: inline-block;
    width: 30px;
    height: 30px;
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="m22.981,10.733c-.673-.571-1.562-.819-2.439-.674h0c-1.427.232-2.503,1.551-2.503,3.067v.893h-1V5.191C17.038,2.545,15.057.284,12.526.042c-1.4-.132-2.811.331-3.851,1.277-1.041.946-1.638,2.294-1.638,3.7v4h-1v-.893c0-1.516-1.076-2.834-2.504-3.067-.881-.145-1.768.104-2.439.674C.424,6.305.038,7.138.038,8.019v2c0,2.757,2.243,5,5,5h2v5c0,2.206,1.794,4,4,4h2c2.206,0,4-1.794,4-4h2c2.757,0,5-2.243,5-5v-2c0-.881-.386-1.714-1.057-2.286Zm-.943,4.286c0,1.654-1.346,3-3,3h-3c-.553,0-1,.448-1,1v1c0,1.103-.897,2-2,2h-2c-1.103,0-2-.897-2-2v-6c0-.552-.447-1-1-1h-3c-1.654,0-3-1.346-3-3v-2c0-.293.129-.571.353-.762.184-.156.409-.238.648-.238.058,0,.115.005.174.014.463.076.825.556.825,1.093v.893c0,1.103.897,2,2,2h1c1.103,0,2-.897,2-2v-4c0-.843.358-1.652.982-2.22.633-.575,1.449-.848,2.316-.765,1.515.145,2.701,1.531,2.701,3.157v8.828c0,1.103.897,2,2,2h1c1.103,0,2-.897,2-2v-.893c0-.538.362-1.018.824-1.093.302-.046.596.031.823.224.224.191.353.469.353.762v2Z"/><circle cx="11.5" cy="18.5" r="1.5"/><circle cx="11.5" cy="6.5" r="1.5"/><circle cx="12.5" cy="12.5" r="1.5"/></svg>');
}

a.image, a.reference {
    display: inline-block;
    overflow: hidden;
    width: 1.25rem;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.5rem;
    margin: 0 2px;
}

a.image::before, a.reference::before {
    display: inline-block;
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--color-link);
    mask-repeat: no-repeat;
    mask-size: 1.15rem;
    mask-position: center;
}
a.image:hover::before, a.reference:hover::before {
    background-color: var(--color-link-hover);
}
a.image::before {
    mask-image: url("/assets/picture.svg");
}
a.reference::before {
    mask-image: url("/assets/square-quote.svg");
}
.markdown {
    opacity: 0;
}
/* body background */
#background-left, #background-right {
    --width: 130px;
    --margin: 30px;
    pointer-events: none;
    z-index: -3;
    position: absolute;
    top: 0;
    width: var(--width);
    height: var(--html-height);
    content: "";
    background: color-mix(in lch, var(--fill-color-logo), var(--bg-color-body) 40%);
    mask-image: 
        repeating-linear-gradient(45deg, #000, #000 10px, #0000 10px, #0000 20px),
        repeating-linear-gradient(45deg, #000, #000 14px, #0000 14px, #0000 40px),
        repeating-linear-gradient(45deg, #000, #000 14px, #0000 14px, #0000 40px);
    mask-size: 100% 100%, 15px 100%, 15px 100%, 100% 10px;
    mask-repeat: repeat-y, repeat-y, repeat-y, repeat-x;
    mask-position: 0 0, 0 2px, right 33px, 0 0;
    mask-composite: subtract, add, add;
}
#background-left {
    left: calc(50% - var(--width-content) * 0.5 - var(--width) - var(--margin));
}
#background-right {
    right: calc(50% - var(--width-content) * 0.5 - var(--width) - var(--margin));
}