*{margin:0%;padding:0%;font-family:Poppins,serif}.search-bar{display:flex;justify-content:center;align-items:center;width:100%;height:3rem;background-color:#f5f5f5;font-size:2rem;gap:20px}.search-bar-input{height:2.5rem;display:flex;justify-content:center;align-items:center;position:relative;min-width:210px}.search-bar-input-field{position:relative;display:flex;border:2px solid #13121230;background-color:#e7e3e3da;align-items:center;width:20vw;justify-content:space-between;min-width:210px;transition:all .3s ease-in}.search-bar-input-field:focus-within{border:2px solid #131212;transition:all .3s ease-in}.search-bar-input input{height:2rem;min-width:150px;padding:0%;margin:0%;font-size:1.2rem;text-indent:5px;align-items:center;justify-content:center;width:20vw;outline:none;border:none;background-color:#e7e3e3da}.cities-dropdown{justify-content:center;align-items:center;width:20vw;min-width:100px;background-color:#f5f5f5;font-size:1.1rem;position:absolute;top:3rem;max-height:200px;overflow-y:scroll}.cities-dropdown-item{text-align:center;cursor:pointer;transition:all .3s ease-in;border:.5px solid #cd0a0a00}.cities-dropdown-item:hover{border:.5px solid #0b0239;transition:all .3s ease-in}.cities-dropdown-empty-item{text-align:center;width:100%;padding:0%;border:.5px solid #f5f5f5}.serach-button{display:flex;align-items:center;position:relative;cursor:pointer}.cities-dropdown .loader{text-align:center;font-size:1.1rem;width:100%;padding:0%}@media screen and (max-width: 768px){.search-bar{font-size:1.5rem;height:15vh;flex-direction:column;align-items:center}.search-bar-input-field,.search-bar-input-field input,.cities-dropdown{width:80vw}.cities-dropdown{opacity:.9}.cities-dropdown-item{font-size:1rem;gap:5px;opacity:.7}}.weather{display:flex;flex-direction:column;align-items:center;padding:20px;font-family:Arial,sans-serif}.top .city{font-size:2rem;font-weight:700;text-align:center}.top .weather-description{font-size:1.5rem;font-weight:500;text-align:center;text-transform:capitalize}.top .weather-icon{width:90px;height:90px;display:block;margin:0 auto}.bottom{align-items:center;text-align:center}.temperature{font-size:2.3rem;font-weight:700;font-family:monospace}.parameter-label,.parameter-label-header{font-size:1.2rem;font-weight:700}.parameter-label-header{text-decoration:underline;font-size:1.4rem}.parameter-value{font-size:1rem;font-weight:500}.loader{display:flex;justify-content:center;align-items:center;font-size:small}.forecast-title{align-items:center;text-align:center}@media screen and (max-width: 768px){.top .city{font-size:1.4rem}.top .weather-description{font-size:1.2rem}.top .weather-icon{width:70px;height:70px}.bottom{font-size:1.2rem}.temperature{font-size:1.8rem}.parameter-label,.parameter-label-header{font-size:1rem}.parameter-value{font-size:.8rem}.loader{font-size:x-small}}.forecast{display:flex;overflow-x:scroll;width:80vw;margin:10px auto;padding:1rem;border-radius:10px;border-color:gray;border-style:solid;border-width:1px}.forecast-item{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 10px;padding:10px;border-radius:10px;background-color:#ffffff1a;box-shadow:0 0 10px #0000001a;transition:all .3s}