@font-face {
  font-family: 'fontello';
  src: url('icons/font/fontello.eot?63232165');
  src: url('icons/font/fontello.eot?63232165#iefix') format('embedded-opentype'),
  url('icons/font/fontello.woff?63232165') format('woff'),
  url('icons/font/fontello.ttf?63232165') format('truetype'),
  url('icons/font/fontello.svg?63232165#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
.icon {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* You can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-01d:before { content: "\E802"; } /*sun*/
.icon-01n:before { content: "\E803"; } /*moon*/
.icon-02d:before { content: "\E800"; } /*sun cloud*/
.icon-02n:before { content: "\E801"; } /*moon cloud*/
.icon-03d:before { content: "\E804"; } /*cloud*/
.icon-03n:before { content: "\E804"; } /*cloud*/
.icon-04d:before { content: "\E805"; } /*clouds*/
.icon-04n:before { content: "\E805"; } /*clouds*/
.icon-09d:before { content: "\E806"; } /*hard rain*/
.icon-09n:before { content: "\E806"; } /*hard rain*/
.icon-10d:before { content: "\E80B"; } /*rain*/
.icon-10n:before { content: "\E80B"; } /*rain*/
.icon-11d:before { content: "\E807"; } /*thunderstorm*/
.icon-11n:before { content: "\E807"; } /*thunderstorm*/
.icon-13d:before { content: "\E808"; } /*snow*/
.icon-13n:before { content: "\E808"; } /*snow*/
.icon-50d:before { content: "\E809"; } /*fog*/
.icon-50n:before { content: "\E809"; } /*fog*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  color: #fff;
  overflow: hidden;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
}
div {
  max-width: 100%;
}
.app {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  height: 100%;
}
.app > * {
  position: relative;
}
.background {
  filter: blur(5px);
  position: absolute;
  width: 101vw;
  min-height: 101vh;
  left: -3;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.bg-element {
  background: rgba(255,255,255,0.2);
  border-radius: 100%;
}
.search input {
  background: rgba(0,0,0,0.2);
  border: none;
  padding: 10px;
  color: white;
}
.search button {
  background: rgba(0,0,0,0.5);
  border: none;
  padding: 10px;
  color: white;
}
.weather {
  /*position: relative;*/
  text-align: center;

}
.weather__location {
  margin-bottom: 20px;
}
.weather__content {
  display: flex;
  justify-content: center;
  width: 500px;
  max-width: 95%;
  margin: auto;

}

.weather__wind {
  align-self: flex-end;
  width: 80px;
  height: 80px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -40px;
  position: relative;
  font-size: 1.2em;
}
.weather__wind-icon {
  width: 35px;
  height: 35px;
  position: absolute;
  top: -10px;
  left: -10px;
}
.weather__wind-icon img{
  max-width: 100%;
  padding: 5px;
}

.weather__temp {
  width: 170px;
  height: 170px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-family: 'Oswald', sans-serif;
  font-weight: 100;
  /*line-height: 1;*/
}
.weather__temp p {
  margin-left: 8px;
}
.weather__temp span {
  font-size: 36px;
  vertical-align: text-top;
  margin-left: -10px;
}

.weather__icon {
  width: 80px;
  height: 80px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: -45px;
}



.measurement {
  width: 50px;
  height: 25px;
  border-radius: 30px;
  padding: 2px;
  cursor: pointer;
  position: relative;
}
.measurement:before {
  content: '°F';
  position: absolute;
  left: 4px; top: 3px;
  margin: auto;
}
.measurement:after {
  content: '°C';
  position: absolute;
  right: 4px; top: 3px;
  margin: auto;

}



.measurement__input {
  display: none;
}
.measurement__switcher {
  background: rgba(255,255,255,1);
  width: 20px;
  height: 20px;
  border-radius: 100%;
  transition: transform .2s ease-in-out;
}
.measurement__input:checked + .measurement__switcher {
  transform: translateX(26px)
}


.weather__icon .icon {
  font-size: 2em;
}