body{
  text-align: center;
  background: #f6f6f6;
  padding: 5px;
}

canvas {
  margin: 15px;
  border: 1px solid rgb(192, 192, 192);
}

.icon{
  width: 0px;
}

.topnav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #cacaca; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  transition-duration: 0.2s;
}
.topnav a {
  background-color: #b3b3b3;
  text-align: left;
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  color: #000000;
  display: block;
  font-size: 20px;
  transition-duration: 0.2s;
}

.topnav a:hover {
  transform: translateY(4px);
  background-color: darkgray;
  color: black;
}

.topnav a.ico {
  background-color: #d1d1d1;
  text-align: left;
  background-image: logo;
  width: 145px;
}

.topnav a.active {
  transition-duration: 0.2s;
  background-color: darkslategray;
  color: white;
}

@media screen and (max-height: 480px) {
  .topnav {padding-top: 6px;}
  .topnav a {font-size: 18px;}
}

.main {
  text-align: center;
}

.main a {
  margin: 0px 150px;
  width: 65%; /* Set a width if you like */
  background-color: #eee; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 16px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
  transition-duration: 0.2s;
}

.main a:hover {
  transform: translateX(8px);
  background-color: #ccc; /* Dark grey background on mouse-over */
}

.main a.active {
  background-color: darkslategray; /* Add a green color to the "active/current" link */
  color: white;
}
@media screen and (max-height: 480px) {
  .main {padding-top: 6px;}
  .main a {font-size: 18px;}
}

.textbox{
    text-align: center;
    background-color: darkgray; /* Green */
    border: solid darkslategray;
    color: #212224;
    padding: 10px 5px;
    margin: 6px;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    border-radius: 4px;
    transition-duration: 0.2s;
    box-shadow: 2px 3px #212224;
}

.textbox:hover {
    background-color: #34363a; /* Green */
    color: white;
    transform: translateY(4px);
}

.button {
    background-color: gainsboro; /* Green */
    border: solid #2f4f4f;
    color: #212224;
    padding: 7px 7px;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    border-radius: 4px;
    transition-duration: 0.2s;
    box-shadow: 2px 3px #34363a;
}

.button:hover {
    text-align: center;
    background-color: #34363a; /* Green */
    color: white;
    transform: translateY(4px);
}