*, *::before, *::after {
  box-sizing: border-box;
  scroll-margin-top: 50vh;
}

html {
  width: 100%;
  font-family: monospace; 
  background: lightpink;
  scroll-behavior: smooth;
}

body {
  width: min(75ch, 95%); 
  line-height: 1.6;
  margin: 2rem auto;
 } 


ol {
 border: 1px solid black;
 padding: 1rem;
 background: #f0f0f0;
 list-style: none;
} 

ol li {
 margin: 2rem 1rem;
 padding: 0.5rem;
 border: 1px solid gray;
}

ol li:target {
 background: skyblue;
 box-shadow: 0 0 4px black;
}

ol h2 {
margin: 0;
}
.license {
 font-size: 0.9em;
}


own-creation {
 font-family: "Comic Sans MS", "Comic Sans", cursive;
 color: magenta;
}


.anchor {
    color: deeppink;
}


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