html {
  max-width: 100%;
  overflow-x: hidden;
}

.circ {
  fill: white;
  font-size: 30px;
}

.topsection {
  float: left;
  width: 20%;
  background-color: black;
  color: white;
  text-align: center;
  padding: 2px;
}

.topsection:hover {
  font-weight: bold;
  cursor: pointer;
}

body {
  font-family: 'PT Sans', sans-serif;
  background-color: #2D2D2D;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
  color: white;
}

button {
  padding: 10px;
  background-color: blue;
  color: white;
  box-shadow: 1px 1px 5px #888888;
}

.borders {
  border: 1px solid black;
  padding: 3px;
  border-radius: 6px;
  display: inline;
  box-shadow: 1px 1px 1px;
  margin-left: 1%;
  margin-right: 1%;
}

button:focus {
  cursor: pointer;
}

.tipper {
  padding: 1%;
  margin: 2px;
  border: 1px solid black;
  border-radius: 6px;
}

.footer {
  background-color: black;
  color: white;
  height: 100px;
}

#canvasc, #canvasd, #canvase {
  max-height: 90px;
  max-width: 600px;
}

.header {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: black;
  text-align: center;
  margin: 0px;
  color: white;
}

canvas {
  text-align: center;
  display: block;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  height: 100%;
}

table {
  padding: 0;
  font-size: 20px;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
}

.settings {
  display: block;
  text-align: center;
  font-size: 20px;
}

a {
  color: lightblue;
}

.info {
  text-align: center;
  font-size: 10px;
  padding: 20px;
}

.slidecontainer {
  width: 100%;
  /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
  width: 100%;
  /* Full-width */
  height: 25px;
  /* Specified height */
  background: black;
  /* Grey background */
  outline: none;
  /* Remove outline */
  opacity: 0.7;
  /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s;
  /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 50px;
  /* Set a specific slider handle width */
  height: 30px;
  /* Slider handle height */
  background: gray;
  cursor: pointer;
  /* Cursor on hover */
}

.tooltip {
  text-align: right;
  color: lightblue;
  font-size: 12px;
  outline: none;
  cursor: help;
  text-decoration: none;
  position: relative;
}

.tooltip span {
  display: none;
  margin-left: -999em;
  position: absolute;
}

.tooltip:hover span {
  display: block;
  position: absolute;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute;
  left: 2em;
  top: 2em;
  z-index: 3;
  margin-left: 0;
  width: 250px;
  padding: 2%;
  font-size: 14px;
  background-color: black;
  opacity: 0.85;
  color: white;
  font-weight: normal;
  text-align: center;
}

.slider::-moz-range-thumb {
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  background: blue;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

#tips {
  padding: 3%;
  margin: 1%;
}

.waves {
  color: white;
}

/* Has to come after .tooltip */
.vSetting {
  font-size: 13px;
  color: white;
}

.icon {
  height: 100px;
  width: 100px;
}

.icon:hover .tooltip {
  cursor: pointer;
  border: 1px solid;
}

/* The Modal (background) */
.modal {
  background-color: gray;
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 4;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacy */
}

/* Modal Content/Box */
.modal-content {
  background-color: #3C3C3C;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: black;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#mainWindow {
  background-color: #505050;
  padding-top: 30px;
  padding-top: 30px;
  color: white;
}

.mainPage {
  margin: 10px;
  padding: 10px;
}