*, *::before, *::after {
    box-sizing              : border-box;
    padding                 : 0;
    margin                  : 0;
    background              : none;
    text-decoration         : none;
    outline                 : none;
    font-family             : inherit;
    font-size               : inherit;
    line-height             : inherit;
    font-weight             : inherit;
    font-style              : inherit;
    color                   : inherit;
    border                  : none;
    list-style              : none;
    font-synthesis          : none;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "liga";
}

*:visited, *:active {
  color: inherit;
}

:root {
    
    --text       : hsl(0,0%,28%);
    --title      : hsl(0,0%,26%);
    --link       : #FFF7B1;
    --link-hover : #FFEE50;
    --lines      : hsl(0,0%,94%);
    --bg         : hsl(0,0%,100%);
    --bg-alt     : hsl(0,0%,98%);
    --bg-hover   : hsl(0,0%,98%);

    --bg  : hsl(0,0%,100%);
    --bgl : #F7F7F7;
    --h   : #FFEC3D66;
    --hl  : #FFEC3DE6;
    --t   : #444;
    --tm  : #888;
    --tl  : #F2F2F2 ;

    --font-family      : "Iowan Old Style","Iowan","Iowan BT",'Palatino Linotype', 'URW Palladio L', P052, "Georgia", serif;
    --font-family-sans : system-ui, sans-serif;
    --font-family-mono : ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    --font-size        : clamp(14px, 0.39vw + 12.244px, 22px);
    --font-line-height : clamp(26px, 0.78vw + 22.488px, 42px);
    --font-style       : normal;

    --ls : 9rem;
    --ln : 18rem;
    --lw : 36rem;

    --text-width : 18rem;

    --type-base : clamp(14px, 0.39vw + 12.244px, 22px);
    --type-xs   : calc(var(--type-base) * 0.75);
    --type-s    : calc(var(--type-base) * 0.9);
    --type-m    : calc(var(--type-base) * 1.2);
    --type-l    : calc(var(--type-base) * 1.4);
    --type-xl   : calc(var(--type-base) * 1.6);
    --type-xxl  : calc(var(--type-base) * 1.8);

    font-size          : var(--font-line-height);
    font-family        : var(--font-family);
    font-style         : var(--font-style);
    background         : var(--bg);
    color              : var(--text);
    scroll-padding-top : 1.5rem;
}
::selection {
    background : var(--link);
    color      : var(--text);
}

body {
    font-size   : var(--font-size);
    line-height : var(--font-line-height);
    padding     : 5rem 1rem 1.5rem;
}

header,main,footer {
    margin-left  : auto;
    margin-right : auto;
    max-width    : var(--text-width);
}

:is(p,figcaption,li,td,small) a {
    text-decoration           : underline;
    text-decoration-color     : var(--link);
    text-decoration-skip-ink  : none;
    text-decoration-thickness : .5em;
    text-underline-offset     : -.25em;
    transition                : text-decoration .3s;
}
:is(p,figcaption,li,td,small) a:hover {
    text-decoration-color : var(--link-hover);
}

footer {
    margin-top : 3rem;
    text-align: center;
    font-size: var(--type-s);
    font-family: var(--font-family-mono);
}

footer span {
  padding : 0.5rem;
  border:1px solid var(--lines);
  border-radius : 3px;
}

nav {
    margin-bottom: 2em;
    border-bottom: 1.5px solid var(--lines);
    padding-bottom: 1em;
  
}

nav a {
	font-style: italic;
}

.title {
  order : 2;
}


h1,h2,h3,h4,h5,h6 {
    color       : var(--title);
    font-weight : bold;
}


h2,h3 {
    margin-bottom : 1rem;
}



a {
    font-weight : inherit;
    font-size   : inherit;
    line-height : inherit;
}

a.title > h1 {
  font-size: var(--type-xxl);
}


h1 > a {
    text-decoration : none;
}


h1,h2,h3,h4,h5,h6 {
    line-height   : 1.5;
    margin-bottom : 2em;
}

:is(h1,h2,h3,h4,h5,h6):not(:first-child) {
    margin-top : 3em;
}

a.title:has(+ nav) h1 {
  margin-bottom : .3em;
}


h1 {
    font-size : var(--type-xl);
}


h2 {
    font-size : var(--type-l);
}

h3,h4,h5,h6 {
    font-size : var(--type-m);
}



h2,h3,h4,h5,h6 {
    text-align : center;
}

p + p {
    text-indent : 0.5rem;
    margin-top  : 0.5rem;
}


hr {
    display       : block;
    border        : none;
    margin-top    : 2rem;
    margin-bottom : 2rem;
    width         : var(--ls);
    text-align    : center;
}
hr::before {
    content     : "✽  ✽  ✽";
    white-space : pre;
    opacity     : 0.25;
}

blockquote {
    margin-top    : 1.5rem;
    margin-bottom : 1.5rem;
    background    : var(--bg-alt);
    padding       : 1rem;
    border-radius : 5px;
}

blockquote p {
    text-indent : 0;
}

strong,b {
    font-weight : bold;
}

em,i,blockquote p {
    font-style : italic;
}

strong,em,a {
    font-size : inherit;
}


code {
    font-family : var(--font-family-mono);
    background  : var(--tl);
}
    

pre {
    margin-bottom : 1rem;
}
pre:not(:first-child) {
    margin-top : 1rem;
}

pre code {
    font-family : var(--font-family-mono);
    background  : var(--bg-alt);
    padding     : 0.75rem;
    display     : block;
    overflow-x  : auto;
    white-space : pre;
}

p code,
li code {
    display     : inline-block;
    text-indent : 0;
    padding     : 0 .25rem;
}




ol,ul,dl {
    margin-top    : 1rem;
    margin-bottom : 1rem;
}

li {
    list-style-position : inside;
}

@media (min-width : 600px) {
    li {
        list-style-position : outside;
    }   
}


ol li {
    list-style-type : decimal;
}


ul li {
    list-style-type : circle;
}

del {
    text-decoration           : line-through;
    text-decoration-color     : var(--t);
    text-decoration-thickness : 0.2em;
}


table {
    margin          : 1rem auto;
    width           : 100%;
    max-width       : var(--media-width);
    border          : 1px solid var(--lines);
    border-collapse : collapse;
}

thead {
    background : var(--bg-alt);
    border     : 1px solid var(--lines);
}

tbody {
    border   : 1px solid var(--lines);
}

th {
    border      : 1px solid var(--lines);
    font-family : var(--font-family-sans);
    text-align  : left;
    font-size   : var(--type-s);
    padding     : 0 0.25rem;
}

td {
    border      : 1px solid var(--lines);
    text-align  : left;
    font-size   : var(--type-s);
    padding     : 0 0.25rem;
}

img,iframe,video {
  display: block;
  width : 100%;
  height: auto;
  margin-bottom: 1rem;
}


button.upvote-button {
  margin-top: 3em;
}

#footer-directive > p {
  margin-bottom: 2em;
}

pre {
 background-color: #f5f5f5;
  color: #333;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: auto; 
  font-family: Menlo, Monaco, "Courier New", monospace; 
  font-size: 14px; 
  line-height: 1.5; 
}