@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500;600;700&display=swap');



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

:root{
  --colorDark1:#112D4E;
  --colorDark2:#3F72AF;
  --colorLight1:#DBE2EF;
  --colorLight2:#F9F7F7;
}

.wrapper{
  width:100vw;
  height:200vh;
  color:var(--colorLight2);
  background: #000428;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #004e92, #000428);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1{
  text-align: center;
  text-transform: uppercase;
  padding-top:20px;
}

.tab-container{
  max-width:550px;
  margin:0 auto;
  margin-top:4rem;
  display:flex;
  width:90%;
  justify-content:space-between;
  margin-block:4rem;
}

.tab{
  cursor:pointer;
  font-size:0.875rem;
  letter-spacing:1.75px;
  padding:5px 8px;
}

.tab.current-tab{
  background-color: rgba(219,226,239,0.5);
  border-radius:4px;
}

/* .weather-container{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-block:4rem;
} */

.btn{
  font-size:0.5rem;
  text-transform:uppercase;
  border-radius:5px;
  background-color:var(--colorDark2);
  cursor:pointer;
  padding:10px 30px;
  all:unset;
  /* appearence:none;
  border:none;
  color:white;*/
  margin-bottom: 10px;
}

.grant-location-container{
  display:none;
}

.sub-container{
  display:none;
  flex-direction:column;
  align-items:center;
}


.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;
}

.name{
  display:flex;
  align-items:center;
  gap:0 0.5rem;
  margin-bottom:1rem;
}

.name p{
  font-size:2rem;
}

.user-info-container img{
  width:90px;
  height:90px;
}



.name img{
  width:30px;
  height:30px;
  object-fit: contain;
}

.user-info-container p{
  font-size:1.5rem;
  font-weight:200;
}

.user-info-container p[data-temp]{
  font-size:2.75rem;
  font-weight:700;
}

.parameter-container{
  display:flex;
  gap:10px 20px;
  justify-content:center;
  align-items:center;
  margin-top:2rem;
}

.parameter{
  width: 33%;
  max-width:200px;
  background-color:rgba(219,226,239,0.5);
  border-radius:5px;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:5px 0;

}

.parameter img{
  width:50px;
  height:50px;
}

.parameter p:first-of-type{
  font-size:1.15rem;
  font-weight:600;
  text-transform:uppercase;
}

.parameter p:last-of-type{
  font-size:1rem;
  font-weight:200;
}

.form-container{
  /* display:none; */
  display:none;
  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 input::placeholder{
  color:rgba(255,255,255,0.7);
}

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

.form-container .btn{
  padding:unset;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background-color: #3F72AF;
  margin-bottom:1px;
}

@media only screen and (max-width: 768px) {
  .wrapper {
    height: auto; /* Adjust the height or adapt for smaller screens */
    padding: 20px; /* Add padding for better spacing on smaller screens */
  }

  /* Adjust background to cover full mobile screen */
  .wrapper {
    background-size: cover;
    background-position: center;
    height:150vh;
  }

  .wrapper.no-data {
    height: 100vh; /* Ensure the wrapper covers the entire viewport */
    display: flex; /* Use flex to center the content */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    background-size: cover;
    background-position: center;
    overflow-x: hidden; /* Prevent horizontal overflow */
  }

  .tab-container {
    flex-direction: column; /* Change tabs to a column layout */
    text-align: center; /* Center-align the tabs */
    gap: 10px; /* Add some space between tabs */
    margin-top: 2rem; /* Adjust margin for smaller screens */
  }

  .tab {
    font-size: 1rem; /* Adjust tab font size for smaller screens */
  }

  /* Convert humidity, wind, and cloud elements to flex column for mobile screens */
  .parameter-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .parameter {
    width: 90%; /* Adjust width for mobile screens */
    max-width: 100%; /* Ensure it fits within the container */
    margin-bottom: 10px; /* Add some space between elements */
    display:flex;
    flex-direction:column;
    align-items:center;
  }

}