body { background-color:black;color:white;font-family:sans-serif;font-size:14px;text-align:center;margin:auto;padding:10px }
a { color:white;text-decoration:none;font-weight:bold }
nav { margin:30px 0 }
nav > a h1 { margin:0;font-weight:bold;font-size:2em }
nav > a { display:block;padding:0;width:fit-content;margin:0 auto }
nav > a:hover { background-color:black;color:white }
nav > a:hover h1 { background-color:white;color:black;border-radius:4px }
nav a img { display:block;height:150px;margin:10px auto }
nav p { color:gray;margin:10px 0px 20px 0px }
nav ul { margin:20px 0;padding:0;display:flex;justify-content:center }
nav ul li { font-size:1.2em;text-transform:uppercase;list-style:none;font-weight:bold;padding:2px 4px 2px 4px }
nav ul li:has(> a) {  !important }
nav ul li a { padding:4px 8px 4px 8px !important }
nav ul li span { padding:4px 8px 4px 8px;font-weight:bold;background-color:white;color:black;border-radius:4px; }
a { padding:2px 4px 2px 4px;font-weight:bold }
a:hover { background-color:white;color:black;border-radius:4px; }
details { margin:10px;text-align:left }
details ul { display:flex;flex-wrap:wrap;margin:5px 0px 5px 5px;padding:0;list-style:none }
details ul li { padding:2px;margin:2px }
details ul li span { background-color:white;color:black;padding:2px 4px 2px 4px;border-radius:4px }
details ul li a { font-weight:normal }
main { display:inline-flex;flex-wrap:wrap;width:100% }
main figure { width:33.3%;margin:0;padding:0 }
main figure a { display:block;padding:3%; }
main figure a:hover { background:white; }
main figure a img { display:block;max-width:100%;height:auto }
footer { text-align:center;margin:30px 10px 50px 0px }
footer ul { list-style:none;margin:60px 0px 20px 0px;padding:0 }
footer ul li { display:inline-block;font-size:1.4em;margin:2px }
footer ul li span, footer ul li a { display:flex;width:40px;height:40px;align-items:center;justify-content:center }
footer ul li span { color:black;background-color:white;border-radius:4px;font-weight:bold }
footer ul li a { text-decoration:none; }
footer a { color:gray;padding:0 }
footer a img { display:block;width:100%;height:100px;margin:60px 0px 20px 0px }
body.feed main { display:block;max-width:640px;margin:auto}
body.feed main figure { width:100%; }
body.feed main figure a { padding:1% }
body.feed main figcaption { margin-bottom:20px;padding:5px }
body.feed main figcaption div { display:flex;justify-content:space-between; }
body.feed main figcaption > span { display:block;padding:10px 0px 10px 0px;border-bottom:1px dotted gray;text-align:left;color:gray }
body.detail main { display:inline-block;margin:auto}
body.detail main figure { width:100%; }
body.detail main figure a { display:inline-block;padding:1% }
body.detail main figcaption { margin-bottom:20px;padding:5px }
body.detail main figcaption div { display:flex;justify-content:space-between; }
body.detail main figcaption > span { display:block;padding:10px 0px 10px 0px;border-bottom:1px dotted gray;text-align:left;color:gray }
#detail-ctrl { display: block; margin-bottom: 20px; padding-bottom: 45px; border-bottom:1px dotted gray;}
.detail-prev {
    display: block;
    float: left;
    font-size: 1.2em;
}
.detail-next {
    display: block;
    float: right;
    font-size: 1.2em;
}
@media (min-width:640px) {
	body { font-size:16px }
	nav ul li { font-size:1em }
	nav p { margin:10px 0px 40px 0px }
	main figure { width:25% }
}
@media (min-width:800px) { 
  body { font-size:18px }
	body { max-width:1000px }
}