:root{--background-primary: #f9f9f9;--background-text-primary: #222225;--background-secondary: #ffffff;--background-text-secondary: #25252c;--background-text-secondary-variant: #5a5a5f;--background-text-secondary-variant-2: #7b7980;--background-default:#252525;--background-button: #262494;--background-button-text: #ffffff;--bg-aqi-1: #42e642;--on-bg-aqi-1: hsla(0, 0%, 100%, 1);--bg-aqi-2: #dbc903;--on-bg-aqi-2: hsla(0, 0%, 100%, .95);--bg-aqi-3: #eb9f2e;--on-bg-aqi-3: hsla(0, 0%, 100%, .9);--bg-aqi-4: #e93a3a;--on-bg-aqi-4: hsla(0, 0%, 100%, .85);--bg-aqi-5: #f31182;--on-bg-aqi-5: hsla(0, 0%, 100%, .8);--outline: #d1d1d6;--gradient-1: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, .8) 65%, hsl(0, 0%, 100%) 100%);--gradient-2: linear-gradient(180deg, hsla(240, 5%, 90%, 0) 0%, hsla(240, 5%, 90%, .8) 65%, hsl(240, 5%, 90%) 100%);--fs-6xl: 4rem;--fs-5xl: 3rem;--fs-4xl: 2.5rem;--fs-3xl: 2.2rem;--fs-2xl: 1.8rem;--fs-xl: 1.6rem;--fs-lg: 1.4rem;--fs-md: 1.2rem;--fs-base: 1rem;--shadow-1: 0px 1px 3px hsla(0, 0%, 0%, .2);--shadow-2: 0px 3px 6px hsla(0, 0%, 0%, .15);--radius-28: 28px;--radius-16: 16px;--transition-short: .1s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}img,span,button,input,a{display:block}input,button{font:inherit;color:inherit;border:none;background-color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}li{list-style:none}img{height:auto}input{width:100%}html{font-family:var(--ff-nunito-sans);font-size:10px;scroll-behavior:smooth}body{background-color:var(--background-primary);color:var(--background-text-primary);font-size:var(--fs-2xl);max-width:1440px;width:90%;margin:0 auto;font-family:Inter,serif}::-webkit-scrollbar{width:10px;border-radius:6px}::-webkit-scrollbar-track{background:var(--background-secondary);border-radius:6px}::-webkit-scrollbar-thumb{background:var(--background-text-secondary-variant);border-radius:6px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center}.modal-content{background:#fff;padding:20px;border-radius:var(--radius-16);width:90%;box-shadow:0 4px 10px #0003;display:flex;flex-direction:column;gap:10px}.modal-content textarea{width:100%;height:100px;padding:8px;border:1px solid var(--background-text-secondary-variant);border-radius:var(--radius-16);resize:none}.component-loader{width:40px;height:40px;border:5px solid #ecececcc;border-top:5PX solid var(--background-button);border-radius:50%;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;margin:50px auto}.loader{width:20px;height:20px;border:5px solid #ecececcc;border-top:5PX solid var(--background-button);border-radius:50%;-webkit-animation:loading 1s linear infinite;animation:loading .25s linear infinite;position:relative}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.badge{padding:10px;border-radius:var(--radius-16);font-size:var(--fs-lg)}.footer{padding:30px;text-align:center;font-style:italic;font-weight:200;font-size:var(--fs-xl)}.error-text{font-size:var(--fs-lg);color:#e93a3a;margin:10px 20px}.empty-text{font-size:var(--fs-lg);margin:10px 20px}.toast{position:fixed;top:20px;right:20px;padding:12px 16px;border-radius:6px;font-size:14px;color:#fff;background-color:#333;box-shadow:0 4px 6px #0003;opacity:0;animation:fadeIn .3s ease-in forwards,fadeOut .5s ease-out forwards;animation-delay:0s,2.5s}.toast-success{background-color:#28a745}.toast-error{background-color:#e93a3a}.toast-info{background-color:#17a2b8}.toast-warning{background-color:#ffc107;color:#000}.app-container{display:flex;flex-direction:column;min-height:100vh}.content{flex:1}.not-found-container{text-align:center;padding:50px}.not-found-container h1{font-size:var(--fs-3xl);color:#e93a3a}.not-found-container p{margin:10px 0}.not-found-container a{color:var(--background-button);text-decoration:none;font-weight:700}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@media screen and (min-width: 1200px){.modal-content{width:60%}}.home-container{display:flex;flex-direction:column;gap:50px;margin:20px 0}.favorites{display:flex;flex-direction:column;gap:20px}.favorites h1,.cities-section h1{font-size:var(--fs-3xl)}.empty-favorite-text{font-size:var(--fs-xl);color:var(--background-text-secondary);font-weight:400}.cities-section{display:flex;flex-direction:column;gap:20px}.city-list{display:flex;flex-direction:column;gap:20px;padding:0}.city-list .city-item{background-color:var(--background-secondary);border-radius:var(--radius-16);color:var(--on-surface);padding:10px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.city-list .city-item:hover{border:1px solid var(--background-text-secondary)}.city-item .city-item-col-1 img{width:30px;height:30px}.city-item-col-1 .city-temp{display:flex;gap:10px;align-items:center;font-weight:600;font-size:var(--fs-xl)}.city-item-col-1 p,.city-item-col-2 p{font-size:var(--fs-lg)}.delete-city-button{background-color:#f51b1b;padding:5px;border-radius:50%}.delete-city-button:hover{opacity:.7}.delete-city-button img{width:15px;height:15px}@media screen and (min-width: 1200px){.city-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:0}.city-list .city-item{background-color:var(--background-secondary);border-radius:var(--radius-16);color:var(--on-surface);padding:10px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.city-list .city-item:hover{border:1px solid var(--background-text-secondary)}.city-item-col-1 .city-temp{display:flex;gap:10px;align-items:center;font-weight:600;font-size:var(--fs-3xl)}.delete-city-button{background-color:#f51b1b;padding:10px;border-radius:50%}.city-item .city-item-col-1 img{width:55px;height:55px}.city-item-col-1 .city-temp{font-size:var(--fs-3xl)}.city-item-col-1 p{font-size:var(--fs-xl)}.city-item-col-2 p{font-size:var(--fs-2xl)}.delete-city-button{padding:10px;border-radius:50%}.delete-city-button:hover{opacity:.7}.delete-city-button img{width:20px;height:20px}.empty-favorite-text{font-size:var(--fs-2xl)}.favorites h1,.cities-section h1{font-size:var(--fs-5xl)}}.weather-details-container{display:flex;flex-direction:column;gap:20px}.favorite-btn{align-self:flex-start;padding:5px 10px;background-color:#dfc42e;border-radius:6px;color:var(--background-text-secondary);font-size:var(--fs-lg);display:flex;align-items:center;gap:5px}.favorite-btn img{width:15px;height:15px}.weather-info-container{display:flex;flex-direction:column;gap:25px}.weather-details{background-color:var(--background-secondary);color:var(--background-text-secondary);border-radius:var(--radius-28);padding:20px;width:100%;height:fit-content}.weather-details h6{font-size:var(--fs-2xl);font-weight:700}.weather-details-desc{border-bottom:1px solid #ebebeb;padding-bottom:10px;font-size:var(--fs-2xl)}.weather-details-date{display:flex;align-items:center;gap:10px;margin:10px 0}.weather-details-date img{width:20px;height:20px}.weather-details-location{display:flex;align-items:center;gap:10px;margin:10px 0}.weather-details-location img{width:20px;height:20px}.weather-insights{background-color:var(--background-secondary);color:var(--background-text-secondary);border-radius:var(--radius-28);padding:20px;width:100%;display:flex;flex-direction:column;gap:20px}.highlights-header{font-size:var(--fs-4xl);font-weight:600}.weather-highlights{display:flex;flex-direction:column;gap:20px;padding:0}.weather-highlight{padding:16px;box-shadow:var(--shadow-1);border-radius:var(--radius-16);display:flex;flex-direction:column;gap:20px}.aqi{display:flex;justify-content:space-between;align-items:center}.aqi-1{background-color:var(--bg-aqi-1);color:var(--on-bg-aqi-1)}.aqi-2{background-color:var(--bg-aqi-2);color:var(--on-bg-aqi-2)}.aqi-3{background-color:var(--bg-aqi-3);color:var(--on-bg-aqi-3)}.aqi-4{background-color:var(--bg-aqi-4);color:var(--on-bg-aqi-4)}.aqi-5{background-color:var(--bg-aqi-5);color:var(--on-bg-aqi-5)}.air-pollution-details{display:flex;align-items:center;justify-content:space-between;gap:5px}.air-quality-img-container img{height:25px;width:25px}.air-pollution-details .air-substance>p:first-child{color:var(--background-text-secondary-variant);text-align:center;font-size:var(--fs-base)}.air-pollution-details .air-substance>p:nth-child(2){font-size:var(--fs-xl);margin-top:10px}.sys-highlight{display:flex;align-items:center;justify-content:space-between;gap:10px}.sys-highlight-col{display:flex;gap:10px;align-items:center;width:50%}.sys-highlight-col img{width:30px;height:30px}.sys-highlight-col-texts>p:first-child{color:var(--background-text-secondary-variant);font-size:var(--fs-base)}.sys-highlight-col-texts>p:nth-child(2){font-size:var(--fs-xl);margin-top:10px}.main-highlight{display:flex;align-items:center;justify-content:space-between;gap:25px}.main-highlight-col{width:50%;color:var(--background-text-secondary-variant);font-size:var(--fs-base)}.main-highlight-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xl);color:var(--background-text-secondary);margin-top:20px}.main-highlight-row img{width:30px;height:30px}.notes-container{background-color:var(--background-secondary);color:var(--background-text-secondary);border-radius:var(--radius-28);padding:20px;width:100%;display:flex;flex-direction:column;gap:10px;overflow:hidden}.empty-notes{margin-top:15px;font-size:var(--fs-xl);color:var(--background-text-secondary-variant)}.notes{max-height:150px;overflow-y:auto}.notes-container h1{font-size:var(--fs-2xl)}.note-text-container{display:flex;flex-direction:column;gap:10px;align-items:end}.add-note-action-btns{display:flex;align-items:center;justify-content:center;gap:20px}.add-note-action-btns button{font-size:var(--fs-xl);padding:5px 10px;border-radius:6px}.add-note-action-btns>button:nth-child(2){background-color:var(--background-button);color:var(--background-button-text)}.add-note-btn{display:flex;align-items:center;gap:5px;background-color:var(--background-button);color:var(--background-button-text);padding:5px;border-radius:6px;font-size:var(--fs-lg);width:fit-content}.add-note-btn img{width:20px;height:20px}.note{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:5px 0;margin-right:20px}.note-desc{cursor:pointer}.note-desc:hover{color:var(--background-text-secondary-variant-2)}.notes>div{border-bottom:1px solid #dddddd}.notes>div:last-child{border-bottom:none}.note p{color:var(--background-text-secondary-variant);font-size:var(--fs-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note .note-actions{display:flex;align-items:center;gap:5px}.note-actions img{width:18px;height:18px}.note-actions .edit-btn{border:1px solid transparent;padding:3px;border-radius:5px}.note-actions .edit-btn:hover{border:1px solid var(--background-text-secondary)}.note-actions .delete-btn{border:1px solid transparent;padding:3px;border-radius:5px}.note-actions .delete-btn:hover{border:1px solid #9b0000}.note-text-container button:hover{opacity:.8}.note-view-header{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-xl);color:var(--background-text-secondary-variant-2)}.note-view-header button{border-radius:6px;border:1px solid transparent;padding:5px}.note-view-header button:hover{border:1px solid var(--background-text-secondary)}.note-view-header button img{width:15px;height:15px}.note-view-desc{margin:20px 0;font-size:var(--fs-xl)}.weather-forecast{background-color:var(--background-secondary);color:var(--background-text-secondary);border-radius:var(--radius-28);padding:20px;width:100%;height:fit-content}.weather-forecast h6{font-size:var(--fs-2xl);font-weight:700}.forecast-item{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xl);padding:5px 0}.weather-details-temp{display:flex;align-items:center;gap:10px;font-size:var(--fs-2xl)}.weather-details-temp img{width:80px;height:80px}.forecast-item-temp{display:flex;align-items:center;gap:5px}.forecast-item-temp p span{display:inline;vertical-align:middle}.weather-details-temp h1 span{display:inline;font-size:var(--fs-5xl);vertical-align:middle}.empty-note-text{font-size:14px}@media screen and (min-width: 1200px){.weather-info-container{display:flex;flex-direction:row;gap:25px}.weather-details{width:25%}.weather-details-temp h1{display:inline;font-size:var(--fs-6xl)}.weather-details-temp h1 span{font-size:var(--fs-5xl)}.weather-details-temp img{width:75px;height:75px}.weather-insights{width:75%}.weather-highlights{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:0}.air-quality-img-container img{height:30px;width:30px}.air-pollution-details .air-substance>p:first-child{font-size:var(--fs-lg)}.air-pollution-details .air-substance>p:nth-child(2){font-size:var(--fs-3xl);margin-top:10px}.sys-highlight-col img{width:50px;height:50px}.sys-highlight-col-texts>p:first-child{font-size:var(--fs-xl)}.sys-highlight-col-texts>p:nth-child(2){font-size:var(--fs-3xl);margin-top:10px}.main-highlight-col{font-size:var(--fs-xl)}.main-highlight-row{font-size:var(--fs-3xl)}.main-highlight-row img{width:50px;height:50px}.notes-container h1{font-size:var(--fs-3xl)}.note-text-container textarea{border-radius:12px;padding:10px 15px;font-size:var(--fs-xl)}.empty-note-text{font-size:var(--fs-xl)}.note-text-container button{padding:10px;border-radius:12px;font-size:var(--fs-xl)}.weather-forecast{width:25%}}.navbar{display:flex;align-items:center;justify-content:space-between;padding:20px 0}.logo-container{display:flex;gap:10px;align-items:center;font-size:var(--fs-2xl);font-weight:600;font-style:oblique}.logo-container img{width:30px;height:30px}.search-wrapper{display:none;background-color:var(--background-primary)}.search-wrapper.active{position:fixed;top:0;left:0;display:block;width:100%;height:100vh;z-index:10}.search-container{display:flex;align-items:center;gap:10px;color:var(--background-text-secondary);position:relative;border-bottom:solid 1px #f1f1f1;height:70px;padding:15px 10px;width:100%}.search-container .search-icon-input{width:25px;height:25px;position:absolute;display:none}.close-search-button img{display:block;width:25px;height:25px}.search-container input{width:100%;height:100%;outline:none;padding:0 30px}.search-container input::-ms-input-placeholder{color:var(--background-text-secondary)}.search-button{display:block;padding:10px;border-radius:50%;background-color:var(--background-secondary)}.search-button img{height:25px;width:25px}.search-result-wrapper{position:relative;width:100%}.search-result{background-color:var(--background-primary);width:100%;display:flex;flex-direction:column;gap:10px;padding:5px}.city-result{display:flex;align-items:center;gap:15px;padding:5px}.city-result .location-img-container img{width:25px;height:25px}.city-result .city-result-details h6{font-size:var(--fs-xl);font-weight:400}.city-result .city-result-details p{font-size:var(--fs-base);color:var(--background-text-secondary-variant);font-weight:400;margin-top:3px}@media screen and (min-width: 1200px){.logo-container{font-size:var(--fs-2xl)}.logo-container img{width:40px;height:40px}.search-wrapper{display:block;background-color:var(--surface);border-radius:10px 10px 0 0;box-shadow:var(--shadow-1);width:500px;background-color:var(--background-secondary)}.search-wrapper.active{display:block;width:500px;height:fit-content;background-color:transparent;position:relative;background-color:var(--background-secondary);box-shadow:var(--shadow-1)}.search-container{height:45px;padding:5px 10px;width:100%}.search-container .search-icon-input{display:block}.search-button,.close-search-button{display:none}.search-result{position:absolute;background-color:var(--background-secondary);width:100%;display:flex;flex-direction:column;gap:10px;padding:5px;box-shadow:var(--shadow-1);border-radius:0 0 var(--radius-16) var(--radius-16)}}