@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";*{padding:0;margin:0;box-sizing:border-box}html{font-family:Inter,serif;scrollbar-width:thin}:root{--text: #e5ebe8;--background: #060908;--accent: #0374d1;--border: rgba(255, 255, 255, .1);color-scheme:dark;--gutters: 1rem;--border-radius: 5px;--font-xs: .75rem;--font-sm: .875rem;--font-base: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-2xl: 1.5rem;--font-3xl: 1.875rem;--font-4xl: 2.25rem;--font-5xl: 3rem}body.light{--text: #141a17;--background: #f6f9f8;--accent: #0374d1;--border: rgba(0, 0, 0, .1);color-scheme:light}body{background-color:var(--background);color:var(--text);font-size:1rem}header,section{padding:var(--gutters)}.header-title-logo-container{display:flex;align-items:center;gap:1rem}#header-icon{width:50px;height:50px}section{border-bottom:1px solid var(--border)}button{border:none;cursor:pointer}header{display:flex;justify-content:space-around;border-bottom:1px solid var(--border);height:70px}#header-title{font-size:var(--font-4xl)}.config-container{display:flex;gap:1rem}#temperature-switch{display:flex;justify-content:center;align-items:center;width:100px;background-color:var(--background);border-radius:var(--border-radius);border:1px solid var(--border)}#theme-change-button{background-color:transparent;font-size:var(--font-2xl)}.temperature-switch-option{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border-radius:var(--border-radius);font-size:var(--font-2xl)}.active-temperature{background-color:var(--accent);color:var(--secondary-text)}.weather-icon-time-form-container{display:flex;justify-content:space-evenly;align-items:center;gap:2rem}.weather-icon-temperature-time-container{display:flex;gap:1rem;align-items:center}.weather-temperature-time-container{display:flex;flex-direction:column;align-items:center;gap:1rem}#current-weather-icon{font-size:5rem}#current-weather-time{font-size:var(--font-4xl)}.current-weather-form-container{display:flex;flex-direction:column;gap:1rem;text-align:center}#search-location-input{width:400px;height:50px;padding:var(--gutters);font-size:var(--font-2xl);outline:none;background-color:var(--background);border:2px solid var(--border);border-radius:var(--border-radius);transition:border-color .25s linear}#search-location-input:active,#search-location-input:focus{border-color:var(--accent)}#current-weather-title,#current-weather-temperature{font-size:var(--font-4xl)}.weather-data-section{border:1px solid var(--border);height:100%}.weather-data-container{display:flex;justify-content:center;height:100%;gap:2rem}.hourly{display:flex;flex-direction:column;overflow-x:scroll;min-width:fit-content;height:100%;max-height:500px;padding:.5rem}.hour{display:flex;align-items:center;justify-content:space-evenly;gap:10px;font-size:var(--font-2xl);padding:.8rem;border:1px solid var(--border);border-radius:var(--border-radius)}.hour i{font-size:var(--font-4xl);text-align:center}.hour p{padding:5px}.weather-details-container{width:100%;overflow:hidden}.conditions-proverb{display:flex;justify-content:space-evenly;align-items:center;padding:1rem;height:70%}.daily{display:flex;gap:.5rem;justify-content:space-between;padding:1rem;height:30%;overflow-y:auto}.daily span{cursor:pointer;border:1px solid var(--border);width:175px}.clicked{background-color:var(--accent);color:var(--secondary-text);border-radius:var(--border-radius);text-align:center;padding:10px}.none{background-color:none;text-align:center;padding:10px;border-radius:var(--border-radius);transition:opacity .25s linear,background-color .25s linear}.none:hover{background-color:var(--accent);opacity:.9}.daily i{font-size:var(--font-4xl);padding:20px}.day{font-size:var(--font-3xl)}.conditions{display:flex;flex-direction:column;font-size:var(--font-3xl);width:50%}.details{text-align:center;padding:1rem}.proverb{display:flex;flex-direction:column;text-align:center;width:50%}.proverb h3{font-size:var(--font-4xl);padding:1rem}.proverb p{font-size:var(--font-3xl);padding:2rem}.climate-change-section{text-align:center;display:flex;flex-direction:column;gap:2rem}.section-title{font-size:2rem}@media screen and (max-width: 992px){.weather-data-container{flex-direction:column;overflow:hidden}.hourly{height:200px}}