:root {
  --white: #ffffff;
  --off-white: #e5e5e5;
  --transp-white-1: rgba(255, 255, 255, 0.25);
  --transp-white-2: rgba(255, 255, 255, 0.18);
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: "Poppins", sans-serif;
}
h1{
  text-align: center;
  color: rgb(5,41,51);
  margin-bottom: 15px;
}
h2{
font-size: 2rem;
}
form{
display:grid;
grid-template-columns:72% 25%;
grid-gap:3%;
}
.container{
width: 50%;;
background: var(--transp-white-2);
backdrop-filter: blur(10px);
margin: 5rem auto;
padding: 2rem;
border: 2px solid var(--transp-white-2);
border-radius: 10px;
color:rgb(5,41,51);
height: 600px;
}
input{
background-color: transparent;
color: black;
padding: .5rem;
border-radius: 10px;
outline: none;
border: 1px solid white;
}
.submit-btn{
background-color: transparent;
padding: .5rem 1rem;
border:2px solid #04009A ;
cursor:pointer;
transition:.3s;
font-weight: bold;
color:black;
border-radius: 0.3em;
}
.submit-btn:hover{
transform: translateY(-3px);
color:#fff ;
}

.weather{
margin-top:3rem;
display:flex;
justify-content: space-between;
align-items:center;
height:200px;

}
.left{
width:100%;
padding:.3rem;
padding-bottom: 0;
border-radius:10px 0 0 10px;
height:220px;
line-height:3;
text-transform: uppercase;
background: var(--transp-white-2);
backdrop-filter: blur(10px);

}
.temp{
text-align: center;
margin-top: 15px;
}

.right{
border-radius:10px ;
text-align:center;
height:220px;
width:100%;
border-radius:0 10px 10px 0;
line-height:2.5;
background: var(--transp-white-2);
backdrop-filter: blur(10px);

}
.icon{
height:85px;
padding: .5rem;
border-radius:0 10px 0 0;
color:#04009A;
}
.condition{
height:135px;
border-radius:0 0 10px;
color:rgb(5,41,51);
font-size: 20px;
}

/* Responsive Design */
@media screen and (max-width: 1000px) {
  .container {
      width: 80%;
  }
}

@media screen and (max-width: 700px) {
  .container {
      width: 90%;
      padding: 1rem;
  }

  .weather {
      flex-direction: column;
      text-align: center;
  }

  form {
      grid-template-columns: 1fr;
      grid-gap: 1rem;
  }

  .right {
      margin-top: 1rem;
  }
}

@media screen and (max-width: 500px) {
  h1 {
      font-size: 1.5rem;
  }

  h2 {
      font-size: 1.2rem;
  }

  .btn {
      padding: 0.5rem;
      font-size: 0.9rem;
  }

  .weather {
      margin-top: 2rem;
  }

  .container {
      width: 95%;
  }
}