@import"https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=M+PLUS+Rounded+1c&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Overpass:ital,wght@0,100..900;1,100..900&family=PT+Mono&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";body{background-color:#080d14;color:#fff;font-family:Josefin Sans,sans-serif;margin:0;padding:0}.left-side-conatiner{position:relative;top:0}.App{margin:0 auto;padding:10px;display:flex;flex-direction:column}.sidebar{position:fixed;top:0;left:0;height:100%;width:80px;background-color:#212c3c;display:flex;flex-direction:column;align-items:center;padding-top:20px;transition:all .3s ease}.sidebar p{margin:20px 0;cursor:pointer;color:#fff}.sidebar p:hover{color:#0af}.sidebar p i{font-size:24px}.sidebar .active{color:#0af}.loading{display:flex;justify-content:center;align-items:center;height:100vh}.spinner{border:4px solid rgba(0,0,0,.1);border-left-color:#3c47e9;border-radius:50%;width:36px;height:36px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.content{margin-left:90px;padding:10px;width:calc(100% - 90px)}@media (max-width: 768px){.sidebar{width:60px}.sidebar p{margin:15px 0}.sidebar p i{font-size:20px}.content{margin-left:70px;width:calc(100% - 70px)}}@media (max-width: 480px){.sidebar{width:50px}.sidebar p{margin:10px 0}.sidebar p i{font-size:18px}.content{margin-left:60px;width:calc(100% - 60px)}}.search{margin-bottom:20px;position:relative}.search input{padding:13px;margin-top:20px;background-color:#212c3c;border-radius:5px;border:none;outline:none;width:100%;color:#f0f8ff}.search-button{background-color:transparent;border:none;font-size:20px;position:relative;color:#0f151d;right:40px;top:2px}.suggestions-list{list-style:none;padding:0;margin:0;position:absolute;width:62%;background:#fff;color:#000;border:1px solid #ccc;border-radius:0 0 5px 5px;max-height:150px;overflow-y:auto;z-index:1000}.suggestions-list li{padding:10px;cursor:pointer}.suggestions-list li:hover{background-color:#f0f0f0}@media (min-width: 768px){.search input{width:60%}.search-button{right:0;top:0;margin-left:-40px}}.weather-container{display:flex;align-items:center;justify-content:space-between;width:700px}.current-weather-name{font-size:39px;padding:10px 0 0;margin:0}.current-weather-desc{margin:0;font-size:14px;color:#6a6a6a}.current-weather-degree{font-size:40px}.weather-image{width:200px}.forecast{width:300px;justify-content:space-between;background-color:#212c3c;margin-right:50px;border-radius:10px;padding:20px;overflow-x:auto}.forecast-heading{color:#6a6a6a}.icon{display:flex;align-items:center}.forecast-day-list{display:flex;align-items:center;justify-content:space-around;padding:10px 0}.forecast-day{color:#d3d3d3}.forecast-item{text-align:center}.forecast-hourly-container{background-color:#212c3c;border-radius:10px;padding:20px;margin-top:15px}.forecast-hourly{display:flex;justify-content:space-between;align-items:center}.weather-main-container{display:flex;justify-content:space-between;flex-wrap:wrap}.forecast-item p{margin:5px 0}.forecast-degree{color:#d3d3d3}.icon img{width:50px;height:50px}@media (max-width: 1200px){.App{margin-left:5%}.weather-container{width:600px}.current-weather-name{font-size:32px}.current-weather-degree{font-size:35px}.weather-image{width:180px}.forecast{margin-top:20px;width:260px}}@media (max-width: 768px){.App{margin-left:0}.weather-container{width:100%;flex-direction:column;align-items:flex-start}.current-weather-name{font-size:28px}.current-weather-degree{font-size:30px}.weather-image{width:150px}.forecast{margin-top:20px;width:200px}}@media (max-width: 480px){.current-weather-name{font-size:24px}.current-weather-degree{font-size:26px}.weather-image{width:120px}.forecast{padding:10px;width:90%;justify-content:center}.forecast-day-list{flex-direction:column;align-items:flex-start}.forecast-day,.forecast-degree{font-size:14px}.icon img{width:40px;height:40px}}.favorites{padding:20px;color:#d3d3d3;background-color:#212c3c;border-radius:10px;width:80%;margin:20px auto}.favorites input{width:calc(100% - 90px);padding:10px;margin-right:10px;border:none;border-radius:5px}.favorites button{padding:10px;background-color:#0af;border:none;border-radius:5px;color:#fff;cursor:pointer}.favorites button:hover{background-color:#007acc}.favorite-item{display:flex;justify-content:space-between;align-items:center;background-color:#1a1a1a;padding:10px;margin:10px 0;border-radius:5px}.favorite-item p{margin:0}.favorite-item button{background-color:transparent;border:none;color:#f66;cursor:pointer}.favorite-item button:hover{color:#f33}.favorite-info{display:flex;align-items:center}.favorite-info img{width:50px;height:50px;margin-right:10px}.fav-degree{margin-left:30px}