{{ define "main" }}
<article class="py:42 mx:auto max-w:704px">
    <header class="mb:2em">
        <div class="font:40 font:extrabold">{{ .Title }}</div>
        <div class="mt:.8em font:gray">
            {{- if isset .Params "date" -}}
            {{ if eq .Lastmod .Date }}
            <time>{{ .Date | time.Format (":date_medium") }}</time>
            {{ else }}
            <time>{{ .Lastmod | time.Format (":date_medium") }}</time>
            {{ end }}
            {{- end -}}
        </div>
    </header>

    {{/* <div class="
        my:16>p
        mt:0>p+p
        mt:32>:where(h1,h2,h3,h4,h5,h6)

        my:16>blockquote
        border-left:2px>blockquote
        pl:16>blockquote_p
    "> */}}

        <div class="
    text-underline-offset:3_:where(a,mark)
    text-decoration:2;underline;fade-23_:where(a)
    text-decoration-color:fade-68_:where(a)@dark
    text-decoration-color:blue-36!_:where(a):hover
    text-decoration:1;underline;#fce016_:where(mark)
    text-decoration-color:rgb(252;224;22/.5)_:where(mark)@dark
    text-decoration:1;line-through;fade-68_:where(del)
    text-decoration-color:red-64_:where(del)@dark
    bg:transparent_:where(mark)
    mb:1em_:where(h2)
    font:40_:where(h1)
    font:32_:where(h2)
    font:24_:where(h3)
    font:20_:where(h4)
    font:16_:where(h5)
    font:14_:where(h6)
    font:90%_:where(code)
    font:semibold_:where(th,p_code,li_code,a,mark)
    font:medium_:where(th,p_code,li_code,a,mark)@dark
    font:gray-78_:where(th)
    font:gray-12_:where(th)@dark
    font:extrabold_:where(h1)
    
    p:20_:where(pre)
    r:8_:where(pre)
    overflow:auto_:where(pre)
    bg:gray-3_:where(pre,code:not(.highlight_*))
    bg:gray-93_:where(pre,code:not(.highlight_*))@dark
    p:2;4_:where(code:not(.highlight_*))
    r:4_:where(code:not(.highlight_*))

    pl:1.5em_:where(ul,ol,blockquote)
    pl:.375em_:where(li)
    mt:.5em_:where(h1,h2,h3)+:where(h1,h2,h3)
    my:1.125em_:where(p,pre,blockquote,figure,ul,ol,table)
    mt:2em_:where(h1,h2,h3,h4,h5,h6)
    list-style-type:disc_:where(ul)
    font:fade-76_:where(p,li)
    font:gray-34_:where(p,li)@dark
    font:fade-92_:where(strong,b,a,code:not(.highlight_*),mark,del)
    font:gray-12_:where(strong,b,a,code:not(.highlight_*),mark,del)@dark
    font:fade-45_:where(li)::marker
    font:gray-68_:where(li)::marker@dark
    font:16_:where(p,li)
    line-height:1.65_:where(p,li)
    bl:5;solid;fade-76/.1_:where(blockquote)
    bl:5;solid;fade-34/.1_:where(blockquote)@dark
    max-width:full_:where(video,img)
    text:14_:where(figcaption)
    p:10;20;0_:where(figcaption)
    width:fit_:where(figcaption)
    mx:auto_:where(figcaption)
    font:fade-56_:where(figcaption)
    font:gray-57_:where(figcaption)@dark
    width:full_:where(table)
    border-spacing:0_:where(table)
    bb:1;solid;fade-92/.06_:where(td,th)
    b:gray-4/.04_:where(td,th)@dark
    text:left_:where(th)
    pl:0_:where(td,th):first-child
    pr:0_:where(td,th):last-child
    p:6_:where(td,th)
    v:middle_:where(code)
    font:14_:where(th)
    v:baseline_:where(td)
    ">
            {{- .Content -}}
        </div>
</article>
{{ end }}