local.css

#document {
  width: 100%;
  max-width: 50em;
}
p {
  font-size: 14pt;
}
.doclist {
  font-size: 14pt;
}

.slide {
  min-height: 100vh;
  position: relative;
}

.file::before {
  content: "≣"; 
}
  
.note {
  position:absolute;
  bottom: 0;
  color: #2f2f2f;
}

.note:hover .note-text {
  visibility: visible;
  opacity: 1; 
}
.note .note-text {
  visibility: hidden;
  position: absolute;
  bottom: 0;
  width: 35em;
  background-color: #E7E7E7;
  color: #2f2f2f;
  padding: 5px;
  border-radius: 6px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.5s;
}

#tools {
  position: absolute;
  left: -25px;
  top: 40px;
  width: 1.5em;
}
#tools > #prev { visibility: visible; opacity: 1; }
#tools > #next { visibility: visible; opacity: 1; }

#tools div { visibility: hidden; opacity: 0; transition: all 1s; }
#tools:hover div { visibility: visible; opacity: 1; }


#prev {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent rgba(117,117,117,0.5) transparent;
  margin-bottom: 3px;
}
#next {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: rgba(117,117,117,0.5) transparent transparent transparent;
  margin-bottom: 3px;
  z-index: 100;
}
.slideno {
  border-style: solid;
  border-radius: 15px;
  border-color: rgba(197, 190, 190, 0.5);
  background-color: rgba(218, 218, 218, 0.5);
  text-align: center;
  margin-bottom: 3px;
  cursor: default;
  border-width: 2px;
  box-sizing:border-box;
}
.selected {
  border-style: solid;
  background-color: white;
}

.solution{
  display: none;
}

.save-button {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.inputhidden {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

h1 { cursor: crosshair; }
h2 { cursor: crosshair; }
h3 { cursor: crosshair; }
h4 { cursor: crosshair; }
h5 { cursor: crosshair; }
	
.slide-tooltip {
    position: relative;
    display: inline-block;
    zcursor: help;
  box-sizing:border-box;

}
.slide-tooltip .slide-tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 220px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s;
}
.slide-tooltip:hover .slide-tooltiptext {
    visibility: visible;
    opacity: 1;
}
.slide-tooltip .slide-tooltiptext2 {
    visibility: hidden;
    position: absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
}
.slide-tooltip:hover .slide-tooltiptext2 {
    visibility: visible;
}
.slide-tooltip-right {
  top: -5px;
  left: 125%;  
}
.slide-tooltip-right2 {
  top: -5px;
  left: 105%;  
}

.slide-tooltip-right::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.slide-tooltip-bottom {
  top: 135%;
  left: 50%;  
  margin-left: -60px;
}

.slide-tooltip-bottom2 {
  top: 125%;
  left: 50%;  
  margin-left: -60px;
}

.slide-tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.slide-tooltip-top {
  bottom: 125%;
  left: 50%;  
  margin-left: -60px;
}
.slide-tooltip-top2 {
  bottom: 115%;
  left: 50%;  
  margin-left: -60px;
}

.slide-tooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.slide-tooltip-left {
  top: -5px;
  bottom:auto;
  right: 128%;  
}

.slide-tooltip-left2 {
  top: -5px;
  bottom:auto;
  right: 105%;  
}

.slide-tooltip-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}

.slide-tooltip .slide-tooltiptext-bottomarrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 130%;
    left: 50%;
    margin-left: -60px;
}
.slide-tooltip .slide-tooltiptext-bottomarrow::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
.slide-tooltip:hover .slide-tooltiptext-bottomarrow {
    visibility: visible;
}

.slide-tooltip .slide-tooltiptext-toparrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}
.slide-tooltip .slide-tooltiptext-toparrow::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
.slide-tooltip:hover .slide-tooltiptext-toparrow {
    visibility: visible;
}

.slide-tooltip .slide-tooltiptext-leftarrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}
.slide-tooltip .slide-tooltiptext-leftarrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.slide-tooltip:hover .slide-tooltiptext-leftarrow {
    visibility: visible;
}
.slide-tooltip .slide-tooltiptext-rightarrow {
    visibility: hidden;
    width: 120px;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 110%;
}
.slide-tooltip .slide-tooltiptext-rightarrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}
.slide-tooltip:hover .slide-tooltiptext-rightarrow {
    visibility: visible;
}

.button {
    background-color: #e3e3e3; /* Green */
    border: 1px;
    padding: 2px;
    padding-bottom: 1px;
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    border-style: solid;
    font-size: 8px;
    top: -1px;
    position: relative;
  }