body {
  background-color: #39cce6;
}

p {
  margin: 0px;
  border: 5px solid #a415fb;
  padding: 30px;
  color: #fff;
  font-size: 30px;
  font-family: "Arial Black";
  background-color: #ffa100;
}

a {
  color: #004c7d;
}

#myGithub {
  text-align: center;
}

h1 {
  margin: 0px auto;
  padding: 25px;
  text-align: center;
  color: #fff;
  font-size: 50px;
  font-family: "Arial Black";
  background-color: #1618ff;
}

.buttonscontainer {
  text-align: center;
}

button {
  margin: 20px;
  border-color: #a415fb;
  padding: 20px;
  background-color: #9a74d5;
  font-size: 30px;
  color: #fff;
  font-family: "Arial Black";
}

button:hover {
  border-color: #200434;
  background-color: #a415fb;
}

.slidecontainer {
  padding-top: 30px;
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #9a74d5;
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: #1618ff;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: #1618ff;
  cursor: pointer;
}

canvas {
  background: #000;
  display: block;
  margin: 0 auto;
}