.coolsky {
  background: #2980B9;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.noontodusk {
  background: #ff6e7f;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #bfe9ff, #ff6e7f);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #bfe9ff, #ff6e7f);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.moonlitnight {
  background: #0F2027;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2C5364, #203A43, #0F2027);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #FFFFFF;
}

.gradient-button {
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 17px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 150% auto;
  color: #FFF;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  cursor: pointer;
  display: inline-block;
  border-radius: 25px;
}
.gradient-button:hover{
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.gradient-button-1 {background-image: linear-gradient(to right, #DD5E89 0%, #F7BB97 51%, #DD5E89 100%)}
.gradient-button-1:hover { background-position: right center; };

.cityButton {
  width: 100%;
  color: red;
  background-color: red;
  margin: 5px;
}

#cities {
  margin: 3px;
}

.capitalise {
  text-transform: capitalize;
}

.searcharea {
  margin: 10px;
}

#UVindex {
  color: white;
}

#day1,
#day2,
#day3,
#day4,
#day5 {
  width: 500px;
}