.stickylinks {
  position: absolute;
  top: 20px;
  left: 130px; 
  font-size: 45px;
  font-family: "Helvetica Neue", Helvetica;
  font-variant-caps: all-small-caps;
  color: #aaa; /* bullets */
}

.stickylinks:hover .headings {
 display:block; 
}

.headings{
    display: none; 
    z-index: 3;  
    position: absolute;
    direction:ltr;
    top: -2em;
    left: 0em;
    background-color: rgba(255,255,255,0.99);
    border-radius: 15px;
    border-block-end: 1px solid #444;
    border-right: 1px solid #444;
    padding: 1em 1em 0.3em;
    font-weight: 200;
    list-style-type:square; /* CSS2 */
    list-style-type:"—"; /* emdash, CSS3 */
}

.headings a {
 text-decoration: none; 
 color: #999;
}

.c, .h1, .h2 {
  /* idea was h0 would be visible in the right place */
  /* but CSS seemed to only :hover one class, not many... test?*/
  /* display:none;*/
 color: #aaa;
}

.h0 {
  display:block;
}

.c0:active .h1, .h2, .headings {
 display:none; 
}

.c1:active .h0 .h2 .headings {
 display:none; 
}

.c2:active .h0, .h1, .headings {
 display:none; 
}

.sticky-banner:not(.sticky-banner--visible) {
  box-shadow: none;
}