:root{--header-height:15vh;--footer-height:10vh}*,button,input{box-sizing:border-box;padding:0;margin:0;font-family:"Quicksand",sans-serif}body{background:#2c3b46;color:#fff}@media screen and (max-width:654px){:root{--header-height:25vh}}.alert-sign{margin:2em 0;width:6.5rem;height:6.5rem;position:relative}.alert-sign:after{content:"!";position:absolute;top:50%;left:50%;font-size:8.5rem;font-weight:700;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.alert .msg{font-weight:700;font-size:2.5rem}@media screen and (max-width:654px){.alert-sign:after{font-size:6.5rem}.alert .msg{font-size:1.85rem}}main{min-height:calc(100vh - var(--header-height) - var(--footer-height))}main,main>div{display:flex;flex-direction:column;align-items:center}.btn{display:grid;grid-template-columns:1fr 5fr;grid-gap:.5rem;place-items:center;padding:.5em .75em;outline:none;border:2px solid #fff;border-radius:5px;font-size:1.5rem;color:#fff;background:transparent;transition:box-shadow .2s ease-in-out;cursor:pointer}.btn img{width:100%}.btn:hover{box-shadow:1px 1px 0 0 #fff,1px -1px 0 0 #fff,-1px -1px 0 0 #fff,-1px 1px 0 0 #fff}footer{height:var(--footer-height);width:100%;display:flex;flex-direction:column}footer ul{line-height:2.15em;text-align:center;list-style:none}.forecast-icon{position:relative;bottom:-2.5rem;width:250px}.location-name{font-weight:700;font-size:2.5rem}.details{margin-top:1.5rem;max-width:300px;display:grid;grid-template-columns:2fr 1fr;font-size:1.75rem}.details .condition{font-weight:500}.details .temperatures{text-align:right;font-weight:600}@media screen and (max-width:992px){.location-name{font-size:1.85rem}.details{font-size:1.15rem}.forecast-icon{width:200px}}header{height:var(--header-height);width:100%;display:flex;justify-content:center}header nav{margin:auto;width:80%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}header h1{font-weight:300;font-size:3rem}@media screen and (max-width:992px){header nav{width:90%}header h1{font-size:2.15rem}header input{font-size:.85rem}}@media screen and (max-width:654px){header nav{flex-direction:column;justify-content:center}header h1{font-size:3.5rem;margin-bottom:1.5rem}header input{font-size:1.15rem}}.spinner{margin:7.5rem auto 0;height:3rem;width:3rem;border:.35rem solid transparent;border-top-color:#fff;border-radius:50%;-webkit-animation-name:rotate;animation-name:rotate;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.search-input{border:2px solid #fff;border-radius:5px;display:grid;grid-template-columns:5fr 1fr}.search-input .icon{border:none;background:url(/static/media/magnifier.37307b3b.svg);background-repeat:no-repeat;background-size:contain;cursor:pointer}input{padding:.75em 1.15em;border:none;outline:none;background:#2c3b46;color:#fff;font-weight:500;font-size:1rem;letter-spacing:.15em}input::-webkit-input-placeholder{color:hsla(0,0%,100%,.5)}input:-ms-input-placeholder{color:hsla(0,0%,100%,.5)}input::placeholder{color:hsla(0,0%,100%,.5)}