#main{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem;position:relative}#search{max-width:800px;width:100%;margin:0 auto 1rem;display:flex;gap:.5rem;padding:0 1rem;z-index:2}#search input{flex:1;padding:.75rem 1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .3s ease}#search input:focus{outline:none;border-color:#1e90ff}#search button{padding:.75rem 1rem;background-color:#ff4757;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s ease}#search button:hover{background-color:#ff6b81}#dropdown{max-width:800px;width:100%;margin:0 auto;padding:0 1rem;position:absolute;top:4rem;z-index:3;background-color:#fff;box-shadow:0 4px 8px #0000001a;border-radius:8px;gap:1rem}.suggestedCity{width:100%;padding:.75rem 1rem;background-color:#fff;border-bottom:1px solid #e0e0e0;border-radius:10px;cursor:pointer;text-align:left;transition:background-color .3s ease}.suggestedCity:hover{background-color:#f5f5f5}#weatherComponent{display:flex;flex-direction:row;gap:3rem;margin-top:2rem}@media (max-width: 480px){#search input,#search button,.suggestedCity{padding:.5rem .75rem;font-size:.9rem}#dropdown{top:3rem}}#mainDiv{display:flex;flex-direction:column;align-items:center;padding:20px;background-color:#f0f8ff;border-radius:10px;box-shadow:0 4px 8px #0000001a;max-width:600px;margin:auto}#locationDetails{text-align:center;margin-bottom:20px}#locationDetails h2{font-size:24px;font-weight:700;color:#333}#locationDetails h3{font-size:18px;color:#555}#locationDetails img{width:100px;height:auto;margin-top:10px}#weatherDetails{display:flex;flex-direction:column;gap:10px;width:100%;justify-content:center;text-align:center}#weatherDetails h3{font-size:16px;color:#333;margin:0;padding:5px 0}h2{font-size:20px;color:#555;margin-top:30px}#forecastDetails{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-evenly;padding:20px;max-width:1200px;margin:0 auto}.forecastDay{background-color:#e6f7ff;border:1px solid #b3d9ff;border-radius:10px;padding:15px;text-align:center;box-shadow:0 4px 8px #0000001a;width:250px;flex:1 1 250px;margin-bottom:20px}.forecastDay h3{font-size:16px;color:#333;margin:8px 0}.forecastDay img{width:80px;height:auto;margin:10px 0}h2{text-align:center;color:#333;margin-bottom:20px}#hourlyForecastDetails{display:flex;overflow-x:auto;gap:10px;padding:10px;scroll-behavior:smooth;width:100%;max-width:1200px}.hour{flex:0 0 12%;background-color:#f7faff;border:1px solid #cce7ff;border-radius:10px;padding:10px;text-align:center;box-shadow:0 4px 8px #0000001a;margin-bottom:10px;transition:transform .2s}.hour:hover{transform:scale(1.05)}h2{text-align:center;color:#333;margin-bottom:15px}#hourlyForecastDetails::-webkit-scrollbar{height:8px}#hourlyForecastDetails::-webkit-scrollbar-thumb{background-color:#cce7ff;border-radius:10px}#titlecomponent{text-align:center;padding:2rem 1rem;background:linear-gradient(135deg,#1e90ff,#00bfff);color:#fff;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a}#titlecomponent h1{margin:0;font-size:2.5rem;font-weight:700}@media (max-width: 768px){#titlecomponent h1{font-size:2rem}}@media (max-width: 480px){#titlecomponent{padding:1.5rem 1rem}#titlecomponent h1{font-size:1.75rem}}