:root {
    --col-red: #cd103f;
    --col-orange: #e9cc00;
    --col-green: #86b313;
    --col-blue: #13847e;
    --col-purple: #845683;
}
body {background-color:#fed;max-width:700px;margin:0px auto;
    font-family: serif;font-size: 17px;line-height:1.4;color:#333;}
nav {display: flex; font-family:sans-serif; font-size:14px; margin-top: 5px;}
nav a { text-decoration: none;}
.navitem { padding: 10px; display:flex; align-items:center; flex-wrap:wrap; border-right: 1px dotted grey;}
.navitem:last-child {border-right:none;}
.push {flex:1;}
.imgbox {background-color: #ccc; display:table; text-align: center; margin:0 auto;}
.image {display: block; max-width:100%;}
.caption {font-style:italic; font-family:sans-serif; color:#222;}
@media only screen and (max-width: 700px) {.image {object-fit: contain; width: 100%;} #main {margin-left:5px; margin-right:5px;}}
h1, h2, h3 {font-family: sans-serif;}
.date {font-size: 14px; color: grey;}
a {color:teal;}
a:visited {color:purple;}
a:hover {color: red;}
#main {padding: 10px;}