*,::before,::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:  'Merriweather Sans', sans-serif;
    
    
}

:root{
    --colorDark1: #112D4E;
    --colorDark2: #72a7e8;
    --colorLight1: #e6edf1;
    --colorLight2: #F9F7F7;
}

body{
   background-image: url('assets/bg3.jpg');
   background-size: cover;
   background-position: top center;
 } 
.wrapper{
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   background-image: linear-gradient(to bottom, rgba(0,0,0,0.3),rgba(0,0,0,0.6));
    color: var(--colorLight2);
}
h1{
    text-align: center;
  
}

 img{
   width: 40px;
   height: 40px;

 }
 #timeDiv{
   line-height: 40px;
}
#time{
  font-size: 30px;
  font-weight: 900;
}
#ampm{
  font-size: 25px;
  font-weight: 500;
}
#date{
  font-size: 20px;
  margin-left: 5px;
}
.tab-container{

    max-width: 550px;
    width: 90%;
    display: flex;
     justify-content: space-between;
      margin: 0 auto;
      margin-top: -3px ;
}
.tab{
    letter-spacing: 2px;
    cursor: pointer;
    font-size: 1rem;
    padding: 5px 10px;
}
.tab.current-tab{
    background-color: rgba(155, 231, 67, 0.5);
    border-radius: 10px;

}
.weather-container{
    
    margin-block: 4rem; 
}
.btn{
     all: unset;
    font-size: 0.85rem;
    background-color: var(--colorDark2);
    border-radius: 4px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 30px;
  /* margin-bottom: 10px; */
}
.sub-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.grant-location-container{
    display: none;
}
.grant-location-container.active{
     display: flex;
}

.grant-location-container img{
    margin-bottom: 2rem;
}
 .grant-location-container p:first-of-type{
    font-size: 1.75rem;
    font-weight: 600;

 }
 .grant-location-container p:last-of-type{
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.75rem;
    margin-bottom: 1.75rem;
    letter-spacing: 0.75px;
 }
 .loading-container{
    display: none;
 }
 .loading-container.active{
    display: flex;
 }
 .loading-container p{
    text-transform: uppercase;
 }
 .user-info-container{
    display: none;
     
 }
 .user-info-container.active{
    display: flex;
 }

 .city-detail-card{
   width: 100%;
   max-width: 300px;
   background-color: rgba(144, 66, 216, 0.907);
   border-radius: 5px;
margin-top: 0.1px;
margin-bottom: 10px;
   display: flex;
   flex-direction: column;
   /* gap: 5px 0; */
   justify-content: center;
   align-items: center;
 }

 .name{
    display: flex;
    align-items: center;
    gap: 0 0.5rem;
    margin: 1rem;
 }
 .user-info-container p{
    font-size: 1.5rem;
    font-weight: 200;
 }
 .user-info-container img{
    width: 90px;
    height: 90px;
 }
 .name p{
    font-size: 2rem;
 }
 .name img{
    width: 20px;
    height: 20px;
 }
 .user-info-container p[data-temp]{
    font-size: 2.75rem;
    font-weight: 700;
 }
 .parameter-container{
   width: 90%;
    display: flex;
    gap: 10px 20px;
    justify-content: center;
    align-items: center;
      
 }

 .parameter{
    width: 100%;
    max-width: 200px;
    background-color: rgba(238, 115, 209, 0.5);
    border-radius: 5px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    /* gap: 5px 0; */
    justify-content: center;
    align-items: center;
      
 }
  .parameter img{
    width: 50px;
    height: 50px;
  }
  .parameter p:first-of-type{
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
  }
  .form-container{
    display: none;
    /* display: flex; */
    width: 90%;
    max-width: 550px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    margin-bottom: 3rem;
  }
.form-container.active{
    display: flex;
  }
  .form-container input{
    all: unset;
    width: calc(100% - 80px);
    height: 40px;
    padding: 0 20px;
    background-color: rgba(219,226,239,0.5);
    border-radius: 10px;
     
  }
  .form-container img
  {
text-align: center;
width: 20px;
height: 20px;
  }
  .form-container input::placeholder{
    color: var(--colorLight1);

  }
  .form-container input:focus{
    outline: 3px solid rgba(232, 112, 206, 0.7); 
  }

  .Invalid-Input{
   display: none;
   width: 100%;
    
  }
  .Invalid-Input.active{
   display: flex;
  }
  .Invalid-Input img{
   appearance: none;
   all: unset;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 23%;
   height: 23%;
   margin: auto;
    
  }
  .Invalid-Input p{
   font-size: 20px;
   font-weight: 600;
   display: flex;
   justify-content: center;
   margin: auto;
  }