.help{position:fixed;top:1rem;right:1rem;z-index:18;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}.help-actions{display:flex;align-items:center;gap:.25rem}.theme-icon-btn,.help-icon-btn{background:transparent;color:var(--clr-primary-alpha);cursor:pointer;padding:.5rem;border-radius:50%;display:grid;place-items:center;transition:color .1s ease-out;animation:rise-show var(--rise-show-duration) ease-out}.theme-icon-btn:hover,.help-icon-btn:hover{color:var(--clr-primary)}.theme-icon-btn:focus-visible,.help-icon-btn:focus-visible{outline:2px solid var(--clr-primary-alpha);outline-offset:2px}.help:has(.help-dialog.open) .help-icon-btn{background-color:var(--clr-neutral-light-alpha)}.help-dialog{position:relative;width:400px;background-color:var( --clr-neutral-light );border-radius:1rem;visibility:hidden;opacity:0;transform:translateY(-5px);transition:all .1s ease-out}.help-dialog.open{visibility:visible;opacity:1;transform:translateY(0)}@media not (min-width:600px){.help-dialog{position:fixed;top:4rem;inset-inline:1rem;width:auto}}.help-content{display:flex;flex-direction:column;width:100%}.help-switch{display:flex;width:100%;justify-content:space-between;gap:.5rem;border-bottom:1px solid var(--clr-text-alpha-2);padding:.5rem}.help-switch-btn{background:transparent;color:var(--clr-text-alpha);cursor:pointer;padding:.5rem;border-radius:.5rem;flex:1;display:grid;place-items:center;transition:all .1s ease-out}.help-switch-btn:hover{background-color:var(--clr-text-alpha-2);color:var(--clr-text)}.help-switch-btn.active{color:var(--clr-primary)}.help-desc-list{padding:1rem 1.5rem;display:flex;flex-direction:column}.help-desc-item{display:flex;align-items:center;gap:1rem;height:84px}.icon-container{color:var(--clr-secondary);background-color:var(--clr-secondary-alpha-2);padding:1rem;border-radius:50%;display:grid;place-items:center}.help-desc-text{display:flex;flex-direction:column;gap:.5rem;font:var(--fontBaseMd);color:var(--clr-text);width:100%}@media not (min-width:600px){.help-desc-text{font:var(--fontBaseSm)}}.key{display:inline-block;padding:.1em .4em;margin:0;font:var(--fontBoldSm);width:fit-content;background-color:var(--clr-primary-alpha-2);border-radius:.25rem;color:var(--clr-primary);border:1px solid var(--clr-primary-alpha)}.key-info{display:grid;grid-template-columns:1fr auto;gap:.5rem;animation:appear .2s ease-out}@keyframes appear{0%{opacity:0}to{opacity:1}}@media not (min-width:600px){.help-switch{display:none}}.mountains{--init-brightness: .8;--init-saturation: 1.2;position:absolute;width:100%;height:100%;overflow:hidden;background:linear-gradient(var(--clr-sky-1) 0%,var(--clr-sky-2) 25%,var(--clr-sky-3) 50%,var(--clr-sky-4) 75%);background-size:auto 200%;background-clip:content-box;animation:rise-sky var(--rise-time) ease-out 1 forwards}@keyframes rise-sky{to{background-position:center 100%}}.mountains img{width:100%;object-fit:cover;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;z-index:3;pointer-events:none;animation-name:rise-mountain,parallax;animation-duration:var(--rise-time),auto;animation-timing-function:ease-out,linear;animation-timeline:auto,scroll(root);animation-range:auto,exit;animation-fill-mode:forwards}.mountains img.parallax-back{--move-speed: 6}.mountains img.parallax-mid{--move-speed: 5}:root[data-theme=dark] .mountains img{--init-saturation: 2;--init-brightness: .2;--tone-brightness: .5;--tone-saturation: 1.5}@keyframes rise-mountain{0%{filter:brightness(var(--init-brightness, 1)) saturate(var(--init-saturation, 1))}to{filter:brightness(var(--tone-brightness, 1)) saturate(var(--tone-saturation, 1))}}@keyframes parallax{to{scale:1 calc(1 - var(--move-speed, 0) * .01);translate:0 calc(var(--move-speed, 0) * 1vh);translate:0 calc(var(--move-speed, 0) * 1svh)}}.weather-container{display:flex;align-items:center;gap:.75rem;font:var(--fontBaseLg);color:var(--clr-text);opacity:.8;animation:rise-show var(--rise-show-duration) ease-in;z-index:1000;margin-bottom:-2rem}@media(max-width:600px){.weather-container{font-size:var(--fs-base);gap:.5rem}}.weather-container span{display:flex;align-items:center}.weather-info{color:var(--clr-primary);display:flex;align-items:center;gap:.25rem}.weather-refresh{background:transparent;border:none;color:var(--clr-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.25rem;border-radius:50%}.weather-refresh.loading{animation:spin 1s infinite}@keyframes spin{to{transform:rotate(360deg)}}.cover{--rise-time: 1.5s;--rise-show-duration: 1.75s;height:100vh;height:100svh}.cover-content{width:100%;height:50vh;height:50svh;position:fixed;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem}.title-container{display:flex;flex-direction:column;align-items:center}.title{background-image:linear-gradient(to right,var(--clr-primary),var(--clr-secondary));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:var(--fs-xl);font-variant-numeric:tabular-nums;letter-spacing:.5rem;animation:rise-show var(--rise-show-duration) ease-in;z-index:1}.search{--height: 3rem;--expand-duration: .25s;border-radius:calc(var(--height) / 2);overflow:hidden;animation:rise var(--rise-time) ease-out 1 forwards;z-index:2}@keyframes rise{0%{translate:0 25vh;translate:0 25svh}}.search-form{display:flex;align-items:center;background-color:var(--clr-search-field-bg);transition:calc(var(--expand-duration) * 2);cursor:text}.search-form:focus-within,.search:hover .search-form{padding-left:calc(var(--height) / 8);padding-right:calc(var(--height) / 2);opacity:1;transition:var(--expand-duration);background-color:var(--clr-search-field-bg-active)}.search-input{font:var(--fontBaseLg);width:0;height:var(--height);background-color:var(--clr-search-field-bg);color:var(--clr-search-field-text);outline:none;transition:calc(var(--expand-duration) * 2)}.search-input:focus,.search:hover .search-input{background-color:var(--clr-search-field-bg-active);color:var(--clr-search-field-text);width:15rem;max-width:75vw;transition:var(--expand-duration)}.search-input:focus::placeholder,.search:hover .search-input::placeholder{opacity:1}.search-input::placeholder{color:var(--clr-search-field-placeholder);opacity:0}.search-icon{height:var(--height);aspect-ratio:1 / 1;border-radius:50%;display:grid;place-items:center;opacity:.75;font-size:var(--fs-lg)}.search-icon .icon{color:var(--clr-search-icon);transition:var(--expand-duration);animation:rise-show var(--rise-show-duration) ease-in 1}.search:hover .search-icon,.search:focus-within .search-icon{opacity:1;transition:var(--expand-duration)}.search:hover .search-icon .icon,.search:focus-within .search-icon .icon{color:var(--clr-search-icon-active);opacity:1}@keyframes rise-show{0%,80%{opacity:0}to{opacity:1}}@media not (min-width:600px){.cover-content.focused{justify-content:flex-start;padding-top:4rem;transition:.2s;z-index:1000}.cover-content.focused .title,.cover-content.focused .weather-container{display:none}}footer{height:10rem;background-color:var(--clr-footer-bg);display:grid;place-items:center}footer a{text-decoration:none;color:var(--clr-on-dark);filter:brightness(.8);transition:.2s}footer a:hover{filter:brightness(1)}:root{accent-color:var(--clr-primary);--clr-primary: hsl(275, 72%, 68%);--clr-primary-alpha: hsla(275, 72%, 68%, .8);--clr-primary-alpha-2: hsla(275, 72%, 68%, .3);--clr-secondary: hsl(249, 50%, 60%);--clr-secondary-alpha: hsla(249, 50%, 60%, .8);--clr-secondary-alpha-2: hsla(249, 50%, 60%, .3);--clr-neutral: hsl(249, 25%, 37%);--clr-neutral-light: #fff;--clr-neutral-light-alpha: #fff6;--clr-neutral-dark: hsl(0, 0%, 13%);--clr-on-dark: #fff;--clr-sky-1: hsl(249, 25%, 37%);--clr-sky-2: hsl(269, 22%, 55%);--clr-sky-3: hsl(316, 42%, 82%);--clr-sky-4: hsl(185, 38%, 94%);--clr-search-button: hsl(316, 47%, 64%);--clr-search-button-light: hsl(316, 47%, 80%);--clr-search-field-bg: var(--clr-search-button-light);--clr-search-field-bg-active: var(--clr-neutral-light);--clr-search-field-text: var(--clr-text);--clr-search-field-placeholder: var(--clr-text);--clr-search-icon: var(--clr-on-dark);--clr-search-icon-active: var(--clr-disabled);--clr-disabled: #757575;--clr-text: #777;--clr-text-alpha: hsla(0, 0%, 13%, .5);--clr-text-alpha-2: hsla(0, 0%, 13%, .05);--clr-panel-bg: var(--clr-neutral-light-alpha);--clr-panel-border: var(--clr-neutral-light-alpha);--clr-overlay: #0005;--clr-trigger: #52a5;--clr-footer-bg: hsl(0, 0%, 13%)}:root ::selection{background-color:var(--clr-primary-alpha);color:var(--clr-on-dark)}:root[data-theme=dark]{--clr-primary: hsl(275, 74%, 72%);--clr-primary-alpha: hsla(275, 74%, 72%, .8);--clr-primary-alpha-2: hsla(275, 74%, 72%, .3);--clr-secondary: hsl(246, 64%, 72%);--clr-secondary-alpha: hsla(246, 64%, 72%, .8);--clr-secondary-alpha-2: hsla(246, 64%, 72%, .3);--clr-neutral: hsl(226, 26%, 80%);--clr-neutral-light: hsl(228, 19%, 16%);--clr-neutral-light-alpha: hsla(228, 19%, 20%, .72);--clr-neutral-dark: hsl(226, 26%, 9%);--clr-on-dark: hsl(220, 24%, 93%);--clr-sky-1: hsl(225, 42%, 4%);--clr-sky-2: hsl(224, 46%, 10%);--clr-sky-3: hsl(220, 54%, 18%);--clr-sky-4: hsl(214, 62%, 30%);--clr-search-button: hsl(282, 28%, 30%);--clr-search-button-light: hsl(0, 0%, 88%);--clr-search-field-bg: var(--clr-search-button-light);--clr-search-field-bg-active: var(--clr-search-button-light);--clr-search-field-text: var(--clr-sky-4);--clr-search-field-placeholder: var(--clr-sky-4);--clr-search-icon: var(--clr-sky-4);--clr-search-icon-active: var(--clr-sky-4);--clr-disabled: hsl(0, 0%, 58%);--clr-text: hsl(218, 21%, 86%);--clr-text-alpha: hsla(218, 21%, 86%, .72);--clr-text-alpha-2: hsla(218, 21%, 86%, .12);--clr-panel-bg: hsla(228, 19%, 14%, .78);--clr-panel-border: hsla(262, 69%, 74%, .24);--clr-overlay: #0008;--clr-trigger: var(--clr-primary-alpha);--clr-footer-bg: hsl(226, 26%, 9%)}:root{--ff-quicksand: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--fs-sm: .85rem;--fs-md: 1rem;--fs-lg: 1.2rem;--fs-xl: 7.5rem;--fw-base: 500;--fw-bold: 700;--fontBaseSm: var(--fw-base) var(--fs-sm) var(--ff-quicksand);--fontBaseMd: var(--fw-base) var(--fs-md) var(--ff-quicksand);--fontBaseLg: var(--fw-base) var(--fs-lg) var(--ff-quicksand);--fontBaseXl: var(--fw-base) var(--fs-xl) var(--ff-quicksand);--fontBoldSm: var(--fw-bold) var(--fs-sm) var(--ff-quicksand);--fontBoldMd: var(--fw-bold) var(--fs-md) var(--ff-quicksand);--fontBoldLg: var(--fw-bold) var(--fs-lg) var(--ff-quicksand);--fontBoldXl: var(--fw-bold) var(--fs-xl) var(--ff-quicksand)}*{margin:0;padding:0;border:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}html{overflow-x:hidden;background-color:var(--clr-sky-3)}html ::-webkit-scrollbar{width:0}html:after{content:"";position:fixed;bottom:0;left:0;width:100vw;height:50vh;height:50svh;background-color:var(--clr-neutral-dark);z-index:-1}body{font-family:var(--ff-quicksand);line-height:1.5}@supports (view-transition-name: root){::view-transition-old(root),::view-transition-new(root){animation:none}}
