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

.loader-container{
  background-color:rgb(48, 43, 43);
  transition:all 0.3s;
  position:fixed;
  top:0;left:0;
  width:100%;
  height:100%;

}
header {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Montserrat;
    margin-bottom: 30px;
    position: absolute;
    top: 7%;
}

header input {
    
  backdrop-filter: brightness(85%);
  width: 100vw;
  max-width: 305px;
    padding: 10px 15px;
    border: none;
    outline: none;
    background-color: rgba(255, 255, 255, 0.099);
    border-radius: 5px;
    font-family: Montserrat;
    font-size: 20px;    
    font-weight: 300;
    color:white;
    border-bottom:1px solid #FFF;
    transition: 0.2 ease-out;
}

header input:focus {
    background-color: rgba(255, 255, 255, 0.199);
    color:white;
}
header input::placeholder{
  color:rgb(255, 255, 255) ;
}


body {
  background-image: url('bg4.jpg');
  background-size: cover;
  background-position: bottom center;
}

.app-warp {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100vw;
  align-items: center;
  text-align: center;
  
}
.sk-chase {
  width: 60px;
  height: 60px;
  position: absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4); 
  } 100%, 0% {
    transform: scale(1.0); 
  } 
}

main {
  flex: 1 1 100%;
  padding-top: 25px ;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: absolute;
  top:15%;
  border-radius: 10px;
  backdrop-filter: brightness(85%);
  width: 100vw;
  max-width: 330px;
  /* margin-top: 50px; */
}

.location .city {
  color: #FFF;
  font-size: 25px;
  font-weight: 400;
  font-family: Montserrat;
  margin-bottom: 5px;
  text-shadow: 2px 5px rgba(46, 46, 46, 0.6);
}
.util-4{
  font-size: 76px;
}

.current .temp {
  color: #FFF;
  font-size: 81px;
  font-weight: 900;
  font-family: sans-serif;
  text-shadow: 2px 6px rgba(34, 33, 33, 0.6);
}

.current .temp span {
  font-family: 500;
}
.current .weather {
  color: #FFF;
  font-size: 32px;
  font-family: Montserrat;
  font-weight: 700;
  margin-bottom: 5px;
  padding: 10px;
  text-shadow: 0px 3px rgba(0, 0, 0, 0.4);

}
.humid{
  display: flex;
  margin-left:20px ;
  
}
.humidity{
  margin-left: 16px;
}
.fa-wind{
  font-size: 40px;
  padding-right:25px ;
}
.temp-util{
  display: flex;
  margin-top: 20px;
  color: #FFF;
  font-family: Montserrat;
  font-size: 1.2em;
}
.util-1{
  display: flex;
}
.util-2{
  display: flex;
}
.icon-1>img{
  width: 90%;
  height: 90%;
}
.util-3{
padding: 10px;
  padding-right:0px;
}
.fa-map-marker-alt{
  color:#ffffff;
  font-size: 27px; 
  padding: 4px;
  margin-right: 10px;
}
.fa-tint{
  font-size: 1.4em;
}

.temp2
{ 
display: flex;
justify-content: center;
align-items:center;

}



.current {
  color: #FFF;
  font-size: 24px;
  font-weight: 500;
  text-shadow: 0px 4px rgba(0, 0, 0, 0.4);
}

.current i {
  background-color:#3a18fa
}
footer{
  background-color: hsla(0,0%,100%,0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color:rgba(255, 255, 255, 0.6);
text-align: center;
font-size: 16px;
margin-top: 10px;
position: fixed;
left:0vh;
right:0vh;
bottom: 0vh;
width: 100%;
padding-bottom:4px ;
}
footer>a>i{
font-size: 16px;
padding: 0px;
color:rgba(255, 255, 255, 0.6);

}
.style-two {
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));
}
.hide{
  opacity:0;
  pointer-events:none;
}
.hide1{
  display:none;
  pointer-events:none;
}