*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif}.App{overflow-x:hidden;background-color:#010133;min-height:100vh;padding:20px}.aside-input{border:none;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.text-input{justify-content:center;align-items:center;width:120px;border-radius:5px;border:none;outline:none;text-align:center;color:#fff;background-color:#81818133;padding:8px}.text-input option{background-color:#302e2e}.aside-h2{text-align:justify;color:#fff;font-size:18px;font-weight:400;font-family:Times New Roman,Times,serif}.aside-time{display:flex;align-items:center;gap:10px}.asidebar-bg{background-color:#81818133;padding:20px;color:#fff;border-radius:10px;width:30rem;height:fit-content}.aside-condition{text-align:center;display:flex;border-radius:5px;padding:15px;font-size:14px;font-family:Times New Roman,Times,serif;background-color:#99919133;justify-content:space-between;align-items:center;margin-bottom:15px}.aside-condition .aside-img{width:40px;height:40px}.header-div{display:flex;justify-content:space-between;align-items:center;padding:20px;margin-bottom:20px}.logo img{height:40px}.select-div{display:flex;justify-content:center;align-items:center;padding:5px 15px;gap:10px;background-color:#99919133;border-radius:5px}.custom-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:8px;border:none;border-radius:5px;font-size:1em;color:#fff;background-color:transparent;cursor:pointer}.custom-select option{background-color:#302e2e}.custom-select:focus{outline:none}.select-div img{width:16px;height:16px}.search-div{justify-content:center;align-items:center;padding:20px;text-align:center;margin-bottom:30px}.search-container{display:flex;justify-content:center;align-items:center;gap:10px}.search-div input{padding:12px;border:none;width:300px;font-size:1em;background-color:transparent;color:#fff}.search-div input::placeholder{color:#ffffffb3}.search-div input:focus{outline:none}.search-btn{display:flex;align-items:center;gap:10px;padding:12px;border-radius:5px;border:none;font-size:1em;background-color:#99919133;color:#fff}.search-div h1{color:#fff;margin-bottom:20px;font-size:2em;font-weight:400}.search-btn img{width:20px;height:20px}.search-div button{padding:12px 24px;border-radius:5px;border:none;background-color:#006;color:#fff;font-size:1em;cursor:pointer;transition:background-color .3s}.search-div button:hover{background-color:#000096}.search-div button:disabled{background-color:#00006680;cursor:not-allowed}.main-container{display:flex;gap:30px;margin-bottom:20px}.displaypage-container{flex:1}.display-div{display:grid;gap:20px;grid-template-columns:repeat(4,1fr);margin-bottom:30px}.bg-image{background-image:url(/images/bg-today-large.svg);background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:10px;height:300px;margin-bottom:30px;position:relative}.condition-div{background-color:#99919133;border-radius:10px;padding:20px;text-align:center;color:#fff;font-family:Times New Roman,Times,serif}.condition-div h1{font-size:2em;margin-bottom:5px}.condition-div h3{font-size:1em;opacity:.8}.bg-image-flex{display:flex;justify-content:space-between;padding:30px;align-items:flex-start}.bg-image-text{display:flex;align-items:center;gap:15px}.weather-description{color:#fff;text-align:center;text-transform:capitalize;font-size:1.2em;margin-top:-30px;padding-bottom:20px}.asidebar-container{display:flex;justify-content:center;gap:40px}.bg-image-icon{width:80px;height:80px}.h3-text{font-size:4em;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:400}.h3-text sup{font-size:.5em;vertical-align:super}.h1-text{color:#fff;font-size:2em;font-family:Arial,Helvetica,sans-serif;margin-bottom:10px}.p-text{color:#fff;font-size:1em;font-family:Arial,Helvetica,sans-serif;opacity:.8}.daily-div{display:grid;grid-template-columns:repeat(7,1fr);gap:15px}.daily-img{width:40px;height:40px;margin:10px 0}.daily-degree{display:flex;gap:15px;font-size:14px;justify-content:center;align-items:center}.daily-forecast{background-color:#99919133;border-radius:10px;padding:15px 10px;text-align:center;color:#fff;font-size:14px;margin-bottom:20px;font-family:Times New Roman,Times,serif}.loading{color:#fff;text-align:center;padding:40px;font-size:1.2em}.error-message{background-color:#f003;color:#ff6b6b;padding:15px;border-radius:5px;text-align:center;margin:20px;border:1px solid rgba(255,0,0,.3)}.no-data{color:#fff;text-align:center;padding:40px;font-size:1.2em;opacity:.7}@media (max-width: 1200px){.main-container{flex-direction:column}.asidebar-bg,.aside-condition{width:100%}}@media (max-width: 1024px){.display-div{grid-template-columns:repeat(2,1fr)}.daily-div{grid-template-columns:repeat(4,1fr)}}@media (max-width: 768px){.header-div{flex-direction:column;gap:20px}.search-container{flex-direction:column;width:100%}.search-btn{width:100%;justify-content:flex-start}.search-div input{width:100%}.search-div button{width:100%;margin-left:0;margin-top:10px}.bg-image-flex{flex-direction:column;text-align:center;gap:20px}.bg-image-text{justify-content:center}.display-div{grid-template-columns:1fr}.daily-div{grid-template-columns:repeat(2,1fr)}.main-container{margin:10px;gap:20px}}@media (max-width: 480px){.App{padding:10px}.search-div h1{font-size:1.5em}.daily-div{grid-template-columns:1fr}.bg-image{height:250px}.h3-text{font-size:3em}.h1-text{font-size:1.5em}}