* {
    display: block;
}

script {
    display: none;
}

a,
code,
em,
strong {
    display: inline
}

* {
    font-family: Monospace;
    margin: 1.5em 0;
    padding: 0;
    text-decoration: none
}

style, blockquote {
    white-space: pre-wrap;
}

p::before {
    content: '<p>'
}

p::after {
    content: '</p>'
}

html::before {
    content: '<html>'
}

html::after {
    content: '</html>'
}

head::before {
    content: '<head>'
}

head::after {
    content: '</head>'
}

title::before {
    content: '<title>'
}

title::after {
    content: '</title>'
}

body::before {
    content: '<body>'
}

body::after {
    content: '</body>'
}

h1::before {
    content: '<h1>'
}

h1::after {
    content: '</h1>'
}

h2::before {
    content: '<h2>'
}

h2::after {
    content: '</h2>'
}

p::before {
    content: '<p>'
}

p::after {
    content: '</p>'
}

pre::before {
    content: '<pre>'
}

pre::after {
    content: '</pre>'
}

code::before {
    content: '<code>'
}

code::after {
    content: '</code>'
}

a::before {
    content: '<a>'
}

a::after {
    content: '</a>'
}

aside::before {
    content: '<aside>'
}

aside::after {
    content: '</aside>'
}

blockquote::before {
    content: '<blockquote>'
}

blockquote::after {
    content: '</blockquote>'
}

em::before {
    content: '<em>'
}

em::after {
    content: '</em>'
}

strong::before {
    content: '<strong>'
}

strong::after {
    content: '</strong>'
}

a[href]::before {
    content: "<a href='" attr(href) "'>"
}

style::before {
    content: '<style>'
}

style::after {
    content: '<\/style>'
}

*::before, *::after {
    color: rgba(136, 18, 128, 0.5);
    font-weight: 100;
    font-size: 1.0em
}

html {
    max-width: 70ch;
    padding: 2ch;
    margin: auto;
    color: #333;
    font-size: 1.2em;
}
* {
    display: block;
}

script {
    display: none;
}

a,
code,
em,
strong {
    display: inline
}

* {
    font-family: Monospace;
    margin: 1.5em 0;
    padding: 0;
    text-decoration: none
}

style, blockquote {
    white-space: pre-wrap;
}

p::before {
    content: '<p>'
}

p::after {
    content: '</p>'
}

div::before {
    content: '<div>'
}

div::after {
    content: '</div>'
}

html::before {
    content: '<html>'
}

html::after {
    content: '</html>'
}

head::before {
    content: '<head>'
}

head::after {
    content: '</head>'
}

title::before {
    content: '<title>'
}

title::after {
    content: '</title>'
}

body::before {
    content: '<body>'
}

body::after {
    content: '</body>'
}

h1::before {
    content: '<h1>'
}

h1::after {
    content: '</h1>'
}

h2::before {
    content: '<h2>'
}

h2::after {
    content: '</h2>'
}

p::before {
    content: '<p>'
}

p::after {
    content: '</p>'
}

pre::before {
    content: '<pre>'
}

pre::after {
    content: '</pre>'
}

code::before {
    content: '<code>'
}

code::after {
    content: '</code>'
}

a::before {
    content: '<a>'
}

a::after {
    content: '</a>'
}

aside::before {
    content: '<aside>'
}

aside::after {
    content: '</aside>'
}

blockquote::before {
    content: '<blockquote>'
}

blockquote::after {
    content: '</blockquote>'
}

em::before {
    content: '<em>'
}

em::after {
    content: '</em>'
}

strong::before {
    content: '<strong>'
}

strong::after {
    content: '</strong>'
}

a[href]::before {
    content: "<a href='" attr(href) "'>"
}

style::before {
    content: '<style>'
}

style::after {
    content: '<\/style>'
}

*::before, *::after {
    color: rgba(136, 18, 128, 0.5);
    font-weight: 100;
    font-size: 1.0em
}

html {
    max-width: 70ch;
    padding: 2ch;
    margin: auto;
    color: #333;
    font-size: 1.2em;
}
