/* var(..) calls have been removed in order to support dillo and netsurf better,
   but the :root references are being left in so they may some day return */
:root{
  --light: #fbf3eb;
  --dark: #111;
  --offlight: #ffeedd;
  --brown: #835c34;
  --wine: darkred;
}
@font-face {
  font-family: 'Fell';
  src: URL('../fonts/fell.ttf') format('truetype');
}
body {font-family:'Fell',garamond, georgia, serif; width: 55em; max-width:90%; background-color: #fbf3eb; color: #111}
header h1{position:relative;display:inline-block;font-size:5rem;margin-top: 10px}
header h1 small{position:absolute;right:0.4em;bottom:-0.5em;font-size:0.6em}
header nav, header ul, header li{display:inline-block}
header ul{list-style:none;margin-left:2em;padding:0}
header li{margin-left:2em;font-size:1.5em}
header li a{text-decoration:none;color:#111;display:inline-block;position:relative}
header h1 small::before{content:"";font-size:5rem;width:2ch;border-bottom:4px solid #111;position:absolute;top:50%;top:calc(50% - 3px);left:-2.1ch}
@media (prefers-reduced-motion: no-preference) {
  header h1 a::before, header li a::before{position:absolute;top:0;left:0;width:0;height:2px;background-color:darkred;transition:width 0.5s;content:''}
  header h1:hover a::before, header li a:hover::before,header li a:focus::before {width:100%}
}
.h{display:none}
main{font-size:1.2em;padding:10px}
main p{text-indent:3ch}
main p:first-of-type{text-indent:initial}
section p:first-of-type::first-letter, main p:first-of-type::first-letter,.first-letter::first-letter{font-size:3em;line-height:0.5em}
section p.plain:first-of-type::first-letter, main p.plain:first-of-type::first-letter,.first-letter::first-letter{font-size:1em;line-height:1lh}
main a, main a:hover, main a:focus, main a:visited, main a:active,
footer a, footer a:hover, footer a:focus, footer a:visited, footer a:active
{color: #111;text-decoration-color:darkred;text-decoration-thickness:2px}
main section{margin-bottom:4em}
main section h2{margin-bottom:1.5em}
footer{margin-top:5em}
footer p{font-size:1em}
img{max-width:75%}
.center-img{text-align:center; padding: 2em}
.issue-container{display:inline-block;width:9.5em;margin:0 1em 4em;display:inline-block;position:relative}
.issue-container img{width:100%;max-width:100%}
.soon::after{content: "Coming Soon";position:absolute;padding:1em;top:50%;left:50%;color:#fbf3eb;background-color:#835c34}
header h1 a,header h1 a:hover,header h1 a:focus,header h1 a:active,header h1 a:visited{color:#111;text-decoration:none}
img.icon{width:1.75em;margin-right:1em}
#queue-state{column-count:2;margin:3em auto;}
#queue-state ol{margin:0}
.hidden{display:none}
hr.small{width:25%;margin:2em auto}
.book-data{list-style:none;font-size:0.85em;font-family:serif}
.book-data li{margin-bottom:0.5em}
.mt{margin-top:2em}
.creator h3{text-align:center}
.creator .center-img{padding:1em}
.creator img{width:100px;border-radius:100%;border:2px dotted #111}
.creator img.cat{background-color:rebeccapurple}

dt{margin-bottom:0.5em}
dd:not(:last-child){margin-bottom:1em}
dt a{font-weight:bold}

p.bird{text-align:center;text-indent:unset}
img.bird{margin:4em auto 0;border:3px dotted #111;border-radius:100%;background-color:#ffeedd;width:250px}

dl.dl-sub {margin-left:2em}
dl.dl-sub dt{text-decoration:underline}
dl.dl-sub dd::before{content:'- ';position:absolute;left:-1em}
dl.dl-sub dd{margin-bottom:initial;position:relative}
dl.dl-sub dd + dt{margin-top:1em} 

body.guidelines :target {border:2px dashed darkred}
#news ol{list-style:none}
#news ol li{display:flex;flex-direction:row;align-items:baseline;margin-bottom:1em}
#news ol li time{margin-right:2em;font-family:monospace;font-size:0.9em}
#news{margin-top:8em}

img#dandelion{width:200px;float:right;margin-left:2em}

.fr{display:flex;flex-direction:row}
.fc{display:flex;flex-direction:column}
.fg{flex-grow:1}

footer .linkbox{display:inline-block;margin-right:1em}
footer .linkbox > span:first-child{font-weight:bold;margin-left:0.5rem}
.hlist {padding-left:1ch;list-style:none;display:inline-block;margin-top:0.5rem}
.hlist li{display:inline-block;margin-right:0.5em;vertical-align:middle}
.hlist li img{vertical-align:middle}

.center {text-align:center}
.webring{display:inline-block;padding: 1em;border:1px solid #835c34; background-color:#f9e1c8;border-radius:5px}

.cover-container {margin-bottom:3em;position:relative;text-align:center}
.cover-container img{width:30%}
.dl-box{padding:2em;border-radius:5px;background:#f9e1c8;border:1px solid #835c34;margin-top:3em}
.dl-box .fr, .dl-box fc{justify-content:space-evenly;margin-top:3em}
.dl-box a, .dl-box a:hover, .dl-box a:focus{background:#835c34;color:#fbf3eb;border:1px solid #111;border-radius:5px;text-decoration:none;padding:1em 2em;font-family:monospace;font-size:1rem;vertical-align:top;cursor:pointer}

summary { padding-inline-start: 40px; }

@media screen and (max-width: 500px) {
  header nav ul li, header nav, header nav ul{display:block}
  header nav{text-align:right}
  header h1{margin-bottom:10px}
  header nav ul{padding:0; margin:0}
  #news ol li{flex-direction:column}
}

@media screen and (max-width: 850px) {
  img#dandelion{width:200px;float:unset;display:block;margin: 1em auto}
  #news{margin-top:4em}
}