html{height:100%;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;background-color:#666;font-family:"Roboto",sans-serif;height:100%;color:#fff;transition:background-color 5s}h1{font-family:"Patua One",cursive;text-align:center;font-size:72px;text-transform:uppercase;margin:0}.container{display:flex;align-items:center;justify-content:center;width:100%;height:80%;padding:15px}.weather{text-align:center;font-size:22px}.city-form{position:relative;z-index:2;margin:50px auto}.city-search{width:100%;padding:0 100px 0 50px;height:36px;line-height:36px;font-size:1.1rem;border-radius:10px;background-color:rgba(255,255,255,.8);border:none;box-shadow:1px 1px 3px rgba(0,0,0,.6)}.city-search:focus{outline-offset:5px}.city-search__label{position:absolute;left:10px;line-height:36px;font-weight:bold;color:#000}.city-search__submit{font-family:"Roboto",sans-serif;font-size:1.1rem;position:absolute;right:1px;height:34px;top:1px;border-radius:10px;border:1px solid transparent;background-color:#63bc10;color:#000;padding-left:10px;padding-right:10px;transition:background-color .5s;font-weight:700;cursor:pointer}.city-search__submit:hover{background-color:#a1c820}.city-search__submit:focus{background-color:#eacd10;outline:none;border-color:#000;border-width:2px}@keyframes lightning{29%{background:linear-gradient(0deg, #9c9c9c 0%, #252525 30%);color:#fff}30%{background:#fff2a7;color:#000}33%{background:linear-gradient(0deg, #9c9c9c 0%, #252525 30%);color:#fff}34%{background:#fff2a7;color:#000}36%{background:linear-gradient(0deg, #9c9c9c 0%, #252525 30%);color:#fff}}@keyframes drop{0%{top:0%;opacity:0}80%{top:50%;opacity:1}100%{top:80%;opacity:0}}@keyframes move-in{0%{background-position:center -300px}100%{background-position:center 0}}@keyframes drifting{0%{background-position:-800px 0}100%{background-position:0 0}}body[data-weather^="2"]{background:#252525;background:linear-gradient(0deg, #9c9c9c 0%, #252525 30%);color:#fff;animation:lightning ease-in-out 8s infinite}@media(prefers-reduced-motion){body[data-weather^="2"]{animation:none}}body[data-weather^="3"]{background:#0066a7;background:linear-gradient(0deg, white 0%, #0066a7 30%);color:#fff}body[data-weather^="5"]{background:#003f68;background:linear-gradient(0deg, white 0%, #003f68 30%);color:#fff}body[data-weather^="6"]{background:#aee1e4;background:linear-gradient(180deg, #aee1e4 0%, #e1e1e1 50%, #aee1e4 100%);color:#000}body[data-weather^="7"]{background:#fff;background:linear-gradient(180deg, #c5bcad 0%, white 80%);color:#000}body[data-weather^="8"]{background:#1dbcfd;background:linear-gradient(180deg, #1dbcfd 0%, white 100%);color:#000}body[data-weather^="2"] .container,body[data-weather^="3"] .container,body[data-weather^="5"] .container,body[data-weather^="6"] .container,body[data-weather="801"] .container,body[data-weather="802"] .container,body[data-weather="803"] .container,body[data-weather="804"] .container{background-image:url(../clouds.png);background-repeat:repeat-x;background-position:top center;animation:move-in ease-in 1s forwards}body[data-weather="801"] .container,body[data-weather="802"] .container,body[data-weather="803"] .container,body[data-weather="804"] .container{animation-delay:1.2s;animation:drifting linear 15s infinite}.precip{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:space-around;overflow:hidden}.drop{position:relative;display:inline-block;width:5px;height:5px;background-color:#fff;border-radius:50%;animation:drop ease-in 1s infinite}.drop:nth-child(3n){margin-top:200px}.drop:nth-child(2n){animation-delay:.3s}.drop:nth-child(4n){opacity:.7}/*# sourceMappingURL=site.css.map */