gas.css

body {
    background-color: deepskyblue;
    text-align: center;
    color: white;
    font-family: Times, Times New Roman, serif;
  }

#title {
  font-family: Comic Sans MS, Comic Sans, cursive;
  font-size: 40px;
  margin-top: 0;
  text-shadow: 5px 5px 6px black, -2px -2px 6px red, 0 0 3px black;
}

#subtitle {
  font-size: 14px;
  text-shadow: none;
  font-style: italic;
  text-shadow: 2px 2px 4px black;
}

#me {
  font-size: 14px;
  text-shadow: none;
  font-style: italic;
  text-shadow: 2px 2px 4px black;
  color: white;
}

  #balls {
    margin-top: 5px;
  }

  #myCanvas {
    margin-top: -20px;
  }

#displayTemp {
  font-weight: 600;
  font-style: oblique;
  font-size: 18px;
}

  section.footer {
    color: black;
    font-family: Ubuntu Mono;
    font-style: normal;
    font-size: small;
  }
  #disclaimer {
    font-size: 74%;
    color: gray;
  }

.slidecontainer {
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  width: 40%;
}

.slider {
  -webkit-appearance: none;
  border: 1px solid black;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: orangered;
  outline: none;
  -webkit-transition: .2s;
  transition: background .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 45px;
  height: 45px;
  border-radius: 45px;
  background: url(thermo.png);
  background-size: 45px;
  background-repeat: no-repeat;
}

.button1 
{ 
  font-family: Georgia;
  display: inline-block;
  padding: 7px 20px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #5561ED;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px silver;
  transition: background-color .5s;
  margin-bottom: 5px;
}

.button1:hover {background-color: #3847EA}

.button1:active 
{
  background-color: #3847EA;
  box-shadow: 0 4px darkgrey;
  transform: translateY(4px);
}