weather.css

/*centigrade and fahereneit*/

@import url('https://fonts.googleapis.com/css?family=Bungee+Inline|Lobster|Pacifico');
/*header and temperature text style*/
body{
  background-color:rgba(0,154,0,0.3);margin:0px; padding:0px;
}
.tempStyle{
  font-family: 'Lobster', cursive;
  font-size:3em;
}
strong{
  color:#000;font-family: cursive;
}
.defaultTemp,.TCTF{
  color:blue;
}
.TCTF:hover{
    color:blue;
    cursor:pointer;
}
.msgContainer{
    color:#FFF;
    align-items:center;
    font-family: 'Bungee Inline', cursive;
    background-color:rgba(0,154,0,0.7);
}
button{
    margin: 0 0 0 25%;

}
footer{
  font-family: 'Lobster', cursive;
  position : relative;
  margin: 2% 2% 1% 40%;

}
/* Small devices (small phones &smartphones)  */
@media (max-width: 600px) {
    body{
        border:5px solid #000a00;font-size:1em;
    }
    .msgContainer{
        margin:20px 10px 10px 10px;
      }
}

/* Small devices (tablets) */
@media (min-width: 600px) {
 body{
        border:7px solid #000a55;font-size:1.9em;
    }
    .msgContainer{
        margin:20px 10px 10px 10px;
      }
}

/* Medium devices (desktops) */
@media (min-width: 850px) {
     body{
        border:10px solid #000a99;font-size:2.2em;
    }
    .msgContainer{
        margin:20px 10px 10px 10px;
      }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1100px) {
  body{
     border:20px solid #000a09;font-size:2.8em;
 }
 .msgContainer{
     margin:30px;
   }
}

/*  */