/* 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:5em;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}
@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%}
}

.right{text-align:right}
.center{text-align:center}
.error{color:darkred}
.mb-sm{margin-bottom:1em}

main{font-size:1.2em;padding:10px}
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 h2{margin-bottom:1.5em}
footer{margin-top:5em}
footer p{font-size:1em}
header h1 a,header h1 a:hover,header h1 a:focus,header h1 a:active,header h1 a:visited{color:#111;text-decoration:none}

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

.fr{display:flex;flex-direction:row}
.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}

.box{padding:2em;border-radius:5px;background-color:#f9e1c8;border:1px solid #835c34; margin-top: 0.5em}
input,textarea{width:100%;height:2em;border-radius:5px;margin-bottom:2rem;font-size:1em}
input[type=text]:focus,input[type=password]:focus,textarea:focus{outline-color:darkred;outline-style:solid}
textarea{height:10lh;resize:vertical}
.box button{background:#835c34;color:#fbf3eb;border-color:#111;padding:0.5em;border-radius:5px;width:100%;font-size:1em}
button[disabled]{opacity:0.4;cursor:not-allowed}
.box hr, hr.short{width:15%;margin:0 auto 2rem}
label + p{margin-top:5px}

.cat .box {padding:1em}
.post .post-title{margin-bottom:0}
.post .post-byline{margin-bottom:0.5rem}
.post .box{margin-bottom:1rem}

.posts-post{padding:1em;border-bottom:1px dotted #835c34} 

#category-list{margin-top:3em}
#category-list dt{font-size:1.2em}
#category-list dd:not(:last-child){margin-bottom:2em}

#replybox{position:fixed;bottom:0;right:0;padding:1em}
#replybox summary{text-align:right;cursor:pointer;position:relative;z-index:10}
#replybox summary span{background:#ffeedd;border:1px solid #835c34;padding:5px;border-radius:5px;box-shadow:5px 5px 10px #111}
#replybox summary::marker{content:''}
#replybox summary span::before{content:'+ '}
#replybox[open] summary span::before{content:'- '}
#replybox[open]{width:500px;max-width:80%}
#replybox .box{box-shadow:5px 5px 10px #111;position:relative;z-index:10}

.reply{padding:0.5em;border-bottom:1px dotted #111}
.reply-byline{text-align:right}

.reply code, .reply pre, .post-body code, .post-body pre {padding:10px;background:#ffeedd;border:1px dotted #111;border-radius:5px}
.reply blockquote, .post-body blockquote {background:#ffeedd}


@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}
  #replybox[open]{width:calc(100%-2em);max-width:unset}
}