body {
  margin-bottom: 6rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
}

h1:hover .header-link:before,
h2:hover .header-link:before,
h3:hover .header-link:before,
h4:hover .header-link:before,
h5:hover .header-link:before,
h6:hover .header-link:before {
    content: "\00B6";/* pilcrow */
    color: #888;
    font-size: smaller;
}

.header-link {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  position: absolute;
  top: 0;
  left: -0.7em;
  display: block;
  padding-right: 1em;
}

h1:hover .header-link,
h2:hover .header-link,
h3:hover .header-link,
h4:hover .header-link,
h5:hover .header-link,
h6:hover .header-link {
  display: inline-block;
  text-decoration: none;
}


/* https://stackoverflow.com/questions/11142125/css-highlight-a-div-when-the-id-is-linked-to-using-an-anchor */
:target {
  animation: fade 3s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

@keyframes fade {
  0% { background-color: #ffa }
  100% { background-color: initial }
}