:root{--blue-1: #245669;--blue-2: #59b6ce;--yellow-1: #fac742;--white: #fff;--grey-1: #ededed;--shadow-dark: rgba(0, 0, 0, .3);--shadow-light: rgba(255, 255, 255, .1)}*{margin:0;padding:0;box-sizing:border-box}body{width:100%;height:100vh;background-color:var(--blue-1);display:flex;justify-content:center;align-items:center}i{font-size:2em;text-shadow:rgb(44,144,231) 0 0 13px}.bi-thermometer-low{color:#1216f8}.bi-thermometer-high{color:#b6a026}.bi-moisture{color:#59b6ce}.bi-wind{color:#f0f8ff}footer{text-align:center;color:var(--grey-1)}.form{margin:5px auto;display:flex;justify-content:space-around}.form input,.form button{margin:2px 5px;border-width:0px;padding:5px;border-radius:6px;box-shadow:inset #a3aab1 0 0 9px,#444a50 2px 2px 5px}.container{border-radius:20px;overflow:hidden;background-color:var(--shadow-light);box-shadow:10px 10px 10px var(--shadow-dark)}.upper{position:relative;overflow:hidden;width:100%;height:35%;text-shadow:rgb(68,74,80) 1px 1px 4px,rgb(68,74,80) 2px 2px 5px}.upper img{position:absolute;top:0;left:0;width:100%}.lower{position:relative;overflow:hidden;width:100%;height:55%;padding:.5em;display:flex;flex-direction:column}.weather{position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.location{color:var(--white);font-size:1.2em}.temperature{color:var(--white);font-size:4em;font-weight:900}.more-info-label{color:var(--white)}.more-info-container{flex:1;background-color:var(--shadow-dark);border-bottom-left-radius:20px;border-bottom-right-radius:20px;margin-top:1em;display:flex;flex-direction:row;flex-wrap:wrap}.info-block{width:50%;margin:10px auto;display:flex;flex-direction:row}.info-block-label{width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center}.info-block-label img{width:3em;border-radius:50%}.info-block-label span{color:var(--white);font-size:.8em}.info-block-value{width:50%;display:flex;justify-content:flex-start;align-items:center;color:var(--white)}@media screen and (min-width: 300px){.container{width:99vw;height:90vh}}@media screen and (min-width: 480px){.container{width:80vw;height:85vh}}@media screen and (min-width: 768px){.container{width:55vw;height:80vh}}@media screen and (min-width: 1280px){.container{width:35vw;height:80vh}}@media screen and (min-width: 1600px){.container{width:25vw;height:80vh}}