body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;font-family:Open Sans,sans-serif;background:#222;background-image:url(https://source.unsplash.com/1600x900/?landscape);font-size:120%;background-repeat:no-repeat;background-size:cover}.card{background:#000000d0;color:#fff;padding:2em;border-radius:30px;width:100%;max-width:420px;margin:1em}.search{display:flex;align-items:center;justify-content:center}button{margin:.5em;border-radius:50%;border:none;height:44px;width:44px;outline:none;background:#7c7c7c2b;color:#fff;cursor:pointer;transition:.2s ease-in-out}input.search-bar{border:none;outline:none;padding:.4em 1em;border-radius:24px;background:#7c7c7c2b;color:#fff;font-family:inherit;font-size:105%;width:calc(100% - 100px)}button:hover{background:#7c7c7c6b}h1.temp{margin:0 0 .4em}.flex{display:flex;align-items:center}.description{text-transform:capitalize;margin-left:8px}.weather.loading{visibility:hidden;max-height:20px;position:relative}.weather.loading:after{visibility:visible;content:"Loading...";color:#fff;position:absolute;top:0;left:20px}.error{text-align:center;color:red;font-weight:300}