img {
  border: none
}

article > img, section > img {
  margin-top: 1rem;
  margin-bottom: 1rem
}

/* TODO svg responsive, but needs addition to the svgs viewport and preserveaspectratio */

.responsive, article > img, article > a > img, article > p > img, article > p > a > img,
aside > img, article figure img, article figure canvas {
  height: auto;
  width: 100%
}

.circled {
  border-radius: 50%
}

/* overlay */
img:target {
  /* TODO 
    - full width / auto height (portrait trouble?)
    - centered (flex?)
    - close button (in HTML)

<a href="#me2019">    <!-- how to prevent scroll? use focussed? active? needs tabindex then? -->
<img src="/me2019.jpg" alt="Me" title="Me" width="200" height="250" class="float-right" id="me2019">
<a href="#close">Close</a>     <!-- initially hidden -->
</a>


  */
}