table, th, td {
          border: 1px solid black;
          border-collapse: collapse;
        }
        th {
          background: white;
          position: sticky;
          top: 0; /* Don't forget this, required for the stickiness */
          box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
        }
        tr:hover {
          background-color: #e5c166;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100%;
            margin: auto;
        }

        .container {
            position: relative;
            text-align: center;
            color: rgb(255,204,153);
                  font-size: 30px;
        }

        .bottom-right {
            position: absolute;
            bottom: 8px;
            right: 16px;
        }

        .bottom-center {
            position: absolute;
            bottom: 8px;
            left:20px;
        }
              .topnav {
                overflow: hidden;
                background-color: #ffffff;
                left: 0;
              }

              .topnav a {
                float: left;
                color: #1a1a1a;
                text-align: center;
                padding: 12px 14px;
                text-decoration: none;
                font-size: 17px;
              }

              .topnav a:hover {
                background-color: #ddd;
                color: black;
              }

              .topnav a.active {
                background-color: #ffffff;
                color: black;
              }

              .topnav-right {
                float: right;
              }

              #canvas {
                border:1px solid red;
              }

              .slidecontainer {
  width: 100%;
}

.slidecontainer {
  width: 15%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border: 0;
  background: url('./images/vertslide.svg');
  cursor: pointer;
}            


.slider1 {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider1:hover {
  opacity: 1;
}

.slider1::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border: 0;
  background: url('./images/horslide.svg');
  cursor: pointer;
}