[hidden]{display:none!important}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(45deg)}}article{--background: var(--white);background-color:var(--background);border-top:var(--border);display:flex;flex-direction:column;gap:var(--medium);overflow:hidden;padding:var(--medium);position:relative;&:not([hidden]):last-of-type{border-bottom:var(--border)}&.cold{--background: var(--cyan)}&.freezing{--background: var(--blue)}&.hot{--background: var(--orange)}&.temperate{--background: var(--green)}&.warm{--background: var(--yellow)}}body{background-color:var(--gray);color:var(--black);display:flex;flex-direction:column;font-family:var(--humanist-fonts);margin:0}button{appearance:none;border:var(--border);cursor:pointer;font:inherit;font-weight:500;outline:none}dialog{border:var(--border);&::backdrop{background-color:var(--black);opacity:.5}}h2{font-weight:300;letter-spacing:-1px;margin:0}p{margin:0}.alert-indicator{color:var(--white);cursor:pointer;display:grid;font-size:.75rem;font-weight:700;height:1.5rem;left:0;position:absolute;text-align:left;top:0;width:1.5rem;span{margin-left:.25rem;margin-top:-1.5rem}svg{fill:var(--red)}}.current{align-items:center;display:flex;gap:var(--medium);justify-content:space-between;position:relative;white-space:nowrap;h2{align-items:flex-start;display:flex;flex-grow:1;font-size:2em;font-weight:300;justify-content:space-between;letter-spacing:-1px;line-height:1}p{align-items:center;display:flex;line-height:1;.feels-like{font-style:italic;margin-left:var(--small);opacity:.75;&:before{content:"feels like "}}.current-temp{align-items:flex-start;display:flex;font-size:1.75em;font-weight:500;justify-content:center;&:after{margin-top:var(--tiny)}}}.conditions{align-items:center;align-self:center;display:flex;flex:0 0 2.5rem;justify-content:center;img{height:2.5rem;width:2.5rem}}}.details{background-color:#fff2;border:var(--border);border-radius:var(--tiny);display:grid;grid-template-columns:repeat(2,50%);text-align:center;p{align-items:center;display:flex;justify-content:center;overflow:hidden;padding:var(--thin) var(--small);&:nth-child(-n+4){border-bottom:var(--border)}&[data-map]{cursor:pointer;position:relative;&:before{border:var(--border);content:"";height:calc(100% - .4rem);left:.15rem;opacity:.5;position:absolute;top:.15rem;transition:opacity var(--slow);width:calc(100% - .4rem)}&:hover:before{opacity:1}}&:nth-child(2n){border-left:var(--border)}}}.forecast{background-color:var(--black);border-radius:var(--tiny);border:var(--border);display:flex;flex-direction:column;gap:1px;overflow:hidden;p{align-items:center;flex-grow:1;padding:var(--thin) var(--tiny);span:first-of-type{font-style:italic}}}.cold-cold{background:var(--cyan)}.cold-freezing{background:linear-gradient(to right,var(--cyan),var(--blue))}.cold-hot{background:linear-gradient(to right,var(--cyan),var(--green),var(--yellow),var(--orange))}.cold-temperate{background:linear-gradient(to right,var(--cyan),var(--green))}.cold-warm{background:linear-gradient(to right,var(--cyan),var(--green),var(--yellow))}.freezing-cold{background:linear-gradient(to right,var(--blue),var(--cyan))}.freezing-freezing{background:var(--blue)}.freezing-hot{background:linear-gradient(to right,var(--blue),var(--cyan),var(--green),var(--yellow),var(--orange))}.freezing-temperate{background:linear-gradient(to right,var(--blue),var(--cyan),var(--green))}.freezing-warm{background:linear-gradient(to right,var(--blue),var(--cyan),var(--green),var(--yellow))}.hot-cold{background:linear-gradient(to right,var(--orange),var(--yellow),var(--green),var(--cyan))}.hot-freezing{background:linear-gradient(to right,var(--orange),var(--yellow),var(--green),var(--cyan),var(--blue))}.hot-hot{background:var(--orange)}.hot-temperate{background:linear-gradient(to right,var(--orange),var(--yellow),var(--green))}.hot-warm{background:linear-gradient(to right,var(--orange),var(--yellow))}.temperate-cold{background:linear-gradient(to right,var(--green),var(--cyan))}.temperate-freezing{background:linear-gradient(to right,var(--green),var(--cyan),var(--blue))}.temperate-hot{background:linear-gradient(to right,var(--green),var(--yellow),var(--orange))}.temperate-temperate{background:var(--green)}.temperate-warm{background:linear-gradient(to right,var(--green),var(--yellow))}.warm-cold{background:linear-gradient(to right,var(--yellow),var(--green),var(--cyan))}.warm-freezing{background:linear-gradient(to right,var(--yellow),var(--green),var(--cyan),var(--blue))}.warm-hot{background:linear-gradient(to right,var(--yellow),var(--orange))}.warm-temperate{background:linear-gradient(to right,var(--yellow),var(--green))}.warm-warm{background:var(--yellow)}.conditions{&.sunny{.large-rays{animation:rotate linear 9s infinite;fill-opacity:.25}.small-rays{animation:rotate linear 9s infinite;fill-opacity:.5}}}.humidity:after{content:"%";font-size:.75em}.mapboxgl-control-container{display:none}.pressure:after{content:"hg";font-size:.75em}.precip-total:after{content:"in";font-size:.75em}.solar-radiation:after{content:")"}.solar-radiation:before{content:"(";margin-left:var(--tiny)}.solar-radiation .value:after{content:"W/m²";font-size:.75em}.speed:after{content:"mph";font-size:.75em}.temperature:after{content:"°";font-size:.75em}#AlertsDialog{background-color:var(--red);color:var(--white);flex-direction:column;gap:var(--medium);&[open]{display:flex}form{display:flex;justify-content:center;button{appearance:none;background-color:var(--white);border:var(--border);border-radius:var(--tiny);color:var(--black);font:inherit;padding:var(--small) var(--medium)}}.content{display:flex;flex-direction:column;gap:var(--small)}}#MapDialog{height:calc(100dvh - var(--huge));overflow:visible;padding:0;width:calc(100dvw - var(--huge));#Map{height:100%;width:100%}form{button{background-color:var(--red);border-radius:1rem;color:var(--white);font-size:1.5rem;height:2rem;left:-.5rem;line-height:1.2;position:absolute;top:-.5rem;width:2rem}}}@media screen and (min-width: 640px){article{flex-direction:row;flex-wrap:wrap;.current{flex:0 0 100%}.details,.forecast{flex:0 1 calc(50% - var(--small))}}}@media screen and (min-width: 840px){article{flex-wrap:nowrap;.current{align-items:center;align-self:flex-start;flex:0 0 140px;flex-wrap:wrap;justify-content:center;h2{flex:0 0 100%;justify-content:center}.conditions{flex:0 0 3rem;img{height:3rem;width:3rem}}}.details{flex:2 0 33%}.forecast{flex:1 0 33%}}}@media screen and (min-width: 1024px){article{border-radius:var(--tiny);border:var(--border);margin:0 auto;max-width:1024px;width:100%}body{gap:var(--medium);justify-content:center;margin:var(--medium);min-height:100dvh}}