:root {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
  :root{scroll-behavior:auto}
}


body {
  margin: 0;
  padding: 0;
  background: #191919;
  color:#eee;
}

header, main, footer {
  width: 900px;
  max-width: 90vw;
  margin: 2rem auto;
}

header {
  text-align: center;
  padding-top: 3em;
  font-family: monospace;
}

a {color:#eee}
a:active, a:visited {color:#ddd} 

.fr{display:flex;flex-direction:row;}
.center{text-align:center}

header.fr nav{flex-grow:1;align-content:center;text-align:right;font-size:initial}
header h1 > span{text-shadow:0px 0px 0px transparent;transition:0.5s}
header h1:hover > span{text-shadow:0px 8px 12px yellow}

.hlist{list-style:none;padding-left:0}
.hlist li{display:inline-block}
.hlist li:not(:last-child){margin-right:2rem}

main .hlist li{vertical-align:top;margin-bottom:2rem;text-align:center}
main .hlist li img{width:175px;transition: filter 0.25s;filter:brightness(100%)}
main .hlist li:hover img, main .hlist li:focus-within img{filter:brightness(125%)}
main .hlist span.title{display:block;margin-top:0.5em}
main .hlist li a {text-decoration:none;display:block}
main .hlist li:hover a,main .hlist li:focus-within a{text-decoration:underline}

.story .publication .left {width: 25%}
.story .publication .right {width: 70%}
.story .publication img {width:200px;border:2px solid khaki;border-radius:5px;margin:2em}
.story h2{margin-bottom:2em;margin-top:2em}
.publication h3{margin-top:3em}
.story-text{padding:2em;border:2px solid khaki;margin:2em auto;border-radius:10px;background:#222}
.story-text p{text-indent:4ch}

@media only screen and (max-width: 650px) {
  main > ul > li {
    display:block !important;
    width:initial;
  }
}

footer {
  margin-top:6em;
  padding: 4em 2em 1em 1em;
  text-align:center;
}

footer p:last-child{font-size:0.9em;margin: 2rem auto}

footer a{font-size:2em;text-decoration:none}
footer a:hover, footer a:focus{text-decoration:underline}

.big{font-size:1.2em;text-indent: 2ch}
.big:first-letter{font-size:1.5em}

h3{color:khaki;margin:3em 0 1.5em}
hr{border-color:khaki}
p{max-width:80ch}

#about img{display:block;margin:auto;border-radius:5%;width:200px;max-width:80%;border:2px solid khaki;margin-bottom:4em}
#about main p{margin:1em auto;line-height:1.2lh}

@media only screen and (max-width: 550px) {
	header.fr{flex-direction:column}
	header.fr nav{text-align:center}
	main .hlist li{display:block}
	.hlist li:not(:last-child){margin:2em auto}
	body{overflow-x:hidden}
}