@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    background-color: linear-gradiet(300deg, #757b87, #909d9d);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}
h1{
    font-family: "Poppins", sans-serif;
    color:white;
}
input {
    padding: 1rem;
    border-radius: 25px;
    border: none;
    background-color: #fff;
    font-family: inherit;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    min-width: 300px;
    font-size: 1rem;
}
input:focus {
    outline: none;
}
.weather {
    text-align: center;
    font-size: 2rem;
}
.weather h2 {
    margin-bottom: 0;
    display: flex;
    align-items: center;
} /* .weather img{ transform: scale(2); } */
:root{
    --bs-dark: #212529;
  }
  
  .theme-container {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
  }
  
  .theme-container:hover {
    opacity: 0.8;
  }
  
  .shadow-dark {
    background: linear-gradient(145deg, #23282c, #1e2125);
    box-shadow: 17px 17px 23px #1a1d20,
      -17px -17px 23px #282d32, inset 5px 5px 4px #1e2226,
      inset -5px -5px 4px #24282c;
  }
  
  .shadow-light {
    box-shadow: 7px 7px 15px -10px #bbcfda, -4px -4px 13px #ffffff,
      inset 7px 7px 3px rgba(209, 217, 230, 0.35),
      inset -11px -11px 3px rgba(255, 255, 255, 0.3)
  }
  
  @keyframes change {
    0% {
      transform: scale(1);
    }
    h1{
        color: #fff;
    }
  
    100% {
      transform: scale(1.4);
    }
  }
  
  .change {
    animation-name: change;
    animation-duration: 1s;
    animation-direction: alternate;
  }