: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: var(--light); color: var(--dark)}
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:inherit;display:inline-block;position:relative}
@media (prefers-reduced-motion: no-preference) {
  header li a::before{position:absolute;top:0;left:0;width:0;height:2px;background-color:darkred;transition:width 0.5s;content:''}
  header li a:hover::before,header li a:focus::before {width:100%}
}
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}
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: inherit;text-decoration-color:var(--wine);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}
@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}
}
.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:var(--light);background-color:var(--brown)}
header h1 a,header h1 a:hover,header h1 a:focus,header h1 a:active,header h1 a:visited{color:var(--dark);text-decoration:none}
img.icon{width:2em;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}
.creator h3{text-align:center}
.creator .center-img{padding:1em}
.creator img{width:100px;border-radius:100%;border:2px dotted var(--dark)}
.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 var(--dark);border-radius:100%;background-color:var(--offlight);width:250px}