index.css

/* Copyright 2019 pushMe-pullYou authors. MIT License */

/* https://www.w3schools.com/colors/colors_names.asp // use colors and borders to help identify the scope of particular elements */

html {
  --mnu-color: MediumSlateBlue;
  --mnu-back-color: ivory;
  --mnu-width: 300px;
  height: 100%;
}

body,
html {
  font: 12pt monospace;
  height: 100%;
  margin: 0;
}

a {
  color: var( --mnu-color);
  text-decoration: none;
}

a:hover,
a:focus,
#hamburger:hover {
  background-color: yellow;
  color: #8888;
}

blockquote,
pre {
  background-color: #eee;
  padding: 10px;
}

button,
input[ type=button] {
  background-color: #ddd;
  border: none;
  color: var( --mnu-color);
  cursor: pointer;
  padding: 3px 20px;
}

button:hover {
  background-color: #ccc;
  color: #fff
}

iframe {
  width: 100%;
}

input[ type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ddd;
  width: 100%;
}

input[ type=range]::-moz-range-thumb {
  background-color: #888;
  border-radius: 0;
  width: 10px;
}

input[ type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #888;
  height: 20px;
  width: 10px;
}

td {
  vertical-align: top;
}

#divContainer {
  height: 100%;
  margin: 0 0 0 var( --mnu-width);
  transition: margin-left .5s;
  position: relative;
}

#divContents {
  height: 100%;
  left: 0;
  margin: 0 auto;
  right: 0;
}

#divMenu {
  background-color: var( --mnu-back-color);
  box-sizing: border-box;
  margin: 0;
  height: 100%;
  overflow-x: hidden;
  padding: 30px 10px 0 10px;
  position: fixed;
  top: 0;
  width: var( --mnu-width);
  z-index: 1;
  transition: 0.5s;
}

#hamburger {
  background-color: pink;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 30px;
  left: calc( var( --mnu-width) - 100px);
  line-height: 30px;
  margin: 0;
  padding: 5px 15px 8px 10px;
  position: fixed;
  top: 0;
  transition: left .5s;
  z-index: 10;
}