* {
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
         box-sizing: border-box;
}

:root {
 font-size: 15px;
 font-family: "Lato", Arial, Helvetica, sans-serif;
}

body {
 height: 100vh;
 background-image: url('images/clouds-1282314_1920.jpg');
 background-repeat: repeat-y;
 background-size: cover;
}

.clearfix::after {
 content: '';
 display: block;
 clear: both;
}

.weather__container {
 width: 90%;
 max-width: 1200px;
 margin: 0px auto;
}

/* active class for container */
.weather__container.active {
 -webkit-filter: blur(3px);
         filter: blur(3px);
}

.blur {
 display: none;
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100vh;
 z-index: 0;
}

/* active class for blur */
.blur.active {
 display: block;
}

/* form***************************** */
.weather__form {
 position: relative;
 background: rgb(84, 169, 171);
 background: -o-linear-gradient(297deg, rgba(84, 169, 171, 1) 7%, rgba(84, 147, 171, 1) 18%, rgba(221, 133, 18, 1) 36%, rgba(87, 141, 197, 1) 43%, rgba(81, 92, 123, 1) 58%, rgba(24, 145, 109, 1) 66%, rgba(69, 101, 155, 1) 83%, rgba(177, 187, 51, 1) 97%);
 background: linear-gradient(153deg, rgba(84, 169, 171, 1) 7%, rgba(84, 147, 171, 1) 18%, rgba(221, 133, 18, 1) 36%, rgba(87, 141, 197, 1) 43%, rgba(81, 92, 123, 1) 58%, rgba(24, 145, 109, 1) 66%, rgba(69, 101, 155, 1) 83%, rgba(177, 187, 51, 1) 97%);
 border-radius: 10px;
 margin-top: 50px;
 overflow: hidden;
}

.weather__label,
.weather__input {
 display: block;
 width: 70%;
 margin: 10px;
 margin-left: 20px;
 font-size: 1.5rem;
}

.weather__input {
 width: 100%;
 height: 40px;
 border-radius: 5px;
}

.form__image {
 width: 110px;
 height: 110px
}

.form__image img {
 width: 100%;
}

.form__sun {
 position: absolute;
 left: 65%;
 bottom: 2%;
 -webkit-transform: scale(0.8);
     -ms-transform: scale(0.8);
         transform: scale(0.8);
 animation: move 1s infinite alternate-reverse linear;
}

.form__house {
 margin-left: 50px;
}

.form__thunder {
 position: absolute;
 top: -1%;
 right: -4%;
}

.form__rainbow {
 display: none;
}

.form__twister {
 display: none;
}

.form__btn {
 cursor: pointer;
}

@-webkit-keyframes move {
 100% {
  -webkit-transform: scale(1);
          transform: scale(1)
 }
}

@keyframes move {
 100% {
  -webkit-transform: scale(1);
          transform: scale(1)
 }
}

@media(min-width:768px) {
 .weather__input {
  width: 70%;
 }

 .form__btn {
  width: 50%;
 }

 .form__sun {
  left: 65%;
  bottom: 45%;
 }

 .form__house {
  margin-left: 300px;
  margin-top: -40px;
 }

 .form__thunder {
  top: 3%;
  right: 5%;
 }

 .form__rainbow {
  display: block;
  position: absolute;
  right: 8%;
  bottom: 3%;
  -webkit-transform: scale(1.6);
      -ms-transform: scale(1.6);
          transform: scale(1.6);
 }
}

@media(min-width:1024px) {
 .weather__form {
  width: 100%;
  height: 320px;
 }

 .weather__label {
  width: 40%;
  float: left;
 }

 .form__sun {
  left: 88%;
  bottom: 26%;
 }

 .form__rainbow {
  right: 17%;
  bottom: -16%;
 }

 .form__house {
  position: absolute;
  left: 5%;
  bottom: -3%;
  margin-left: 0px;
  margin-top: 0px;
 }

 .form__twister {
  display: block;
  position: absolute;
  left: 34%;
  bottom: 16%;
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7);
  -webkit-animation: move 1s infinite alternate linear;
          animation: move 1s infinite alternate linear;
 }
}