*, *::before, *::after { box-sizing: border-box; }

html {
    margin: 0 1rem;
    padding: 0; 
    font-family: serif;
    background-color: #fad9f5;
    scroll-behavior: smooth;
}

body {
    line-height: 1.6;
    max-width: 72ch;
    margin: 2ch auto;
    padding: 1ch 2ch;
    background: #e9e4ed;
}

body img {
    margin: 1rem auto;
    display: block;
    width: 100%;
    image-rendering: pixelated;
}

header img, footer img {
 max-width: 50%; 
 image-rendering: pixelated;   
 border: 1px solid #303030;
}

main {
    margin: 0; 
    padding: 0;
    border: 0;
}

hr {
}

h1 a, h2 a {
    color: magenta;
}

a { 
    color: magenta; 
}

p:last-child {
    margin-bottom: 0;
 }

time { 
    font-style: italic;
}

ul {
    padding-left: 2ch;
}

ul:last-child {
    margin-bottom: 0;
}
ul li {
}

day-log, header, footer {
    display: block; 
    border: 1px solid #a491c2;
    padding: 1ch 2ch;
    margin: 1ch auto;
    max-width: 55ch;
    text-align: justify;
    scroll-margin-top: 1rem; 
}

day-log > p, header > p, footer > p {
    hyphens: auto;
}

day-log:target {
    /*box-shadow: 0 0 2px white;*/
    border: 1px solid black;
}

day-log h2, day-log h1 {
     margin-top: 0;
}

header {
}

header h1 {
    margin-top: 0;
    margin-bottom: 0;
    hyphens: auto;
    text-align: center;
}

header h1 a { color: magenta; }

footer > p.return {
    text-align: center;
}

footer h1 {
    margin-top: 0;
}

footer:last-child {
    margin-bottom: 0.25em;
}

a.return {
    display: inline-block; 
    width: 100%;
    text-align: center;
}

header  a.return {
    display: block;
    margin-bottom: 0.25em;
}

/* cf. https://silaskoehler.de/scroll-animation-fuer-anchor-links-mit-css/ */ 
@media (prefers-reduced-motion: reduce) {
    html {
         scroll-behavior: auto;
     }
}