:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;background:linear-gradient(to top,#87ceeb,#fdf6e3);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{color:#000;max-width:100vw;width:100%;text-align:center}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;margin-left:5px;font-size:1em;font-weight:500;font-family:inherit;background:linear-gradient(to bottom,gold,#ffc107);color:#000;cursor:pointer;transition:border-color .25s}button:hover{background:linear-gradient(to bottom,#ffc107,gold)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.App{width:100%}.panel{background-color:#6464c833;color:#000;border:5px solid rgba(75,75,150,.2);border-radius:10px;box-shadow:-5px 5px 10px;padding:10px;margin:20px}.weather-header{font-size:1.5rem;font-weight:800}.current-wrapper{max-width:100vw;width:100%;margin:20px auto;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-evenly}@media (min-width: 768px){.weather-header{font-size:2rem}.current-wrapper{flex-direction:column}}@media (min-width: 1400px){.current-wrapper{flex-direction:row}}.spinner-wrapper{position:fixed;top:20%;left:50%;transform:translate(-50%,-50%);z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:50%}.spinner-wrapper .loading-text{font-size:1.5rem;font-weight:700}.location-form{margin:0 auto;max-width:800px;display:flex;flex-direction:column;align-items:center}.location-form .geolocation-error{font-size:.9rem;color:#c00}.location-form .location-form-controls{display:flex;flex-direction:column;width:100%}.location-form .location-form-controls .location-input-wrapper{display:flex;flex:1 1 50%}.location-form .location-form-controls .location-input-wrapper .location-form-header{font-size:1rem;display:inline-block;margin:2px;max-width:80px}.location-form .location-form-controls .location-input-wrapper .location-input{font-size:1.5rem;max-width:100%;width:100%;flex:1;background-color:#fff8dc;color:#000;border:3px solid #FFC107;border-radius:5px}.location-form .location-form-controls .location-input-wrapper .location-input:focus{border:3px solid #FFD700;outline:none}.location-form .location-form-controls .location-buttons-wrapper{display:flex;flex:1 1 50%}.location-form .location-form-controls .location-buttons-wrapper button{flex:1;max-width:100%;display:flex;justify-content:center;align-items:center}@media (min-width: 768px){.location-form .location-form-controls{display:flex;flex-direction:row}.location-form .location-form-controls .location-input-wrapper{flex-direction:row;max-width:none}.location-form .location-form-controls .location-input-wrapper .location-input{max-width:300px}.location-form .location-form-controls .location-buttons-wrapper{flex:1 1 50%;max-width:100%}}.current{display:flex;flex-direction:column;flex:1;align-items:center;justify-content:space-between}.current .data-info{margin-left:auto;margin-right:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}.current .data-info span{margin:0 20px}.current .data-info .location-name{font-size:1.5rem}.current .data-info .current-clouds{display:flex;justify-content:center;align-items:center}.current .current-weather{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.current .current-weather .current-weather-child{display:flex;flex-direction:column;justify-content:center;align-items:center}.current .current-weather .current-weather-subpanel{background-color:#eed;padding:4px;margin:8px 0;border-radius:10px;font-size:.8rem;font-weight:700}.current .current-weather .current-weather-subpanel .current-weather-label{color:#000}.current .current-weather .current-temp-humidity{display:flex;flex-direction:column;justify-content:space-between}.current .current-weather .current-temp-humidity .temp-circle{width:150px;height:150px;font-size:4rem;color:#c00;border-radius:50%;border:5px solid #222}.current .current-weather .current-temp-humidity .temp-circle .temp-display{font-size:4rem;transform:translateY(20px)}.current .current-weather .current-temp-humidity .temp-circle .feels-like-display{font-size:.8rem}.current .current-weather .current-temp-humidity .temp-circle .feels-like-display .feels-like-text{color:#000}.current .current-weather .current-temp-humidity .current-humidity{color:#090}.current .current-weather .current-wind-speeds{color:#44f}.current .current-weather .current-precip{width:250px;height:200px}.current .google-map{width:200px;height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:.8rem}.current .google-map .google-map-error{display:none;color:#c00;font-size:.9rem}.current .google-map .google-map-error .visible{display:block}.current .google-map .coordinates{font-size:.7rem;color:#666}@media (min-width: 600px){.current{min-width:450px}.current .data-info{flex-direction:row}.current .current-weather{min-width:450px;flex-direction:row;flex-wrap:wrap}.current .current-weather .current-weather-child{min-width:250px}.current .current-weather .google-map{width:250px;height:250px}}@media (min-width: 1400px){.current,.current .current-weather{min-width:800px}.current .current-weather .current-temp-humidity .temp-circle{width:150px;height:150px;font-size:4rem}.current .current-weather .current-temp-humidity .temp-circle .temp-display{font-size:4rem;transform:translateY(20px)}.current .current-weather .current-temp-humidity .temp-circle .temp-display .feels-like-display{font-size:.8rem;transform:translateY(20px)}.current .current-weather .current-temp-humidity .temp-circle .temp-display .feels-like-display .feels-like-text{color:#000}.current .current-weather .current-weather-subpanel{font-size:1.2rem}.current .current-weather .google-map{width:350px;height:350px}.current .current-weather .current-precip{width:300px;height:250px}}.wind-vane-image{width:175px;height:175px}.wind-vane-image .wind-vane-circle{stroke:#000;stroke-width:2px;fill:transparent}.wind-vane-image .wind-direction{font-size:1.2rem;stroke-width:2px}.wind-vane-image .wind-vane-arrow{transition:transform 1s ease-in-out}.wind-vane-image .wind-vane-arrow .wind-vane-arrow-body{stroke:red;stroke-width:4px;fill:red}.wind-vane-image .wind-vane-arrow .wind-vane-arrow-head,.wind-vane-image .wind-vane-arrow .wind-vane-arrow-tail{stroke:red;stroke-width:1px;fill:red}.week-forecast{margin-left:auto;margin-right:auto;max-width:600px;display:flex;justify-content:center;align-items:center;flex-direction:column}.week-forecast .day-forecast{margin:2px;width:100%;height:250px;border:#252 2px solid;border-radius:5px;box-shadow:-2px 2px 4px;background:linear-gradient(to bottom,#f1fff1,#dcffdc);display:flex;flex-direction:column;justify-content:space-evenly}.week-forecast .day-forecast .day-forecast-label{font-size:.8rem;font-weight:700}.week-forecast .day-forecast .day-datetime{display:flex;justify-content:space-evenly;align-items:center;font-size:1.1rem;font-weight:700}.week-forecast .day-forecast .day-temp-moisture-wrapper{display:flex;justify-content:space-evenly}.week-forecast .day-forecast .day-temp-moisture-wrapper .day-forecast-data,.week-forecast .day-forecast .day-temp-moisture-wrapper .day-forecast-temps{font-size:1.2rem;font-weight:700}.week-forecast .day-forecast .day-temp-moisture-wrapper .day-forecast-temps .day-forecast-temp-high{color:#c00}.week-forecast .day-forecast .day-temp-moisture-wrapper .day-forecast-temps .day-forecast-temp-low{color:#26f}.week-forecast .day-forecast .day-temp-moisture-wrapper .day-forecast-dewpoint{color:#090}.week-forecast .day-forecast .day-temp-moisture-wrapper .day-forecast-pop{color:#42b}.week-forecast .day-forecast .day-forecast-wind{color:#8af;font-weight:700}.week-forecast .day-forecast .day-forecast-wind-units{font-size:.8rem;font-weight:600}@media (min-width: 1400px){.week-forecast{max-width:100%;display:flex;flex-direction:row}.week-forecast .day-forecast{max-width:200px}}