thermostat.css

html { 
  background: url(data:image/jpeg;base64,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) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.low-usage {
  color: green;
}

.medium-usage {
  color: black;
}

.high-usage {
  color: red;
}

#main {
  max-width: 600px;
  margin: 0 auto;
}

.simple {
  width: 500px;
  margin: 20px auto;
  border-radius: 15px 50px 30px;

  padding: 10px;
  text-align: center;
  border: solid cadetblue 5px;

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  border-radius: 15px 50px 30px;

  margin: 20px auto;
  padding: 10px;
  text-align: center;
  border: solid cadetblue 5px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  border-radius: 15px 50px 30px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}
.button1 {background-color: #4CAF50;
  border: none;
  border-radius: 15px 50px 30px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;} /* Green */
.button2 {background-color: #008CBA;
  border: none;
  border-radius: 15px 50px 30px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;} /* Blue */
.button3 {background-color: #f44336;border: none;border-radius: 15px 50px 30px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;} /* Red */
.button4 {background-color: #e6e6ff; 
  color: black; 
  border: 2px solid #4CAF50;
  border-radius: 15px 50px 30px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;} /* Gray */
.button5 {background-color: #555555;
  border: 2px solid #4CAF50;
  border-radius: 15px 50px 30px;;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;} /* Black */
.button6 {background-color: #ffb380;
  border: 2px solid #c9831a;
  border-radius: 15px 50px 30px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;} 
.button7 {background-color:  #00bfff;
  border: 2px solid #1aa0c9;
  border-radius: 15px 50px 30px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;} 

  #current-city {
    border-radius: 15px 50px 30px;
    background: #e6fff9;
    border: 2px solid #4CAF50;
    padding: 20px; 
    width: 200px;
    height: 15px; 
    font-size: 20px;
}
.p1 {
  font-family: "Verdana", sans-serif;
  font-size: 16px
}