/* credit: https://github.com/secretGeek/html_wysiwyg/blob/master/html.css */

* {
     display:block;
}
 a,code,em,strong {
     display:inline 
}
 *{
     font-family:Monospace;
     text-decoration:none 
}

/* tags with attributes. */

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

/* special escaping for close style */
 style::before {
     content:'<style>' 
}
 style::after {
     content:'<\/style>' 
}

/* brutify */
 *::before,*::after {
     color:rgb(136, 18, 128, 0.5);
     font-weight:100;
     font-size:0.713em 
}
 html {
     max-width:70ch;
     padding:2ch;
     margin:auto;
     color:#333;
     font-size:1.2em;
}
 body {
     margin:0 auto;
     display:flex;
     min-height:100%;
     flex-direction:column;
}

/* here is the highly repetitive bit */
 html::before {
     content:'<html>' 
}
 html::after {
     content:'</html>' 
}
 head::before {
     content:'<head>' 
}
 head::after {
     content:'</head>' 
}
 title::before {
     content:'<title>' 
}
 title::after {
     content:'</title>' 
}
 link::before {
     content:'<link>' 
}
 link::after {
     content:'</link>' 
}
 body::before {
     content:'<body>' 
}
 body::after {
     margin-top:auto;
     content:'</body>' 
}
 h1::before {
     content:'<h1>' 
}
 h1::after {
     content:'</h1>' 
}
h1 { text-align: center }
 h2::before {
     content:'<h2>' 
}
 h2::after {
     content:'</h2>' 
}
 p::before {
     content:'<p>' 
}
 p::after {
     content:'</p>' 
}
 pre::before {
     display:block;
     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>' 
}

/* list */
ul::before { content:'<ul>' }
ul::after { content:'</ul>' }
li::before { content:'<li>' }
li::after { content:'</li>' }

/* image */
img {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
figure[src]::before { content: "<img src='"attr(src)"'"}
figure[src]::after { content: "/>" }

div[class]::before { content: "<div class='" attr(class) "'>" }
div[class]::after { content:'</div>' }
.carousel {
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
.carousel::before,.carousel::after { 
    display: block;
    position: sticky;
    left: 0;
}
.carousel figure {
    display: inline-block;
    scroll-snap-align: center;
    margin: 0;
}
.carousel::-webkit-scrollbar {
    display: none;
}

/* ironic */
yf::before { content: 'self ' }
yf { 
    display: inline-block; 
    transform: scaleX(-1);
}
yf::before, yf::after {
    color:#333;
    font-size:1em;
}
yf::after  { content: 'irony' }

/* header */
script[verymuchunique]::before { content: "<script src='" attr(src) "'></script>" }
meta[name]::before { content: "<meta name='" attr(name) "' content='" attr(content) "'>" }
nav a { display:block; }
nav::before { content:'<nav>'; }
nav::after { content:'</nav>'; }

/* flip */
html { transform: scaleX(-1) }
body { transform: scaleX(-1) }
