.document {
    --color-text: #ffffff;
    --color-concept: hsl(39, 100%, 25%, 0.5);
    --color-concept-hsl: 39, 100%, 25%;
    --color-outline: #ffffff40;
    * {
        color: var(--color-text);
    }
    h1 {
        position: relative;
        width: auto;
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    hr {
        padding: 0;
        margin: 0;
        border: none;
        border-top: 1px solid var(--color-outline);
    }
    > *:not(h1, hr) {
        margin-left: 2rem;
    }
    h2 {
        font-size: 1.5rem;
        position: relative;
        &::before {
            content: '#';
            position: absolute;
            top: 0;
            left: -1.5rem;
            font-size: 1.75rem;
            color: rgb(131, 131, 131);
        }
    }
    h3 {
        font-size: 1.25rem;
    }
    h4 {
        font-size: 1.05rem;
    }
    hr {
        border: none;
        border-top: 1px solid var(--color-outline);
    }
    img {
        max-height: 300px;
    }
    a {
        position: relative;
        display: inline-block;
        transform: translate(0, 0);
        text-shadow: 0 0 1rem hsl(var(--color-concept-hsl));
        transition: 0.2s ease-out;
        font-weight: normal;
        &:hover {
            transform: translate(0, -0.1rem);
        }
    }
    blockquote {
        position: relative;
        font-size: 1.1rem;
        font-weight: bold;
        padding: 0;
        padding-left: 1rem;
        color: rgb(162, 162, 162);
        &::before {
            content: '“';
            position: absolute;
            top: 0;
            left: -0.5rem;
            font-size: 2rem;
            color: rgb(131, 131, 131);
        }
    }
    warn {
        position: relative;
        display: block;
        padding: 1rem 0.7rem 0.7rem;
        background-image: linear-gradient(to right, var(--color-outline), transparent 75%);
        background-origin: border-box;
        box-shadow: inset 0 0 0 100vh var(--background-color);
        text-shadow: 0 0 1rem hsl(var(--color-concept-hsl),1);
        border: 1px solid transparent;
        border-radius: 0.5rem;
        &::before {
            content: 'note:warn';
            position: relative;
            display: block;
            top: 0;
            font-size: 0.8rem;
            margin-bottom: -0.3rem;
            transform: translate(0, -0.5rem);
            text-shadow: 0 0 1rem red;
        }
    }
    pre {
        font-family: monospace;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }
    code {
        display: inline-block;
        padding: 0.2rem;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 0.2rem;
        font-family: monospace;
    }
    details {
        position: relative;
        display: block;
        border-radius: 0.5rem;
        transition: 0.2s ease-out;
        transition-property: height;
        padding-inline-start: 0.1rem;
        > summary {
            position: relative;
            border-radius: 0.5rem;
            list-style: '＋ ' outside;
            margin-left: 1rem;
            padding: 0.2rem;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.25), transparent 200px);
            cursor: pointer;
            &:hover {
                text-shadow: 0 0 0.25rem rgb(255, 255, 255);
            }
        }
        > p {
            margin-block-start: 0.5rem;
            margin-block-end: 0.5rem;
            margin-left: 1rem;
            display: none;
        }
        &[open] {
            > summary {
                list-style: '－ ' outside;
            }
            > p {
                animation: detailsIn 0.5s ease;
                display: block;
            }
        }
    }
    @keyframes detailsIn {
        0% {
            opacity: 0;
            transform: translateY(-10px);
        }
        100% {
            opacity: 1;
            transform: none;
        }
    }
    table {
        border-spacing: 0;
        border: none;
        border: 1px solid var(--color-outline);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 0.5rem hsl(var(--color-concept-hsl), 0.5);
        thead {
            background-color: rgba(0, 0, 0, 0.1);
            color: #fff;
        }
        tr {
            &:nth-child(2n) {
                background-color: #ffffff0d;
            }
        }
        td,
        th {
            padding: 0.5em;
            border-left: 1px solid var(--color-outline);
            &:first-child {
                border-left: none;
            }
        }
    }
}