body {background-color:#fed;max-width:650px;margin:0px auto;
    font-family: serif;font-size: 16px;line-height:1.4;color:#333;}
nav {display: flex; margin-top: 20px; padding: 5px; font-family:monospace; background-color: #fdb; flex-wrap:wrap;}
nav a {text-decoration: none;}
.navitem {margin-right: 1em; display:flex; align-items:center;}
.navhome {font-weight: bold;}
.navedit {font-style: italic;}
.push {display: none;}
.nou {text-decoration: none;}
.pagelist {list-style: none;}
.listdate {display: inline-block;min-width: 7em;}
h1, h2, h3 {font-family: sans-serif;}
.date {font-size: 14px; font-weight: normal;}
a {color:teal;}
a:visited {color:purple;}
a:hover {color: red;}
figure {margin: 0;}
figcaption {font-style: italic; text-align: center;}
figure > img {max-width:100%; display: block; margin: 0 auto; cursor:pointer;}
@media only screen and (max-width: 700px) {#main {margin-left:5px; margin-right:5px;}}

/* based on CSSBox https://notabug.org/SylvieLorxu/CSSBox */
figure:has(> img:focus) {
cursor: pointer;
position: fixed;
height: 100%;
width: 100%;
max-width: 100%;
top: 0;
left: 0;
margin:0;
background-color: black;
color: white;
}
figure > img:focus {
cursor: default;
position: fixed;
max-height: 95%;
max-width: 95%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}