* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   transition: all .4s;
   font-family: 'Lato';
}

h2 {
   font-weight: 700;
   color: #fff;
}

p {
   color: #fff;
}

.hidden {
   display: none;
}

/* LOADER */
.wrapper {
   width: 200px;
   height: 60px;
   position: absolute;
   left: 50%;
   top: 50%;


   transform: translate(-50%, -50%) scale(0.5);

}

.circle {
   width: 20px;
   height: 20px;
   position: absolute;
   border-radius: 50%;
   background: linear-gradient(#7402df, #0299df);
   left: 15%;
   transform-origin: 50%;
   animation: circle .5s alternate infinite ease;
}

@keyframes circle {
   0% {
      top: 60px;
      height: 5px;
      border-radius: 50px 50px 25px 25px;
      transform: scaleX(1.7);
   }

   40% {
      height: 20px;
      border-radius: 50%;
      transform: scaleX(1);
   }

   100% {
      top: 0%;
   }
}

.circle:nth-child(2) {
   left: 45%;
   animation-delay: .2s;
}

.circle:nth-child(3) {
   left: auto;
   right: 15%;
   animation-delay: .3s;
}

.shadow {
   width: 20px;
   height: 4px;
   border-radius: 50%;
   background-color: rgba(0, 0, 0, .5);
   position: absolute;
   top: 62px;
   transform-origin: 50%;
   z-index: -1;
   left: 15%;
   filter: blur(1px);
   animation: shadow .5s alternate infinite ease;
}

@keyframes shadow {
   0% {
      transform: scaleX(1.5);
   }

   40% {
      transform: scaleX(1);
      opacity: .7;
   }

   100% {
      transform: scaleX(.2);
      opacity: .4;
   }
}

.shadow:nth-child(4) {
   left: 45%;
   animation-delay: .2s
}

.shadow:nth-child(5) {
   left: auto;
   right: 15%;
   animation-delay: .3s;
}

.wrapper span {
   position: absolute;
   top: 75px;
   font-family: 'Lato';
   font-size: 20px;
   letter-spacing: 12px;
   color: #fff;
   left: 15%;
}

/* loader*/

.container {
   min-height: 100vh;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   align-content: center;
}

@media screen and (max-width: 468px) {
   #card {
      width: 100%;
      height: 100vh;
   }
}

@media screen and (min-width: 468px) {
   #card {
      width: 400px;
      height: 650px;
      border-radius: 15px;
   }
}


#card {

   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   flex-direction: row;
   align-content: space-between;
   background-color: #202020;
   /* background-image: url(./bg/night.png); */
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;


   overflow: hidden;
}

#main {
   /* margin-top: 15px; */
   padding-block: 15px;
   flex-basis: 100%;
   display: flex;
   justify-content: space-around;
   background-color: #2020205d;
}

.ratio {
   position: relative;
   flex-basis: 40%;
   padding-top: 25%;
   /* calc(1/1.62*100%) */
}

.icons {
   height: 50px;
   background-size: cover;
   background-position: center;
}

#iconbg {
   position: absolute;
   inset: 0;
   background-position: center;
   background-size: 130%;
   background-repeat: no-repeat;

}

.description-container {

   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.meteo,
.description {
   align-self: center;
   font-size: 1.3rem;

}

#temp {
   font-family: 'roboto';
   font-weight: 400;
   font-size: 3rem;
}

#forecast {
   margin-bottom: 15px;
   font-size: 0.8rem;
   flex-basis: 98%;
   display: flex;
   justify-content: space-around;
   text-align: center;

}

.fcontainer {
   padding-block: 10px;
   flex-basis: 23%;
   background-color: #2020205d;

}

.t {
   font-size: 1rem;
}