@font-face{font-family:Space Grotesk;src:url(/fonts/SpaceGrotesk-Variable.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}@layer tokens{:root{--clr-text-1: hsl(209 75.7% 21%);--clr-text-2: hsl(209 75.8% 32.4%);--clr-surface-1: hsl(205 100% 95.3%);--clr-surface-2: hsl(206 100% 90.8%);--clr-surface-3: hsl(206 100% 82.4%);--clr-surface-4: hsl(207 91.4% 63.5%);--sz-100: clamp(.3125rem, .3125rem + 0vw, .3125rem);--sz-200: clamp(.5625rem, .5408rem + .1087vw, .625rem);--sz-300: clamp(.875rem, .8533rem + .1087vw, .9375rem);--sz-400: clamp(1.125rem, 1.0815rem + .2174vw, 1.25rem);--sz-500: clamp(1.6875rem, 1.6223rem + .3261vw, 1.875rem);--sz-600: clamp(2.25rem, 2.163rem + .4348vw, 2.5rem);--sz-700: clamp(3.375rem, 3.2446rem + .6522vw, 3.75rem);--sz-800: clamp(4.5rem, 4.3261rem + .8696vw, 5rem);--sz-900: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);--br-100: 4px;--br-200: 8px;--br-300: 12px;--br-400: 16px;--br-500: 20px;--br-600: 24px;--br-700: 28px;--br-800: 32px;--br-900: 36px;--br-circle: 50%;--br-pill: 100vw;--ff-sans: "Space Grotesk", sans-serif;--fw-regular: 400;--fw-medium: 500;--fw-bold: 700;--fs-200: clamp(.7rem, .66rem + .2vw, .8rem);--fs-300: clamp(.88rem, .83rem + .24vw, 1rem);--fs-400: clamp(1.09rem, 1rem + .47vw, 1.33rem);--fs-500: clamp(1.37rem, 1.21rem + .8vw, 1.78rem);--fs-600: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);--fs-700: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);--fs-800: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);--fs-900: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem)}}@layer base{*,*:before,*:after{box-sizing:border-box}*{margin:0;font:inherit}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;color:var(--clr-text-1);background:linear-gradient(var(--clr-surface-3),var(--clr-surface-4));font-family:var(--ff-sans);line-height:1.5}main{max-width:40rem;margin-inline:auto;padding-inline:var(--sz-500);min-height:60vh;align-content:center}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}}@layer layout{header{padding-block:var(--sz-400)}header nav{display:flex;align-items:center;justify-content:space-between;max-width:60rem;margin-inline:auto;padding-inline:var(--sz-500)}header nav .logo{text-decoration:none;color:var(--clr-text-1);font-size:var(--fs-500);font-weight:var(--fw-medium)}header nav .menu{display:flex;align-items:center;gap:var(--sz-400)}header nav .menu a{text-decoration:none;color:var(--clr-text-2);font-size:var(--fs-300)}header nav .menu a:hover{text-decoration:underline}.hero{margin-block-start:var(--sz-700);text-align:center}.hero h1{font-size:var(--fs-700);font-weight:var(--fw-medium)}.weather{padding-block:var(--sz-600)}.weather form{display:flex}.weather form input[type=search],.weather form button[type=submit]{border:transparent;background-color:var(--clr-surface-1);padding:var(--sz-400) var(--sz-500)}.weather form input[type=search]{min-width:0;flex-grow:1;border-start-start-radius:var(--br-400);border-end-start-radius:var(--br-400)}.weather form button[type=submit]{display:grid;background-color:var(--clr-text-1);border-end-end-radius:var(--br-400);border-start-end-radius:var(--br-400);transition:.15s}.weather form button[type=submit]:hover{cursor:pointer;background-color:var(--clr-text-2)}.weather form button[type=submit] svg{fill:var(--clr-surface-1)}.weather .weather-card{background:linear-gradient(160deg,var(--clr-surface-1),var(--clr-surface-2));padding:var(--sz-500);margin-block-start:var(--sz-500);border-radius:var(--br-500)}.weather .weather-card [data-loading],.weather .weather-card [data-error]{text-align:center}.weather .weather-card .weather-details{display:grid;gap:var(--sz-500)}@media (width>=35em){.weather .weather-card .weather-details{grid-template-columns:1fr 1fr;align-items:center}}.weather .weather-card .weather-details .meta-details{background-color:var(--clr-surface-3);padding:var(--sz-500);border-radius:var(--br-400)}.weather .weather-card .weather-details .meta-details [data-temperature]{font-size:var(--fs-700);font-weight:var(--fw-medium)}.weather .weather-card .weather-details .meta-details [data-description]{font-size:var(--fs-400);letter-spacing:-.025em;font-weight:var(--fw-medium)}.weather .weather-card .weather-details .extra-details{display:grid;gap:var(--sz-100)}.weather .weather-card .weather-details .extra-details div{display:flex;align-items:center;justify-content:space-between}.weather .weather-card .weather-details .extra-details dd{font-weight:var(--fw-medium)}.weather .weather-card .weather-details .calc-time{text-align:center;color:var(--clr-text-2);font-size:var(--fs-200)}@media (width>=35em){.weather .weather-card .weather-details .calc-time{grid-column:1/3}}.weather .weather-card .weather-details .calc-time [data-time]{font-weight:var(--fw-medium)}}@layer utilities{.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}