body {
  background-image: url("https://www.lillegrandpalais.com/wp-content/uploads/2011/12/Pano1.JPG");
  background-repeat: no-repeat;
  background-position: center-center;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  color:white;
  font-size:18px;
  font-family: 'Lilita One', cursive;

}

div#location {
  float: left;
  background-color: rgba(27, 56, 140, 0.4);
  width: 50%;
  height: 50%;
}

div#position {
  width: 100%;
  position: relative;
  top: 40%;
  text-align: center;
  font-size: 2rem;
  color: #ffffff;
  font-family: 'Lilita One', cursive;
}

div#temperature {
  overflow: hidden;
  background-color: rgba(27, 56, 140, 0.4);
  width: 50%;
  height: 50%;
  float: right;
}

div#degrees {
  position: relative;
  top: 40%;
  text-align: center;
  font-size: 2rem;
  color: #ffffff;
  font-family: 'Lilita One', cursive;
}

div#btns {
  background-color: rgba(27, 56, 140, 0.4);
  width: 50%;
  height: 50%;
  float: left;
}

div#btn1-wrapper {
  height: 100%;
  margin: 0;
  padding: 0;
}

button#change {
  height: 50px;
  width: 100%;
  position: relative;
  top: 30%;
  font-family: 'Lilita One', cursive;
  font-size: 1em;
}

button#meteo {
  height: 50px;
  width: 100%;
  position: relative;
  top: 32%;
  font-size: 1em;
  font-family: 'Lilita One', cursive;
}

#skycon {
  overflow: hidden;
  background-color: rgba(27, 56, 140, 0.4);
  width: 50%;
  height: 50%;
  float: right;
}

div#icon-wrapper {
  height: 100%;
  margin: 0;
  padding: 0;
}

#description {
  position: relative;
  top: 20%;
  text-align: center;
  font-size: 2em;
  color: #ffffff;
  font-family: 'Lilita One', cursive;
}

#icon {
  position: relative;
  width: 50%;
  top: 25%;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  margin-top: 4.5rem;
}

i {
  color: #924EB4;
  font-size: 1.2em;
}

i#bearing {
  font-size: 2em;
  color: #000;
}

a#info {
  float: none;
  width: 30%;
  margin-top: 5px;
  background-color: #924EB4;
  font-size: 1em;
  padding: 0em;
}
a#info:hover {
  color: #fff;
}

i#update {
  position: fixed;
  top: 1%;
  right: 1%;
  font-size: 3em;
  color: #fff;
}

h1#title-reveal {
  font-size: 2em;
  color: #924EB4;
}

button#close {
  font-size: 2em;
  color: #924EB4;
}

/* Define mobile styles */
@media only screen {
  div#position {
    font-size: 1.5rem;
  }

  div#degrees {
    font-size: 1.5rem;
  }

  button#change {
    font-size: 1.5rem;
    height: auto;
  }

  button#meteo {
    font-size: 1.5rem;
    height: auto;
  }

  div#description {
    font-size: 1.5rem;
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    top: 28%;
  }

  #icon {
    position: relative;
    width: 10rem;
    margin-top: 2rem;
  }
}
/*Only Tablet Uses*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  div#position {
    font-size: 3rem;
    word-wrap: break-word;
  }

  div#degrees {
    font-size: 3rem;
  }

  button#change {
    font-size: 2rem;
    height: auto;
  }

  button#meteo {
    font-size: 2rem;
    height: auto;
  }

  div#description {
    font-size: 3rem;
    position: relative;
    margin-top: -2.6rem;
    margin-bottom: 6rem;
    top: 28%;
  }

  #icon {
    position: relative;
    width: 18rem;
  }
}
@media only screen and (min-width: 64.063em) {
  div#position {
    position: relative;
    top: 25%;
    font-size: 4rem;
    word-wrap: break-word;
  }

  div#degrees {
    position: relative;
    top: 25%;
    font-size: 4rem;
  }

  button#change {
    font-size: 1.5rem;
    height: auto;
  }

  button#meteo {
    font-size: 1.5rem;
    height: auto;
  }

  div#description {
    position: relative;
    top: 0%;
    font-size: 4rem;
    margin-top: 1.6rem;
  }

  #icon {
    position: relative;
    top: -40%;
    margin-top: -1rem;
    width: 20rem;
  }
}
#preloader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fefefe;
  z-index: 99;
  height: 100%;
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url("https://d13yacurqjgara.cloudfront.net/users/479985/screenshots/1719391/loader_seq.gif");
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
}

img{

  margin-top:120px;
}