.container.dark {
    background-color: #262626 !important;
  }
  .test-bar {
    position: absolute;
    width: 100px;
    margin-top: -60px;
    right: 10%;
    z-index: 999;
    align-items: center;    
    display: none;
  }
  .section:hover .test-bar{
    display: flex;
  }
  /* Mobile has no hover. js/test-color-align.js toggles this class, based on
     scroll position, on whichever section currently has its top between the
     top and the middle of the screen. */
  .section.show-controls .test-bar{
    display: flex;
  }
  .test-bar a {
    	color: var(--color-green);
      margin: 2px;
    	font-size: 38px;
      opacity: .6;
  }
  .test-bar a.toggle-align{
      font-size: 30px
  }
  .test-bar a:hover {
  	  opacity: 1;
  }

  /* Tooltips on these controls should only ever be shown by a genuine mouse
     hover: not by :focus (which a click/tap also triggers, and would
     otherwise leave the tooltip stuck open), not on touch devices (which
     have no real "unhover"), and not for the moment of a click itself even
     while the pointer is still over the icon (js/test-color-align.js adds
     .no-tooltip on click). */
  .test-bar a[data-tooltip]:focus:not(:hover):before,
  .test-bar a[data-tooltip]:focus:not(:hover):after {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .test-bar a[data-tooltip].no-tooltip:before,
  .test-bar a[data-tooltip].no-tooltip:after {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  @media (hover: none) {
    .test-bar a[data-tooltip]:before,
    .test-bar a[data-tooltip]:after {
      display: none;
    }
  }

  /* The section-alignment styles apply "* { text-align/justify-content/direction }"
     to every descendant, including the injected .test-bar controls. Without this,
     the controls visibly shift position/order whenever the section's own alignment
     is changed, even though the bar itself is anchored via absolute positioning. */
  .test-bar,
  .test-bar * {
    direction: ltr !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }


@media only screen and (max-width: 600px){
  /* This used to also set a large negative margin-right, which (now that the
     page has a proper viewport meta tag, and the controls actually get shown
     on mobile via scroll position) pushed the bar off the right edge of the
     screen and caused horizontal page overflow. right:10% alone already
     keeps it inset from the corner correctly at mobile widths. */
  .test-bar {
    right: -5%;
    margin-top: -50px;
  }
  .test-bar a{
    	font-size: 30px;
  }
}