:root{--neutral900: hsl(243, 96%, 9%);--neutral800: hsl(243, 27%, 20%);--neutral700: hsl(243, 23%, 24%);--neutral600: hsl(243, 23%, 30%);--neutral300: hsl(240, 6%, 70%);--neutral200: hsl(250, 6%, 84%);--neutral0: hsl(0, 0%, 100%);--orange500: hsl(28, 100%, 52%);--blue500: hsl(233, 67%, 56%);--blue700: hsl(248, 70%, 36%)}.bricolage-grotesque{font-family:Bricolage Grotesque,sans-serif;font-optical-sizing:auto;font-weight:700;font-style:normal;font-variation-settings:"wdth" 100}.dm-sans{font-family:DM Sans,sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal}.textPreset1{font-family:DM Sans,sans-serif;font-size:96px;line-height:100%;font-style:italic;letter-spacing:-2px}.textPreset2{font-family:Bricolage Grotesque,sans-serif;font-size:52px;font-weight:700;line-height:120%;letter-spacing:0}.textPreset3{font-family:DM Sans,sans-serif;font-size:32px;font-weight:300;line-height:100%;letter-spacing:0;color:var(--neutral0)}.textPreset4{font-family:DM Sans,sans-serif;font-size:28px;font-weight:700;line-height:120%;letter-spacing:0;color:var(--neutral0)}.textPreset5{font-family:DM Sans,sans-serif;font-size:20px;font-weight:500;line-height:120%;letter-spacing:0;color:var(--neutral200)}.textPreset6{font-family:DM Sans,sans-serif;font-size:18px;font-weight:500;line-height:120%;letter-spacing:0}.textPreset7{font-family:DM Sans,sans-serif;font-size:16px;font-weight:500;line-height:120%;letter-spacing:0}.textPreset8{font-family:DM Sans,sans-serif;font-size:14px;font-weight:500;line-height:120%;letter-spacing:0}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--neutral900);color:var(--neutral0);font-size:18px;padding:16px 16px 48px;line-height:120%;letter-spacing:0;display:flex;flex-direction:column;align-items:center;gap:48px;min-height:100vh}header{width:100%;max-width:343px;display:flex;flex-direction:column;align-items:center;gap:24px}main{width:100%;max-width:343px;display:flex;flex-direction:column;gap:32px}form{width:100%}.logoUtilityBanner{width:100%;gap:16px}.logoUtilityBanner{display:flex;justify-content:space-between;align-items:center;align-self:stretch}h1{font-family:Bricolage Grotesque,sans-serif;font-optical-sizing:auto;font-weight:700;font-style:normal;font-size:52px;line-height:120%;letter-spacing:0;text-align:center;margin-bottom:64px;margin-top:64px}.searchbar{display:flex;align-items:stretch;justify-content:center;flex-direction:column;gap:12px;width:100%;margin-inline:auto}.searchbar label{width:100%}input{width:100%;height:56px;background-color:var(--neutral800);border-radius:12px;color:var(--neutral200);background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='21'%20height='21'%20fill='none'%20viewBox='0%200%2021%2021'%3e%3cpath%20fill='%23D4D3D9'%20d='M19.844%2018.82c.195.196.195.508%200%20.664l-.899.899c-.156.195-.468.195-.664%200l-4.726-4.727a.63.63%200%200%201-.117-.351v-.508c-1.446%201.21-3.282%201.953-5.313%201.953A8.119%208.119%200%200%201%200%208.625C0%204.172%203.633.5%208.125.5c4.453%200%208.125%203.672%208.125%208.125%200%202.031-.781%203.906-1.992%205.313h.508c.117%200%20.234.078.351.156l4.727%204.726ZM8.125%2014.875a6.243%206.243%200%200%200%206.25-6.25c0-3.438-2.813-6.25-6.25-6.25a6.243%206.243%200%200%200-6.25%206.25%206.219%206.219%200%200%200%206.25%206.25Z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:10px center;padding:16px 24px 16px 35px;border:none;font-family:DM Sans,sans-serif;font-size:20px;font-style:normal}input:hover{background-color:var(--neutral700)}.searchbutton{grid-area:searchbutton;display:flex;align-items:center;justify-content:center}button{background-color:var(--blue500);padding:16px 24px;color:var(--neutral0);border-radius:12px;font-family:DM;font-size:20px;margin:0;height:56px;width:100%}button:hover{background-color:var(--blue700);cursor:pointer}.currentdate{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background-color:var(--neutral800);background-image:url(/weather-app/assets/bg-today-small-DEQrvfY6.svg);background-repeat:no-repeat;background-size:cover;background-position:center;border-radius:20px;grid-area:currentdate;width:100%;padding:80px 24px;text-align:center}.iconCurrent{width:120px;height:120px}.feelhumid{grid-area:feelhumid;display:flex;justify-content:center;align-items:center;gap:16px;align-self:stretch;width:100%}.weatherDetail{display:flex;flex-direction:column;gap:24px;flex:1 1 0;padding:20px;border-radius:12px;border-width:1px;border-style:solid;border-color:var(--neutral600);background-color:var(--neutral800);text-align:center}.windprecipitation{grid-area:windprecipitation;display:flex;justify-content:center;align-items:center;gap:16px;align-self:stretch;width:100%}.hourly{grid-area:hourly;width:100%;max-width:343px;display:flex;flex-direction:column;gap:16px;background-color:var(--neutral800);padding:20px 16px;border-radius:20px;overflow:hidden}select{display:flex;justify-content:center;align-items:center;gap:12px;background-color:var(--neutral600);color:var(--neutral0);padding:8px 16px;text-align:center;border-radius:8px}select:hover{cursor:pointer}.hourHeading{width:100%;display:flex;justify-content:space-between;align-items:center}.hourList{display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:560px;padding-right:4px}.hourContainer{display:flex;align-items:center;gap:8px;align-self:stretch;background-color:var(--neutral700);padding:10px 16px 10px 12px;border-radius:8px;border-width:1px;border-style:solid;border-color:var(--neutral600);min-height:56px}.hourlyLabel{display:flex;flex-direction:column;gap:4px;flex-grow:1}.days{grid-area:days;width:100%}.sevenDayContainer{display:flex;gap:16px;align-self:stretch;margin-top:10px;flex-wrap:wrap}.dailyHighLow{display:flex;justify-content:space-between;align-items:center;align-self:stretch}.dayContainer{display:flex;flex-direction:column;align-items:center;gap:16px;flex-grow:1;min-width:100px;background-color:var(--neutral800);padding:16px 10px;border-radius:12px;border-width:1px;border-style:solid;border-color:var(--neutral600)}.iconDaily{height:60px;width:60px}.iconHourly{height:40px;width:40px}.dropDown{position:relative;width:min(214px,100%);max-width:100%;display:flex;flex-direction:column;gap:4px;background-color:#262540;padding:6px 8px;border-radius:12px;border-width:1px;border-style:solid;border-color:#3c3b5e;box-shadow:0 8px 16px #00000052}.unitSelect{display:flex;justify-content:center;align-items:center;gap:6px;background-color:var(--neutral800);padding:8px 10px;border-radius:6px;cursor:pointer}.unitsMenu{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#262540;border:1px solid #3c3b5e;border-radius:12px;padding:6px 8px;box-shadow:0 8px 16px #00000052;z-index:10}.unitLabel.textPreset7{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:8px;cursor:pointer}.unitSelections{display:flex;flex-direction:column;gap:8px;align-self:stretch}.unitVariables{color:var(--neutral300)}.unitOption{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:8px;background-color:var(--neutral800)}.unitOptionSelected{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:8px;background-color:var(--neutral700)}.divider{height:1px;background-color:var(--neutral600);margin-top:8px;margin-bottom:8px}.noResult{display:flex;flex-direction:column;align-items:center;gap:24px;padding-top:48px}.btnRetry{display:flex;justify-content:center;align-items:center;gap:10px;background-color:var(--neutral800);padding:12px 16px;border-radius:8px}@media (max-width: 767px){.dayContainer{flex:0 0 calc((100% - 32px) / 3);max-width:calc((100% - 32px) / 3)}}@media (min-width: 768px) and (max-width: 1199px){body{padding:24px 24px 80px;gap:48px}header{max-width:720px}main{max-width:720px;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"searchbar searchbar" "currentdate currentdate" "feelhumid windprecipitation" "days days" "hourly hourly";column-gap:20px;row-gap:32px}form{grid-area:searchbar}.searchbar{flex-direction:row;align-items:center;justify-content:center;gap:16px}input{width:590px}button{width:114px}.currentdate{flex-direction:row;justify-content:space-between;text-align:left;background-image:url(/weather-app/assets/bg-today-small-DEQrvfY6.svg);background-repeat:no-repeat;background-size:cover;background-position:center;padding:80px 24px}.hourly{max-width:720px;padding:24px}.sevenDayContainer{display:flex;align-items:center;gap:8px;align-self:stretch;flex-wrap:nowrap;max-width:720px;width:100%}.dayContainer{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:16px;background-color:var(--neutral800);padding:16px 10px;border-radius:12px;border-width:1px;border-style:solid;border-color:var(--neutral600)}}@media (min-width: 1200px){body{padding:48px 112px 80px;gap:64px}header{max-width:1216px}main{max-width:1216px;display:grid;grid-template-columns:384px 384px 384px;grid-template-areas:"searchbar searchbar searchbar" "currentdate currentdate hourly" "feelhumid windprecipitation hourly" "days days hourly";column-gap:32px;row-gap:32px}form{grid-area:searchbar;justify-self:center}.searchbar{flex-direction:row;align-items:center;justify-content:center;gap:16px;width:656px}input{width:526px}button{width:114px}.currentdate{flex-direction:row;justify-content:space-between;text-align:left;background-image:url(/weather-app/assets/bg-today-large-CqYszFxp.svg);background-repeat:no-repeat;background-size:cover;background-position:center;padding:80px 24px}.hourly{max-width:384px;width:384px;padding:24px}.sevenDayContainer{gap:20px;justify-content:space-between}.dayContainer{min-width:0}}