:root
  { --text : hsl( 60, 36%, 96% )
  ; --bg : hsl( 70, 8%, 15% )
  ; --font-size : 16pt
  ; --line-height : 1.3em
  }


* { margin : 0
  ; padding : 0
  ; word-wrap : break-word
  ; text-decoration : none
  ; color : var( --text )
  ; float : none
  ; font-size : var( --font-size )
  ; line-height : var( --line-height )
  ; font-weight : normal
  ; font-style : normal
  ; font-family : 'Consolas'
                , 'Monaco'
                , 'DejaVu Sans Mono'
                , 'PT Mono'
                , 'Courier New'
                , monospace
  }

body
  { background : var( --bg )
  ; min-width : 25em
  ; max-width : 80vw
  ; margin : 0 auto
  ; padding : 2em 10em
  }

h1, h2, h3, h4, h5, h6
, blockquote
, pre
, ol
, ul
, li
, article
  { position : relative }

article + article
  { margin-top : 2.5rem }

:is( h1, h2, h3, h4, h5, h6, blockquote, li, pre )::before
, aside
  { position : absolute
  ; right : 100%
  ; margin-right : 1em
  ; display : inline-block
  ; text-align : right
  }

:is( h1, h2, h3, h4, h5, h6, blockquote, li, pre )[dir=rtl]::before
, [dir=rtl] :is( h1, h2, h3, h4, h5, h6, blockquote, li, pre )::before
, [dir=rtl] aside, aside[dir=rtl]
/*
, :is( h1, h2, h3, h4, h5, h6, blockquote, li, pre ):dir(rtl)::before
, :dir(rtl) :is( h1, h2, h3, h4, h5, h6, blockquote, li, pre )::before
*/
  { right : unset
  ; left : 100%
  ; margin-right : unset
  ; margin-left : 1em
  ; text-align : left
  }
h1::before
  { content : '#' }
h2::before
  { content : '##' }
h3::before
  { content : '###' }
h4::before
  { content : '####' }
h5::before
  { content : '#####' }
h6::before
  { content : '######' }
blockquote::before
  { content : '>' }
ul > li::before
  { content : '-' }
ul ul > li::before
  { content : '-\00a0-' }
ul ul ul > li::before
  { content : '-\00a0-\00a0-' }
pre::before
  { content : '```' }

li
  { list-style : none }

ol
  { counter-reset : ol_lvl_1 }
ol ol
  { counter-reset : ol_lvl_2 }
ol ol ol
  { counter-reset : ol_lvl_3 }

ol > li::before
  { content : counter( ol_lvl_1 ) '.'
  ; counter-increment : ol_lvl_1
  }
ol > li:has(ol:first-child)::before
  { display : none }
ol > li > ol:first-child > li::before
  { background : var( --bg ) }

ol ol > li::before
  { content : counter( ol_lvl_1 ) '.' counter( ol_lvl_2 ) '.'
  ; counter-increment : ol_lvl_2
  }
[dir=rtl] ol ol > li::before
, ol[dir=rtl] ol > li::before
, ol ol[dir=rtl] > li::before
, ol ol > li[dir=rtl]::before
/*, ol ol > li:dir(rtl)::before*/
  { content : counter( ol_lvl_2 ) '.' counter( ol_lvl_1 ) '.'
  }

ol ol > li:has(ol:first-child)::before
  { display : none }
ol ol > li > ol:first-child > li::before
  { background : var( --bg ) }

ol ol ol > li::before
  { content : counter( ol_lvl_1 ) '.' counter( ol_lvl_2 ) '.' counter( ol_lvl_3 ) '.'
  ; counter-increment : ol_lvl_3
  }
[dir=rtl] ol ol ol > li::before
, ol[dir=rtl] ol ol > li::before
, ol ol[dir=rtl] ol > li::before
, ol ol ol[dir=rtl] > li::before
, ol ol ol > li[dir=rtl]::before
/*, ol ol ol > li:dir(rtl)::before*/
  { content : counter( ol_lvl_3 ) '.' counter( ol_lvl_2 ) '.' counter( ol_lvl_1 ) '.' }

[title]::after
  { content : '/*' attr(title) '*/'
  ; display : inline-block
  }

h1, h2, h3, h4, h5, h6
, blockquote
, p
, ul
, ol
, pre
  { margin-top : var( --line-height )
  ; margin-bottom : var( --line-height )
  }
:is( h1, h2, h3, h4, h5, h6 ):not(:first-child)
  { margin-top : calc( 2 * var( --line-height ) ) }

:is( b, strong )::before
, :is( b, strong )::after
  { content : '**'
  ; display : inline
  }
:is( b, strong )[title]::after
  { content : '**/*' attr(title) '*/' }

:is( i, em )::before
, :is( i, em )::after
  { content : '_'
  ; display : inline
  }
:is( i, em )[title]::after
  { content : '_/*' attr(title) '*/' }

u::before
, u::after
  { content : '__'
  ; display : inline
  }
u[title]::after
  { content : '__/*' attr(title) '*/' }

s::before
, s::after
  { content : '~~'
  ; display : inline
  }
s[title]::after
  { content : '~~/*' attr(title) '*/' }

del::before
, del::after
  { content : '--'
  ; display : inline
  }
del[title]::after
  { content : '--/*' attr(title) '*/' }

ins::before
, ins::after
  { content : '++'
  ; display : inline
  }
ins[title]::after
  { content : '++/*' attr(title) '*/' }


a::before
  { content : '['
  ; display : inline
  }
a::after
  { content : '](' attr(href) ')'
  ; display : inline
  }
a[title]::after
  { content : '](' attr(href) ')/*' attr(title) '*/'
  ; display : inline
  }


aside
  { width : 9em }
aside::before
  { content : '#['
  ; display : inline
  }
aside::after
  { content : ']#'
  ; display : inline
  }


:is( code, samp )::before
, :is( code, samp )::after
  { content : '`'
  ; display : inline
  }
:is( code, samp )[title]::after
  { content : '`/*' attr(title) '*/' }

abbr::before
  { content : '[[' }
abbr::after
  { content : ']]' }
abbr[title]::after
  { content : ' | ' attr(title) ']]' }

kbd::before
  { content : '[' }
kbd::after
  { content : ']' }
kbd[title]::after
  { content : ']/*' attr(title) '*/' }

var::before
  { content : '{' }
var::after
  { content : '}' }
var[title]::after
  { content : '}/*' attr(title) '*/' }

cite::before
  { content : '>>' }
cite::after
  { content : '<<' }
cite[title]::after
  { content : '<</*' attr(title) '*/' }

q::before
  { content : '^[' }
q::after
  { content : ']' }
q[cite]::after
  { content : '](' attr(cite) ')' }
q[cite][title]::after
  { content : '](' attr(cite) ')/*' attr(title) '*/' }


pre code::before
, pre code::after
  { content : none }

hr
  { position : relative
  ; height : var( --line-height )
  ; overflow : hidden
  ; border : 0
  ; margin-top : var( --line-height )
  ; margin-bottom : var( --line-height )
  }
hr::after
  { content : '----'
  ; position : absolute
  ; display : inline
  ; top : 0
  ; left : 0
  }

sub, sup
  { all : unset }
sup::before
  { content : '^'
  ; display : inline
  }
sup::after
  { content : '^'
  ; display : inline
  }
sub::before
  { content : '~'
  ; display : inline
  }
sub::after
  { content : '~'
  ; display : inline
  }
sup[title]::after
  { content : '^/*' attr(title) '*/' }
sub[title]::after
  { content : '~/*' attr(title) '*/' }



[dir=rtl] hr::after
, hr[dir=rtl]::after
  { right : 0
  ; left : unset
  }


input + label::after
  { content : "\a"
  ; white-space : pre
  ; display : inline
  }

input[type=checkbox]
, input[type=radio]
  { -webkit-appearance : none !important
  ; -moz-appearance : none !important
  ; -ms-appearance : none !important
  ; -o-appearance : none !important
  ; appearance : none !important
 }
input[type=checkbox]::before
, input[type=radio]::before
  { content : '[ ]'
  ; display : inline
  }
input[type=checkbox]:checked::before
  { content : '[x]' }
input[type=radio]::before
  { content : '( )' }
input[type=radio]:checked::before
  { content : '(+)' }


input[type=text]
  { background : none
  ; border : none
  ; width : auto
  ; border-bottom : 2px solid var(--text)
  }

/* doesnt work b/c input-text is not a regular markup */
input[type=text]::before
, input[type=text]::after
  { display : inline-block
  ; content : '[ '
  }
input[type=text]::after
  { content : ' ]' }


/* only works if image doesnt load */
img
  { display : inline
  /*; overflow : hidden*/
  }
img::before
  { content : '![' attr(alt) }
img::after
  { content : '](' attr(src) ')' }
img[title]::after
  { content : '](' attr(src) ')/*' attr(title) '*/' }


/* colors */
:root
  { --red : hsl( 0, 93%, 59% )
  ; --dark-red : hsl( 0, 93%, 39% )

  ; --orange : hsl( 32, 98%, 56% )
  ; --light-orange : hsl( 47, 100%, 79% )
  ; --dark-orange : hsl( 30, 83%, 34% )

  ; --yellow : hsl( 54, 70%, 68% )
  ; --dark-yellow : hsla( 54, 70%, 68%, 35% )

  ; --green : hsl( 80, 76%, 53% )

  ; --blue : hsl( 190, 81%, 67% )
  ; --dark-blue : hsl( 190, 81%, 67%, 20% )

  ; --purple : hsl( 261, 100%, 75% )
  ; --rose : hsl( 338, 95%, 56% )

  ; --gray : hsl( 50, 11%, 41% )
  ; --light-gray : hsl( 50, 11%, 81% )
  ; --dark-gray : hsl( 50, 11%, 21% )
  }

[title]::after
  { color : var( --gray ) }
a[title]::after
  { color : var( --rose ) }
a:any-link
, img::before
, img::after
  { color : var( --rose ) }

abbr, abbr[title]::after
  { color : var( --light-orange ) }

h1, h2, h3, h4, h5, h6
  { color : var( --orange ) }

blockquote, cite
  { color : var( --green ) }
pre, code, samp
  { background : var( --dark-gray ) }
pre::before
  { color : var( --gray ) }

ul > li::before
  { color : var( --red ) }
ol > li::before
  { color : var( --purple ) }

b, strong
  { color : var( --red ) }
i, em
  { color : var( --blue ) }
u
  { color : var( --blue )
  ; background : var( --dark-blue )
  }
s
  { color : var( --light-gray )
  ; background : var( --dark-gray )
  }

ins
  { color : var( --bg )
  ; background : var( --green )
  }
del
  { color : var( --bg )
  ; background : var( --red )
  }
del[title]::after
  { color : var( --dark-gray ) }

mark
  { color : var( --bg )
  ; background : var( --yellow )
  }
mark::before
, mark::after
  { content : '=='
  ; display : inline
  }
mark::after
  { content : '==' }
mark[title]::after
  { content : '==/*' attr(title) '*/'
  ; color : var( --dark-gray )
  }



q, q[title]::after
  { color : var( --green ) }

:is( kbd, var )::before
, :is( kbd, var )::after
  { color : var( --gray ) }

:is( sup, sub )::before
, :is( sup, sub )::after
  { color : var( --gray ) }

aside
  { color : var( --yellow ) }