:root{--background-gradient: linear-gradient(to bottom, #974EC3, #504099, #2c2353);--blue-1: #313866;--blue-2:linear-gradient(to bottom, #974EC3, #504099, #2c2353);--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{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:16px;width:100%;height:100vh;background:var(--background-gradient);display:flex;justify-content:center;align-items:center}.container{width:400px;height:80vh;background-color:var(--blue-2);border-radius:20px;box-shadow:10px 10px 10px var(--shadow-dark)}.upper-data{position:relative;overflow:hidden;width:100%;height:50%;border-top-right-radius:20px;border-top-left-radius:20px}.lower-data{position:relative;overflow:hidden;width:100%;height:50%;border-bottom-right-radius:20px;border-bottom-left-radius:20px;padding:1em;display:flex;flex-direction:column}.upper-data img{max-width:100%;max-height:100%;position:absolute;top:0;left:0;width:100%;height:100%}.weather-data{position:relative;z-index:1;width:100%;height:100%;background-color:var(--shadow-dark);display:flex;flex-direction:column;align-items:center;justify-content:center}.location{color:var(--white);text-align:center;font-size:1.2em}.temperature{color:var(--white);font-size:4em;text-align:center;font-weight:900}.more-info-label{color:var(--white)}.more-info-container{flex:1;background-color:var(--shadow-light);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%;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:4em}.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)}