@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
  font-family: "Poppins", sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #1e272e;
  position: relative;
}
body.rain {
  background: url("../images/rainy.jpg");
}
body.cloud {
  background: url("../images/cloudy.jpg");
}
body.clear {
  background: url("../images/clear-sky.jpg");
}
body.thunder {
  background: url("../images/thunder.jpg");
}
body.haze {
  background: url("../images/haze.jpg");
}
body.mist {
  background: url("../images/mist.jpg");
}
.loading,
.error {
  display: none;
}
.loading.active,
.error.active {
  background-color: rgba(0, 0, 0, 0.887);
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade 1.1s linear 1;
}
@keyframes fade {
  100%,
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.error.active {
  animation: none;
  color: white;
  animation: scale 0.5s linear 1;
}
@keyframes scale {
  0% {
    opacity: 0;
    font-size: 5px;
  }
  100% {
    opacity: 1;
    font-size: 16px;
  }
}
@media (max-width: 550px) {
  body.rain #forBg {
    background: url("../images/rainy.jpg");
  }
  body.cloud #forBg {
    background: url("../images/cloudy.jpg");
  }
  body.clear #forBg {
    background: url("../images/clear-sky.jpg");
  }
  body.thunder #forBg {
    background: url("../images/thunder.jpg");
  }
  body.haze #forBg {
    background: url("../images/haze.jpg");
  }
}