1/*
  2  Docs at http://http://simpleweatherjs.com
  3
  4  Look inspired by http://www.degreees.com/
  5  Used for demo purposes.
  6
  7  Weather icon font from http://fonts.artill.de/collection/artill-weather-icons
  8
  9  DO NOT hotlink the assets/font included in this demo. If you wish to use the same font icon then download it to your local assets at the link above. If you use the links below odds are at some point they will be removed and your version will break.
 10*/
 11
 12@font-face {
 13    font-family: 'weather';
 14    src: url('font/artill_clean_icons-webfont.eot');
 15    src: url('font/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
 16         url('font/artill_clean_icons-webfont.woff') format('woff'),
 17         url('font/artill_clean_icons-webfont.ttf') format('truetype'),
 18         url('font/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
 19    font-weight: normal;
 20    font-style: normal;
 21}
 22
 23
 24#weather {
 25  width: 100%;
 26  height: 100%;
 27  margin: 0px auto;
 28  text-align: center;
 29  display: flex;
 30  justify-content: center;
 31	align-items: center;
 32  text-transform: uppercase;
 33}
 34
 35#weather.lts {
 36  background: #1192d3 url(../img/lts.jpg) no-repeat bottom right;
 37  background-size: cover;
 38}
 39
 40#weather.e3 {
 41  background: #1192d3 url(../img/e3.jpg) no-repeat bottom right;
 42  background-size: cover;
 43}
 44
 45i {
 46  color: #fff;
 47  font-family: weather;
 48  font-size: 150px;
 49  font-weight: normal;
 50  font-style: normal;
 51  line-height: 1.0;
 52  text-transform: none;
 53}
 54
 55.icon-0:before { content: ":"; }
 56.icon-1:before { content: "p"; }
 57.icon-2:before { content: "S"; }
 58.icon-3:before { content: "Q"; }
 59.icon-4:before { content: "S"; }
 60.icon-5:before { content: "W"; }
 61.icon-6:before { content: "W"; }
 62.icon-7:before { content: "W"; }
 63.icon-8:before { content: "W"; }
 64.icon-9:before { content: "I"; }
 65.icon-10:before { content: "W"; }
 66.icon-11:before { content: "I"; }
 67.icon-12:before { content: "I"; }
 68.icon-13:before { content: "I"; }
 69.icon-14:before { content: "I"; }
 70.icon-15:before { content: "W"; }
 71.icon-16:before { content: "I"; }
 72.icon-17:before { content: "W"; }
 73.icon-18:before { content: "U"; }
 74.icon-19:before { content: "Z"; }
 75.icon-20:before { content: "Z"; }
 76.icon-21:before { content: "Z"; }
 77.icon-22:before { content: "Z"; }
 78.icon-23:before { content: "Z"; }
 79.icon-24:before { content: "E"; }
 80.icon-25:before { content: "E"; }
 81.icon-26:before { content: "3"; }
 82.icon-27:before { content: "a"; }
 83.icon-28:before { content: "A"; }
 84.icon-29:before { content: "a"; }
 85.icon-30:before { content: "A"; }
 86.icon-31:before { content: "6"; }
 87.icon-32:before { content: "1"; }
 88.icon-33:before { content: "6"; }
 89.icon-34:before { content: "1"; }
 90.icon-35:before { content: "W"; }
 91.icon-36:before { content: "1"; }
 92.icon-37:before { content: "S"; }
 93.icon-38:before { content: "S"; }
 94.icon-39:before { content: "S"; }
 95.icon-40:before { content: "M"; }
 96.icon-41:before { content: "W"; }
 97.icon-42:before { content: "I"; }
 98.icon-43:before { content: "W"; }
 99.icon-44:before { content: "a"; }
100.icon-45:before { content: "S"; }
101.icon-46:before { content: "U"; }
102.icon-47:before { content: "S"; }
103
104#weather h2 {
105  margin: 0 0 8px;
106  color: #fff;
107  font-size: 100px;
108  font-weight: 300;
109  text-align: center;
110  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
111}
112
113#weather ul {
114  margin: 0;
115  padding: 0;
116  padding-bottom: 30px;
117}
118
119#weather li {
120  background: #fff;
121  background: rgba(255,255,255,0.90);
122  padding: 20px;
123  display: inline-block;
124  border-radius: 5px;
125}
126
127#weather .currently {
128  margin: 0 20px;
129}