button.css

    /*--darkmode-->
    as seen on: https://redstapler.co/pure-css-minimal-dark-mode-toggle-button/
    checkbox targets the next label in order to work
    */
  #clicky {
    width:24px;
    height:42px;
    position: absolute;
    display: block;
    background: #ebebeb;
    border-radius: 20px;
    box-shadow: inset 0px 2px 5px rgba(0,0,0,0.4), inset 0px -2px 5px rgba(255,255,255,0.4);
    cursor: pointer;
    transition: 0.3s;
    top:15px;
    left:0.5%;
    margin: auto;
    z-index: 10;
  }
  #clicky:after {
    content: "";
    width:20px;
    height: 20px;
    position: absolute;
    top:2px;
    left:2px;
    background: linear-gradient(180deg,#ffcc89,#d8860b);
    border-radius: 20px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
    transition: 0.3s;
  }
  #darkmode-toggle {
    /*--the button should be "visibility:hidden" unless debugging--*/
    position: absolute;
    top: 5vh;
    width: 20px;
    height: 20px;
    z-index: 100;
    visibility: hidden;
  }
  #darkmode-toggle:checked + #clicky {
    background: #242424;
  }
  #darkmode-toggle:checked + #clicky:after {
    top: calc(3% + 40px);
    transform: translateY(-100%);
    background: linear-gradient(180deg,#777,#3a3a3a);
  }
  #clicky:active:after{
    height: 38px;
  }

    @media print {
    /*hide button on print
    */
    #clicky{
      visibility: hidden;
    }
    }