@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";@import"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap";*{box-sizing:border-box;margin:0;padding:0}html{font-size:18px}body{font-family:DM Sans,sans-serif;font-size:1rem;min-height:100vh;background:var(--neutral-900);color:var(--neutral-0)}#root{max-width:1310px;margin:0 auto;padding:1rem}:root{--bricolage: "Bricolage Grotesque", sans-serif;--neutral-900: hsl(243, 96%, 9%);--neutral-800: hsl(243, 27%, 20%);--neutral-700: hsl(243, 23%, 24%);--neutral-600: hsl(243, 23%, 30%);--neutral-300: hsl(240, 6%, 70%);--neutral-200: hsl(250, 6%, 84%);--neutral-0: hsl(0, 0%, 100%);--orange-500: hsl(28, 100%, 52%);--blue-500: hsl(233, 67%, 56%);--blue-700: hsl(248, 70%, 36%)}img{max-width:100%;object-fit:cover}a,input,button{font-size:inherit;color:inherit}li{list-style-type:none}p,span{font-size:clamp(.875rem,2vw,1rem)}nav{display:flex;align-items:center;justify-content:space-between}@media (max-width: 768px){nav .nav-logo img{width:8rem;height:auto}}nav .dropdown{position:relative}nav .dropdown .units{display:flex;align-items:center;cursor:pointer;gap:.3rem;padding:.5rem 1rem;background-color:var(--neutral-800);border-radius:8px}nav .dropdown .dropdown__menu{position:absolute;text-align:start;top:110%;right:0;padding:.5rem;background-color:var(--neutral-800);border-radius:8px;min-width:300px;transition:all .3s ease;visibility:hidden;opacity:0;transform-origin:top right;transform:scale(.8);z-index:9999}nav .dropdown .dropdown__menu.show{visibility:visible;opacity:1;transform:scale(1)}nav .dropdown .dropdown__menu h3{font-size:1rem;padding:.5rem;border:1px solid var(--neutral-0);border-radius:8px}nav .dropdown .dropdown__menu .main-list>li{padding-bottom:1rem;border-bottom:1px solid var(--neutral-600)}nav .dropdown .dropdown__menu .main-list>li:last-child{padding:0;border:none}nav .dropdown .dropdown__menu .main-list>li .title{font-size:.875rem;padding:.5rem}nav .dropdown .dropdown__menu .main-list>li .sub-list>li{display:flex;align-items:center;justify-content:space-between;padding:.5rem;font-size:.75rem;cursor:pointer;transition:all .2s ease;border-radius:8px}nav .dropdown .dropdown__menu .main-list>li .sub-list>li.active{background-color:var(--neutral-700)}.search{margin:5rem auto;text-align:center;position:relative;width:fit-content}.search h2{font-size:2.8rem;margin-bottom:2rem}.search form{display:flex;align-items:center;justify-content:center;gap:1rem}.search form .input-box{position:relative}.search form .input-box input{min-width:520px;width:100%;padding:.825rem 3rem;border-radius:10px;background-color:var(--neutral-800);border:none;outline:none}.search form .input-box img{position:absolute;top:45%;left:1rem;transform:translateY(-50%)}.search form button{padding:.825rem 2rem;border-radius:10px;border:none;background-color:var(--blue-500);cursor:pointer}.search .search-dropdown{position:absolute;top:105%;left:0;min-width:520px;background-color:var(--neutral-800);border-radius:10px;z-index:999;padding:.5rem;visibility:hidden;opacity:0;transform:translateY(-1rem);transition:all .3s ease;transform-origin:top}.search .search-dropdown.show{visibility:visible;opacity:1;transform:translateY(0)}.search .search-dropdown li{text-align:start;padding:.5rem;border-radius:10px;cursor:pointer}.search .search-dropdown li:hover{background-color:var(--neutral-700)}.search .search-dropdown li a{text-decoration:none}@media (max-width: 768px){.search{margin:2rem 0;width:auto}.search form{flex-direction:column}.search form .input-box{width:100%}.search form .input-box input{min-width:auto}.search form button{width:100%}.search .search-dropdown{min-width:100%;top:80%}}.city-weather{display:grid;grid-template-columns:4fr 2fr;gap:2rem}.city-weather .city-weather__left .city-name{position:relative}.city-weather .city-weather__left .city-name .loading-img{display:flex;align-items:center;justify-content:center;min-height:286px;background-color:var(--neutral-800);border-radius:20px}.city-weather .city-weather__left .city-name .loading-img img{width:2rem;height:auto}.city-weather .city-weather__left .city-name .city-bg-image{max-width:100%}.city-weather .city-weather__left .city-name .city-bg-image img{display:block;width:100%;height:100%}.city-weather .city-weather__left .city-name .city-name__body{display:flex;justify-content:space-between;align-items:center;padding:0 2rem;position:absolute;inset:0;z-index:99}.city-weather .city-weather__left .city-name .city-name__body .body-left .place{font-weight:700;font-size:1.5rem;margin-bottom:.5rem}.city-weather .city-weather__left .city-name .city-name__body .body-left .date{color:var(--neutral-300)}.city-weather .city-weather__left .city-name .city-name__body .body-right{display:flex;align-items:center}.city-weather .city-weather__left .city-name .city-name__body .body-right img{width:5rem;height:auto}.city-weather .city-weather__left .city-name .city-name__body .body-right span{font-size:4rem;font-weight:700}.city-weather .city-weather__left .weather__details{margin-top:1.5rem}.city-weather .city-weather__left .weather__details ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.city-weather .city-weather__left .weather__details ul li{background-color:var(--neutral-800);border-radius:10px;padding:1rem;min-height:6.3rem}.city-weather .city-weather__left .weather__details ul li>div h4{margin-bottom:1rem}.city-weather .city-weather__left .weather__details ul li>div p{font-size:1.5rem}.city-weather .city-weather__left .daily-forecast{margin-top:2rem}.city-weather .city-weather__left .daily-forecast h3{margin-bottom:1rem}.city-weather .city-weather__left .daily-forecast .daily-forecast-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1rem;text-align:center}.city-weather .city-weather__left .daily-forecast .daily-forecast-list li{padding:.75rem .5rem;min-height:8.5rem;min-width:5.5rem;border-radius:10px;background-color:var(--neutral-800)}.city-weather .city-weather__left .daily-forecast .daily-forecast-list li img{width:4rem;height:auto}.city-weather .city-weather__left .daily-forecast .daily-forecast-list li .day-night{display:flex;justify-content:space-between}.city-weather .city-weather__right{padding:1.5rem;background-color:var(--neutral-800);border-radius:20px}.city-weather .city-weather__right .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.city-weather .city-weather__right .header .hourly-dropdown{display:flex;align-items:center;gap:.5rem;position:relative}.city-weather .city-weather__right .header .hourly-dropdown .hourly-chosen{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem;background-color:var(--neutral-700);border-radius:8px;cursor:pointer}.city-weather .city-weather__right .header .hourly-dropdown .hourly-dropdown-menu{position:absolute;top:110%;right:0;background-color:var(--neutral-800);border:2px solid var(--neutral-700);border-radius:8px;min-width:10rem;visibility:hidden;opacity:0;transition:all .3s ease;transform-origin:left top}.city-weather .city-weather__right .header .hourly-dropdown .hourly-dropdown-menu.show{visibility:visible;opacity:1}.city-weather .city-weather__right .header .hourly-dropdown .hourly-dropdown-menu li{padding:.5rem;cursor:pointer}.city-weather .city-weather__right .header .hourly-dropdown .hourly-dropdown-menu li:hover{background-color:var(--neutral-700)}.city-weather .city-weather__right .hourly-temp li{display:flex;justify-content:space-between;align-items:center;margin-bottom:.74rem;padding:.6rem .75rem;border-radius:8px;background-color:var(--neutral-700);min-height:3.2rem}.city-weather .city-weather__right .hourly-temp li:last-child{margin-bottom:0}.city-weather .city-weather__right .hourly-temp li .hour-left{display:flex;align-items:center;gap:.5rem}.city-weather .city-weather__right .hourly-temp li .hour-left img{display:block;width:2rem;height:auto}.city-weather .city-weather__right .hourly-temp li .hour-temp span{font-size:.825rem}@media (max-width: 768px){.city-weather .city-weather__left .city-name .city-name__body{flex-direction:column;justify-content:center;gap:1rem;top:0;left:0;text-align:center}.city-weather .city-weather__left .weather__details ul{grid-template-columns:repeat(2,1fr)}}@media (max-width: 1300px){.city-weather{grid-template-columns:1fr}}