*{margin:0;padding:0;box-sizing:border-box}:root{--neutral-900: #02012C;--neutral-800: #262540;--neutral-700: #302F4A;--neutral-600: #3C3B5E;--neutral-500: #ACACB7;--neutral-200: #D4D3D9;--neutral-0: #FFFFFF;--orange-500: #FF820A;--blue-500: #4658D9;--blue-700: #2B1B9C}@font-face{font-family:Bricolage-Grotesque;src:url(/assets/BricolageGrotesque-Bold-C2jlrK5H.ttf)}@font-face{font-family:DMSans-Bold;src:url(/assets/DMSans-Bold-YaffUiOa.ttf)}@font-face{font-family:DMSans-Light;src:url(/assets/DMSans-Light-ChpXioKr.ttf)}@font-face{font-family:DMSans-Medium;src:url(/assets/DMSans-Medium-DAepoDOk.ttf)}@font-face{font-family:DMSans-SemiBold;src:url(/assets/DMSans-SemiBold-nZ-L2Rm7.ttf)}@font-face{font-family:DMSans-SemiBoldItalic;src:url(/assets/DMSans-SemiBoldItalic-BOHRATwS.ttf)}body{width:100%;height:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;background-color:var(--neutral-900);font-family:sans-serif;margin-bottom:28px}#root{width:90%;max-width:1540px;display:flex;flex-direction:column;align-items:center;flex:1}button{cursor:pointer}button:hover{opacity:.8}.hidden{visibility:hidden}li{list-style:none}.selected-imperial{background-color:var(--neutral-700)}.selected-imperial img{visibility:visible}.selected-city{background-color:var(--neutral-700);border-radius:8px;border:1px solid var(--neutral-600)}.selected-day #hourly div ul li{background-color:var(--neutral-700)}.display-none{display:none}.bg-blur{background-color:#262540e7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (min-width: 786px){#root{width:80%}}#signature{color:var(--neutral-600);font-size:18px;position:static;margin-top:28px}#signature a{text-decoration:none;color:var(--neutral-0)}#signature a:hover{text-decoration:underline}#desktoping{width:100%}@media (min-width: 1440px){#desktoping{display:flex;gap:32px}#desktoping #desktoping-left{width:100%}}#daily{width:100%;color:var(--neutral-0);margin-bottom:32px}#daily h1{font-size:18px;font-family:DMSans-Medium,sans-serif;margin-bottom:20px}#daily #days{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:16px}#daily #days article{width:100%;padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:16px;background-color:var(--neutral-800);border-radius:12px;border:1px solid var(--neutral-600);font-family:DMSans-Medium,sans-serif}#daily #days article p{font-size:18px;color:var(--neutral-0)}#daily #days article img{width:60px;height:60px}#daily #days article div{width:100%;display:flex;justify-content:space-between;font-size:16px}#daily #days article div span:nth-child(2){color:var(--neutral-200)}@media (min-width: 768px){#daily #days{grid-template-columns:repeat(7,1fr);grid-template-rows:none}}.banner{width:100%;height:286px;padding:auto 24px;background:url(/images/bg-today-small.svg) no-repeat center / cover;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;border-radius:20px;margin-bottom:20px}.banner .banner-top{text-align:center;color:var(--neutral-0)}.banner .banner-top h5{margin-bottom:12px;font-size:24px;font-family:DMSans-Bold,sans-serif}.banner .banner-top span{font-size:14px;opacity:.8;font-family:DMSans-Medium,sans-serif}.banner .banner-bottom{display:flex;justify-content:space-around;align-items:center}.banner .banner-bottom img{width:120px}.banner .banner-bottom span{font-size:92px;font-family:DMSans-SemiBoldItalic;color:var(--neutral-0)}#weather_details{width:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;margin-bottom:32px}#weather_details article{padding:20px;border-radius:12px;border:1px solid var(--neutral-600);background-color:var(--neutral-800)}#weather_details article h3{font-size:16px;font-weight:500;margin-bottom:24px;font-family:DMSans-Medium,sans-serif;color:var(--neutral-200)}#weather_details article p{font-family:DMSans-Light,sans-serif;color:var(--neutral-0);font-size:28px}#weather_details article p span{margin-left:6px}@media (min-width: 768px){.banner{flex-direction:row;justify-content:space-between;padding:0 24px;background-image:url(/images/bg-today-large.svg)}.banner .banner-top{text-align:left}.banner .banner-top h5{font-size:32px}.banner .banner-top span{font-size:20px}.banner .banner-bottom span{font-size:100px}#weather_details{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:none}}@media (min-width: 1440px){.banner{margin-bottom:30px}#weather_details{gap:24px}}header{width:100%;display:flex;justify-content:space-between;margin-top:16px;margin-bottom:48px}header .logo{width:140px}header div{position:relative;font-family:DMSans-Medium,sans-serif;color:var(--neutral-0)}header div button{width:90px;height:34px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;border-radius:8px;border:0px;color:var(--neutral-0);background-color:var(--neutral-800)}header div #menu-units{width:212px;position:absolute;right:0;top:44px;border-radius:12px;padding:16px;background-color:var(--neutral-800);z-index:999;margin-top:10px;border:1px solid var(--neutral-600)}header div #menu-units h4{font-weight:300;margin-bottom:8px;padding:0 8px}header div #menu-units ul{border-bottom:1px solid var(--neutral-600);padding:14px 0}header div #menu-units ul label{color:var(--neutral-500);font-size:14px;padding:10px 8px;border-radius:8px}header div #menu-units ul li{display:flex;justify-content:space-between;padding:10px 8px;border-radius:8px}header div #menu-units ul li:hover{background-color:var(--neutral-700);cursor:pointer}header div #menu-units ul:last-child{border:none}@media (min-width: 768px){header{margin-top:30px}header .logo{width:210px}header div button{width:120px;height:44px;font-size:18px;justify-content:space-around}}.hero{width:100%;display:flex;flex-direction:column;align-items:center;gap:48px;margin-bottom:32px}.hero h1{width:80%;font-family:Bricolage-Grotesque,sans-serif;text-align:center;color:var(--neutral-0);font-size:44px;letter-spacing:1px}.hero .search-bar{width:100%;display:flex;flex-direction:column;gap:12px}.hero .search-bar div{position:relative}.hero .search-bar div #search{width:100%;height:56px;display:flex;justify-content:space-between;gap:16px;padding:0 24px;background-color:var(--neutral-800);border-radius:12px}.hero .search-bar div #search img{width:20px}.hero .search-bar div #search input{width:100%;height:100%;background-color:var(--neutral-800);border:none;outline:none;color:var(--neutral-200);font-family:DMSans-Medium,sans-serif;letter-spacing:1px;font-size:16px}.hero .search-bar div ul{position:absolute;width:100%;border-radius:12px;padding:8px;top:66px;color:var(--neutral-0);font-family:DMSans-Medium,sans-serif;z-index:999;border:1px solid var(--neutral-600)}.hero .search-bar div ul li{width:100%;padding:10px 8px;border:1px solid #ffffff00;display:flex;align-items:center;gap:10px}.hero .search-bar div ul .selectable:hover{background-color:var(--neutral-700);border-radius:8px;border:1px solid var(--neutral-600)}.hero .search-bar button{width:100%;height:56px;background-color:var(--blue-500);border:0px;border-radius:12px;color:var(--neutral-0);font-family:DMSans-Medium,sans-serif;font-size:16px;letter-spacing:1px}@media (min-width: 768px){.hero h1{max-width:482px}.hero .search-bar{flex-direction:row}.hero .search-bar div{width:100%}.hero .search-bar button{max-width:114px}}@media (min-width: 1440px){.hero h1{max-width:100%}.hero .search-bar{max-width:656px}}#hourly{width:100%;padding:20px 0 20px 16px;border-radius:20px;background-color:var(--neutral-800);color:var(--neutral-0)}#hourly header{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-right:16px}#hourly header h1{font-size:18px;font-family:DMSans-Semibold}#hourly header div{position:relative}#hourly header div button{width:150px;display:flex;align-items:center;gap:12px;padding:8px 16px;background-color:var(--neutral-600);font-size:16px;justify-content:space-between;border-radius:8px;border:0px;color:var(--neutral-0)}#hourly header div ul{position:absolute;width:212px;height:auto;right:0;top:54px;background-color:var(--neutral-800);padding:8px;border:1px solid var(--neutral-600);border-radius:12px;gap:4px;font-family:DMSans-Medium,sans-serif}#hourly header div ul li{border:0px;background-color:var(--neutral-800)}#hourly header div ul li:hover{background-color:var(--neutral-600);cursor:pointer}#hourly ul{width:100%;height:584px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding-right:12px}#hourly ul li{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--neutral-700);border-radius:8px;border:1px solid var(--neutral-600);font-family:DMSans-Medium,sans-serif}#hourly ul li img{width:40px}#hourly ul li time{width:100%;font-size:18px}#hourly ul li span{display:flex;justify-content:end;width:100%;font-size:16px}#hourly ul::-webkit-scrollbar{width:4px}#hourly ul::-webkit-scrollbar-track{background:inherit;border-radius:10px}#hourly ul::-webkit-scrollbar-thumb{border:1px solid var(--neutral-600);background:var(--neutral-700);border-radius:10px}@media (min-width: 768px){#hourly header{margin-top:0}}@media (min-width: 1440px){#hourly{width:566px;height:100%}}#skeleton{width:100%;display:flex;flex-direction:column;color:var(--neutral-0);font-family:DMSans-SemiBold}#skeleton #skeleton-left{margin-bottom:32px}#skeleton #skeleton-left section{width:100%;height:286px;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--neutral-800);border-radius:20px;margin-bottom:20px}#skeleton #skeleton-left section div{display:flex;flex-direction:column;align-items:center;gap:16px;letter-spacing:1px}#skeleton #skeleton-left section div img{width:56px}#skeleton #skeleton-left #summarizes{width:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;margin-bottom:32px}#skeleton #skeleton-left #summarizes li{width:100%;height:100%;background-color:var(--neutral-800);border-radius:12px;padding:20px;border:1px solid var(--neutral-600)}#skeleton #skeleton-left #summarizes li h6{margin-bottom:24px;font-size:16px}#skeleton #skeleton-left article{width:100%}#skeleton #skeleton-left article h4{font-size:20px;margin-bottom:20px}#skeleton #skeleton-left article ul{width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:16px}#skeleton #skeleton-left article ul li{width:100%;height:165px;background-color:var(--neutral-800);border-radius:12px;border:1px solid var(--neutral-600)}#skeleton #skeleton-right{width:100%;background-color:var(--neutral-800);border-radius:20px;padding:0 16px;height:656px}#skeleton #skeleton-right header{width:100%;display:flex;justify-content:space-between;align-items:center}#skeleton #skeleton-right header h4{font-size:20px}#skeleton #skeleton-right header button{width:68px;height:36px;display:flex;justify-content:center;align-items:center;gap:12px;background-color:var(--neutral-600);border:0px;border-radius:8px;color:var(--neutral-0);font-weight:900}#skeleton #skeleton-right ul{width:100%;display:flex;flex-direction:column;gap:16px}#skeleton #skeleton-right ul li{width:100%;height:60px;background-color:var(--neutral-700);border:1px solid var(--neutral-600);border-radius:8px}@media (min-width: 768px){#skeleton #skeleton-left #summarizes{grid-template-columns:repeat(4,1fr);grid-template-rows:none}#skeleton #skeleton-left article ul{grid-template-columns:repeat(7,1fr);grid-template-rows:none}}@media (min-width: 1440px){#skeleton{flex-direction:row;gap:32px}#skeleton #skeleton-left{width:100%}#skeleton #skeleton-right{max-width:384px}}#nodata{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:start;font-family:DMSans-Bold;color:var(--neutral-0);flex:1;margin-top:0}#nodata h2{font-size:40px;text-align:center}@media (min-width: 400px){#nodata{margin-top:40px}}#error{width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:24px;color:var(--neutral-0)}#error img{width:42px}#error h6{font-family:Bricolage-Grotesque,sans-serif;font-size:48px}#error p{max-width:460px;text-align:center;font-family:DMSans-Medium,sans-serif;color:var(--neutral-200);font-size:16px}#error a{width:100px;height:44px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--neutral-0);text-decoration:none;border-radius:8px;font-family:DMSans-Medium,sans-serif;background-color:var(--neutral-800)}#error a img{width:16px}