html,body,#root{width:100%;height:100%;margin:0;padding:0}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}.weather-display{margin-top:30px;padding:25px;border-radius:10px;box-shadow:0 2px 8px var(--shadow-color);background-color:var(--secondary-bg-color);transition:background-color .3s ease,box-shadow .3s ease}.weather-display h2{color:var(--primary-color);margin-bottom:20px;font-size:2em;display:flex;align-items:center;justify-content:center;gap:10px}.city-name{font-size:1.2em;font-weight:700;color:var(--text-color)}.weather-display .description{font-size:1.2em;margin-bottom:20px;color:var(--text-color)}.weather-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(120px,auto);gap:15px;margin-top:20px}.weather-grid .weather-card-item:first-child{grid-column:span 2;grid-row:span 2;min-height:255px;display:flex;flex-direction:column;justify-content:center;align-items:center}.weather-grid .weather-card-item:nth-child(2){grid-column:span 2}.weather-grid .weather-card-item:nth-child(3){grid-column:span 1}.weather-grid .weather-card-item:nth-child(4){grid-column:span 1}.weather-grid .weather-card-item:nth-child(5){grid-column:span 2}.weather-grid .weather-card-item:nth-child(6){grid-column:span 2}.weather-grid .weather-card-item:nth-child(7){grid-column:span 2}.weather-grid .weather-card-item:nth-child(8){grid-column:span 2}@media (max-width: 768px){.weather-grid{grid-template-columns:1fr}.weather-grid .weather-card-item:first-child,.weather-grid .weather-card-item:nth-child(2),.weather-grid .weather-card-item:nth-child(3),.weather-grid .weather-card-item:nth-child(4),.weather-grid .weather-card-item:nth-child(5),.weather-grid .weather-card-item:nth-child(6),.weather-grid .weather-card-item:nth-child(7),.weather-grid .weather-card-item:nth-child(8){grid-column:auto;grid-row:auto;min-height:120px}}.weather-card-item{background-color:var(--app-bg-color);border:1px solid var(--border-color);border-radius:10px;padding:15px;box-shadow:0 2px 5px var(--shadow-color);text-align:center;transition:all .3s ease;display:flex;flex-direction:column;justify-content:space-between;min-height:120px;height:auto}.weather-card-item:hover{transform:translateY(-5px);box-shadow:0 4px 12px var(--shadow-color)}.weather-card-item h3{color:var(--primary-color);margin-top:0;margin-bottom:10px;font-size:1.1em;display:flex;align-items:center;justify-content:center;gap:5px}.weather-card-item p{font-size:1.3em;font-weight:700;color:var(--text-color);margin:5px 0}.weather-card-item .sub-info{font-size:.9em;color:var(--text-color);opacity:.7;font-weight:400}.weather-icon{font-size:1.5em;vertical-align:middle}.App.dark .weather-display{background-color:var(--secondary-bg-color);box-shadow:0 2px 8px var(--shadow-color)}.App.dark .weather-display h2{color:var(--primary-color-dark)}.App.dark .weather-card-item{background-color:var(--app-bg-color);border:1px solid var(--border-color);box-shadow:0 2px 5px var(--shadow-color)}.App.dark .weather-card-item h3{color:var(--primary-color-dark)}.App.dark .weather-card-item p,.App.dark .weather-card-item .sub-info{color:var(--text-color)}@media (max-width: 768px){.weather-grid{grid-template-columns:1fr}}.common-cities-weather{margin-top:30px;padding:25px;border-radius:10px;box-shadow:0 2px 8px var(--shadow-color);background-color:var(--secondary-bg-color);transition:background-color .3s ease,box-shadow .3s ease}.common-cities-weather h2{color:var(--primary-color);margin-bottom:20px;font-size:2em}.common-cities-weather.dark h2{color:var(--primary-color-dark)}.weather-cards-container{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.weather-card{background-color:var(--app-bg-color);border:1px solid var(--border-color);border-radius:10px;padding:15px;box-shadow:0 2px 5px var(--shadow-color);width:200px;text-align:center;transition:all .3s ease;cursor:pointer}.weather-card:hover{transform:translateY(-5px);box-shadow:0 4px 12px var(--shadow-color)}.weather-card h3{color:var(--primary-color);font-size:1.5em;margin-bottom:10px}.weather-card .temperature{font-size:2em;font-weight:700;color:var(--accent-color);margin-top:10px}.weather-card .description{font-size:.9em;color:var(--accent-color);margin-top:10px;margin-bottom:10px}.weather-card .description{font-size:.9em;color:var(--text-color);margin-bottom:5px}.weather-card p{font-size:.85em;color:var(--text-color);margin:3px 0}.common-cities-weather.dark .weather-card{background-color:var(--app-bg-color);border:1px solid var(--border-color)}.common-cities-weather.dark .weather-card h3{color:var(--primary-color-dark)}.common-cities-weather.dark .weather-card .temperature{color:var(--accent-color-dark)}.common-cities-weather.dark .weather-card .description,.common-cities-weather.dark .weather-card p{color:var(--text-color)}@media (max-width: 768px){.weather-card{width:100%}}body{font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;transition:background-color .3s ease}body.light{--app-bg-color: #fff;--text-color: #333;--primary-color: #007bff;--primary-color-dark: #0056b3;--secondary-bg-color: #f9f9f9;--border-color: #eee;--shadow-color: rgba(0, 0, 0, .1);--app-shadow-color: rgba(0, 0, 0, .15);--header-footer-bg: #007bff;--header-footer-text: white;--icon-color: #007bff;--page-bg-color: #f9f9f9;--page-shadow-color: rgba(0, 0, 0, .1);--input-border-color: #ddd;--input-bg-color: #fff;--input-text-color: #333;--button-bg-color: #007bff;--button-text-color: white;--button-hover-bg: #0056b3;--theme-button-bg: #007bff;--theme-button-text: white;--theme-button-hover-bg: #0056b3}.sun-icon{position:absolute;top:-8px;left:-19px}.moon-icon{position:absolute;top:-10px;right:20px}body.dark{--app-bg-color: #444;--text-color: #f0f0f0;--primary-color: #88c0f0;--primary-color-dark: #66a0d0;--secondary-bg-color: #333;--border-color: #555;--shadow-color: rgba(0, 0, 0, .3);--app-shadow-color: rgba(0, 0, 0, .4);--header-footer-bg: #222;--header-footer-text: #f0f0f0;--icon-color: #88c0f0;--page-bg-color: #333;--page-shadow-color: rgba(0, 0, 0, .3);--input-border-color: #666;--input-bg-color: #333;--input-text-color: #f0f0f0;--button-bg-color: #88c0f0;--button-text-color: #333;--button-hover-bg: #66a0d0;--theme-button-bg: #88c0f0;--theme-button-text: #333;--theme-button-hover-bg: #66a0d0}body{font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;transition:background-color .3s ease;background-color:var(--secondary-bg-color)}.App{display:flex;flex-direction:column;min-height:100vh;background-color:var(--app-bg-color);color:var(--text-color);padding:20px;border-radius:12px;box-shadow:0 4px 15px var(--app-shadow-color);text-align:center;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;width:100%;max-width:900px;margin:20px auto;overflow:hidden}@media (max-width: 768px){.App{margin:0;border-radius:0;box-shadow:none;padding:15px}}.App h1{color:var(--primary-color);margin-bottom:25px;font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.App.dark h1{color:var(--primary-color-dark)}.App.dark{background-color:var(--app-bg-color);color:var(--text-color);box-shadow:0 4px 15px var(--app-shadow-color)}.app-header{background-color:var(--header-footer-bg);color:var(--header-footer-text);padding:15px 20px;border-radius:12px 12px 0 0;margin:-20px -20px 20px;box-shadow:0 2px 5px var(--shadow-color)}.app-header.dark{background-color:var(--header-footer-bg);box-shadow:0 2px 5px var(--shadow-color)}.app-header nav ul{list-style:none;padding:0;margin:0;display:flex;justify-content:center;gap:30px}.app-header nav a{color:var(--header-footer-text);text-decoration:none;font-weight:700;padding:8px 15px;border-radius:6px;transition:background-color .3s ease,transform .2s ease}.app-header nav a:hover{background-color:#fff3;transform:translateY(-2px)}.app-footer{background-color:var(--header-footer-bg);color:var(--header-footer-text);padding:15px 20px;border-radius:0 0 12px 12px;margin:auto -20px -20px;box-shadow:0 -2px 5px var(--shadow-color)}.app-footer.dark{background-color:var(--header-footer-bg);box-shadow:0 -2px 5px var(--shadow-color)}.about-page,.contact-page{padding:30px;text-align:left;background-color:var(--page-bg-color);color:var(--text-color);border-radius:10px;box-shadow:0 2px 8px var(--page-shadow-color);margin-bottom:20px;flex-grow:1}.App.dark .about-page,.App.dark .contact-page{background-color:var(--page-bg-color);color:var(--text-color);box-shadow:0 2px 8px var(--page-shadow-color)}.about-page h2,.contact-page h2{color:var(--primary-color);margin-bottom:20px;font-size:2em}.App.dark .about-page h2,.App.dark .contact-page h2{color:var(--primary-color-dark)}.about-page p,.contact-page p{line-height:1.6;margin-bottom:10px}.about-page ul{list-style-type:disc;margin-left:25px;margin-top:15px}.about-page li{margin-bottom:8px}.theme-switch-wrapper{position:absolute;top:20px;right:20px;z-index:1000}.theme-switch{display:inline-block;height:34px;position:relative;width:60px}.theme-switch input{display:none}.slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.slider:before{background-color:#fff;bottom:4px;content:"";height:26px;left:4px;position:absolute;transition:.4s;width:26px}input:checked+.slider{background-color:#66bb6a}input:checked+.slider:before{transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.icon{position:absolute;top:50%;transform:translateY(-50%);font-size:1.2em;transition:opacity .4s ease,transform .4s ease}.sun-icon{left:8px;color:#f39c12;opacity:1}.moon-icon{right:8px;color:#f1c40f;opacity:0}input:checked~.slider .sun-icon{opacity:0;transform:translateY(-38%) translate(-2%)}input:checked~.slider .moon-icon{opacity:1;transform:translateY(-38%) translate(0)}.app-header{background-color:#007bff;color:#fff;padding:15px 20px;border-radius:8px 8px 0 0;margin:-20px -20px 20px}.app-header.dark{background-color:#333}.app-header nav ul{list-style:none;padding:0;margin:0;display:flex;justify-content:center;gap:20px}.app-header nav a{color:#fff;text-decoration:none;font-weight:700;padding:5px 10px;border-radius:4px;transition:background-color .3s ease}.app-header nav a:hover{background-color:#fff3}.app-footer{background-color:#007bff;color:#fff;padding:15px 20px;border-radius:0 0 8px 8px;margin:auto -20px -20px}.app-footer.dark{background-color:#333}.about-page,.contact-page{padding:20px;text-align:left;background-color:#f9f9f9;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:20px}.App.dark .about-page,.App.dark .contact-page{background-color:#444;color:#f0f0f0}.about-page h2,.contact-page h2{color:#007bff;margin-bottom:15px}.App.dark .about-page h2,.App.dark .contact-page h2{color:#88c0f0}.about-page ul{list-style-type:disc;margin-left:20px}.about-page li{margin-bottom:5px}.theme-toggle-button{background-color:#007bff;color:#fff;border:none;padding:10px 15px;border-radius:4px;cursor:pointer;margin-bottom:20px;transition:background-color .3s ease}.theme-toggle-button:hover{background-color:#0056b3}.search-bar{margin-bottom:20px}.search-bar input{padding:10px;border-radius:4px;margin-right:10px;transition:background-color .3s ease,border-color .3s ease,color .3s ease;border:1px solid var(--input-border-color);background-color:var(--input-bg-color);color:var(--input-text-color)}.search-bar button{padding:10px 15px;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease,color .3s ease;background-color:var(--button-bg-color);color:var(--button-text-color)}.search-bar button:hover{background-color:var(--button-hover-bg)}.weather-display{margin-top:20px;padding:25px;border-radius:10px;box-shadow:0 2px 8px var(--shadow-color);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;flex-grow:1;background-color:var(--secondary-bg-color);border:1px solid var(--border-color)}.weather-display h2{font-size:2em;margin-bottom:15px;color:var(--primary-color)}.weather-display .description{font-size:1.1em;margin-bottom:20px;color:var(--text-color)}.weather-info p{margin:12px 0;font-size:1.05em;color:var(--text-color)}.weather-info svg{font-size:1.3em;color:var(--icon-color)}.weather-icon{font-size:1.8em;color:var(--icon-color)}.city-map{margin-top:25px;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);width:100%;max-width:100%;height:450px;transition:box-shadow .3s ease}.App-content{padding:20px;display:grid;grid-template-columns:1fr;gap:20px;max-width:1200px;margin:0 auto}.about-page,.contact-page{background-color:var(--background-color-secondary);padding:30px;border-radius:10px;box-shadow:0 4px 8px #0000001a;color:var(--text-color)}.about-page h2,.contact-page h2{color:var(--primary-color);margin-bottom:20px;text-align:center}.about-page h3{color:var(--primary-color);margin-top:20px;margin-bottom:10px}.about-page ul{list-style:none;padding:0}.about-page ul li{display:flex;align-items:center;margin-bottom:10px;font-size:1.1em}.about-page ul li svg{margin-right:10px;color:var(--primary-color);font-size:1.3em}.contact-info p{display:flex;align-items:center;margin-bottom:10px;font-size:1.1em}.contact-info p svg{margin-right:10px;color:var(--primary-color);font-size:1.3em}@media (min-width: 768px){.App-content{grid-template-columns:repeat(auto-fit,minmax(450px,1fr));justify-content:center}}@media (min-width: 1200px){.App-content{grid-template-columns:repeat(auto-fit,minmax(500px,1fr))}}.not-found{text-align:center;padding:50px;color:#f44336;display:flex;justify-content:center;align-items:center;flex-direction:column;font-size:1.5em;background-color:var(--secondary-bg-color);border-radius:10px}