body {
  background: rgb(167, 207, 223);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(167, 207, 223, 1) 0%, rgba(35, 83, 138, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(167, 207, 223, 1) 0%, rgba(35, 83, 138, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(167, 207, 223, 1) 0%, rgba(35, 83, 138, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a', GradientType=0);
  /* IE6-9 */
  color: rgb(98, 147, 168);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

header {
  top: 0;
  right: 0;
  position: absolute;
}

footer {
  font-size: 0.7em;
  color: whitesmoke;
  position: absolute;
  bottom: 0;
  left: 1%;
}

.container-fluid {
  min-height: 100vh;
  padding-top: 20vh;
}

.cardMain {
  max-width: 600px;
  min-height: 80vh;
  border-radius: 10px 10px 0 0;
  background: whitesmoke;
  -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 7px 3px 60px rgba(0, 0, 0, 0.3);
}

.btn {
  background: whitesmoke;
  color: rgb(0, 0, 185);
}

.active {
  background: lightblue;
  color: darkblue;
}

#temp {
  font-size: 5.5em;
  font-weight: 300;
}

#minMax {
  font-size: 1.5em;
  padding-left: 10px;
  font-weight: 100;
}

#desc {
  padding-left: 5px;
  font-size: 2em;
  font-weight: 100;
}

#icon {
  font-size: 3em;
}

#loc {
  padding-right: 3px;
}

#displayUnit {
  font-size: 3em;
}