header{background-color:#343a40;padding:20px 0}form{display:grid;grid-template-columns:30px 2fr 100px 1fr}#search,button{border:none;font-size:1rem;height:35px;outline:none}#search{padding:0 10px;width:100%}#search,#search:focus{border-bottom-left-radius:var(--input-border-radius);border-top-left-radius:var(--input-border-radius)}#search:focus{box-shadow:0 0 3pt 2pt var(--theme-color)}button{color:#fff}button[type=submit]{background-color:var(--theme-color);border-bottom-right-radius:var(--input-border-radius);border-top-right-radius:var(--input-border-radius);font-weight:700;width:80px}button:hover{cursor:pointer;filter:saturate(.6)}button.toggle-units{background-color:#343a40;border:2px solid var(--theme-color);border-radius:var(--input-border-radius)}.geolocation{background-color:transparent;color:var(--theme-color);font-size:1.3rem;text-align:left}@media only screen and (max-width:600px){form{grid-template-areas:"geo search button" "toggle toggle toggle";grid-template-columns:35px 1fr 70px;grid-template-rows:60px}button[type=submit]{width:100%}.toggle-units{grid-area:toggle}}.current-temps{align-items:center;display:flex;flex-direction:column}.current-temps img{height:75px}.city-name{font-size:1.6rem}.current-conditions{font-size:1.3rem}.current-time{color:grey}.current-temp{align-items:center;display:flex;font-size:4rem;justify-content:center}.low-temp{color:var(--subtext-color)}@media only screen and (max-width:600px){.current-temp{font-size:3rem}}.daily-headings.card-daily{color:var(--theme-color);font-size:1.1rem}.daily-temps img{height:75px}.daily-conditions{display:flex;justify-content:center}.card-daily{align-items:center;border-bottom:1px solid grey;display:grid;font-size:.9rem;grid-template-columns:repeat(5,1fr);grid-template-rows:75px;padding:0 40px}.daily-humidity,.daily-rain,.daily-temp{text-align:right}.daily-lo{color:var(--subtext-color)}@media only screen and (max-width:600px){.daily-headings.card-daily{font-size:.8rem!important}.weekday{font-size:.6rem}.card-daily{padding:0}}.hourly-temps{display:grid;grid-template-columns:repeat(48,1fr);overflow-x:scroll;width:100%}.card-hourly{align-items:center;display:flex;flex-direction:column;justify-content:center}.hourly-rain{color:#007bff;font-size:.7rem}.period{color:var(--subtext-color);font-size:.6rem}.other{background-color:#343a40}.other>.wrapper{align-items:center;display:grid;grid-auto-rows:70px;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,70px);justify-content:center;text-align:center}.other>.wrapper>*{display:grid;grid-template-rows:20px}.other span{color:#fff;font-size:.8rem}.other-label{color:var(--subtext-color)!important;font-size:.7rem!important;text-transform:uppercase}@media only screen and (max-width:600px){.other>.wrapper{grid-template-columns:repeat(2,1fr)}.other span{font-size:1rem}.other{order:5}}:root{--input-border-radius:5px;--subtext-color:#9d9d9d;--theme-color:#eb6f4c}*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0}.hide{display:none!important}.wrapper{margin:auto;max-width:1000px;padding:0 20px}img{height:50px}.top-half{display:flex;padding-top:20px}.results,.top-half{padding-bottom:20px}.error.active{border:2px solid red;border-radius:var(--input-border-radius);color:red;font-weight:700;margin-top:20px;padding:10px;text-align:center;width:90%}.loading-screen{align-items:center;background-color:hsla(0,0%,100%,.408);display:flex;height:100%;justify-content:center;position:absolute;top:0;width:100vw}.loader{animation:spin 2s linear infinite;border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid var(--theme-color);height:120px;width:120px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}