html {
    font-family: sans-serif;
    word-break: break-all;
}

body {
    margin: 0;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* IE 9~10 で main への background がなぜか効かないので body に指定する */
/* Safari の Safe Area 外の見栄えのために普通の環境では body に指定したくない (が IE には Safe Area なんてないので body 指定で良い) */
body {
    background: #eee\9;
}

/* IE11 はなんかflex回りで壊れるので block にfallback */
_:-ms-lang(x)::-ms-backdrop, body {
    display: block;
    background: #eee;
}

main {
    background: #eee;
    flex: 1;
    position: relative;
}

.card {
    background: white;
    padding: 1em; /* rem 使えないブラウザ用、今時使えないブラウザはたぶん画面が狭いのでちょっと小さめの値にしておく */
    padding: 3rem;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2);
}

header > *:first-child {
    margin-block-start: 0;
}
header > *:last-child {
    margin-block-end: 0;
}
a.muted {
    color: inherit !important;
    text-decoration: none;
}

.card {
    position: relative;
    margin: 2em auto; /* rem 使えないブラウザ用 */
    margin: 2rem auto;
    max-width: 80em; /* rem 使えないブラウザ用 */
    max-width: 80rem;
    z-index: 1;
}

.card.full-width {
    max-width: none;
    border: none;
    margin: 0;
}

article.card {
    /* カテゴリのリンクがネガティブマージンで上にやってくるのでこんな大きい値になっている */
    margin-top: 6em !important; /* rem 使えないブラウザ用 */
    margin-top: 6rem !important;
    margin-top: calc(2rem + 2rem + 1lh) !important;
}

.card > h1:first-child {
    margin: 0; /* IE11 はこれがないとダメっぽい */
    margin-block-start: 0;
    margin-block-end: 2rem;
}

pre {
    max-width: 100%;
    overflow-x: scroll;
    border: 1px solid #888;
    padding: 0.5em; /* rem 使えないブラウザ用 */
    padding: 0.5rem;
}

/* 本来は *:not(pre) > code でいいが、我々は古いブラウザフレンドリーなので…… */
code {
    background: #ddd;
    border-radius: 4px;
    padding: 0.25em 0.5em; /* rem 使えないブラウザ用 */
    padding: 0.25rem 0.5rem;
}

/* 本来は pre > code でいいが、IE 6 が対応しておらず…… */
pre code {
    background: none;
    padding: 0;
    border: none;
}

img {
    display: block;
    border: 1px #888 solid;
    max-width: 100%;
}

.notice {
    font-weight: bold;
    border-radius: 4px;
    padding: 1em; /* rem 使えないブラウザ用 */
    padding: 1rem;
    position: relative;
    z-index: 1;
    margin: 1em 0; /* rem 使えないブラウザ用 */
    margin: 1rem 0;
}

/* モダンブラウザだけ考えるなら .notice にこのクラスを付ければいいはずだが、sticky 非対応ブラウザでは別要素で囲まないと top だけ読まれて要素がズレる */
.notice-sticky-wrapper {
    position: sticky;
    top: 1rem;
}

.notice::before, .notice::after {
    border-radius: 4px;
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75);
}

.notice::before {
    backdrop-filter: blur(8px);
}

.notice-warning {
    border: 1px solid hsl(30, 100%, 50%);
}
.notice-warning::after {
    background: hsla(30, 100%, 50%, .1);
}

.notice-critical {
    border: 1px solid hsl(0, 100%, 50%);
}
.notice-critical::after {
    background: hsla(0, 100%, 50%, .1);
}

blockquote {
    border-left: 4px solid #888;
    margin-left: 0;
    padding-left: 1em; /* rem 使えないブラウザ用 */
    padding-left: 1rem;
    color: #333;
}

.card.back-to-category {
    position: absolute !important;
    margin: 0 !important;
    /* 古いブラウザ用のそれっぽい値たち */
    top: -3em;
    top: -3rem;
    top: calc(-2rem - 1lh); /* ← 本命 */
    left: 0;
    padding: 1rem;
}

.back-to-category::after {
    background: white;
    content: "";
    box-shadow: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: -10px; /* box-shadow の範囲分 */
    height: 10px;
    padding: 0;
    pointer-events: none;
}

@media screen and (max-width: 80rem) {
    .card {
        padding: 2rem;
    }
    header {
        padding: 1rem 2rem;
    }
    article {
        margin: 2rem 0;
    }
}
@media screen and (max-width: 40rem) {
    .card {
        padding: 1rem;
    }
    header {
        padding: 1rem 1rem;
    }
    article {
        margin: 2rem 0;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        color: #eee;
    }
    main {
        background: #333;
    }

    body, .card, .back-to-category::after {
        background: #111;
    }
    .notice::before {
        background: rgba(0, 0, 0, 0.75);
    }

    a[href] {
        color: hsl(210, 100%, 70%);
    }

    a[href]:visited {
        color: hsl(260, 100%, 70%);
    }

    *:not(pre) > code {
        background: #222;
    }

    blockquote {
        color: #ddd;
    }
}

#toc {
    display: inline-block;
    border: 1px solid #888;
    padding: 1em; /* rem 使えないブラウザ用 */
    padding: 1rem;
}

li.old-post {
    opacity: 0.6;
}