:root{--blue-1: #3C429E;--blue-1: #4C52AD;--yellow-1: #F2C742;--white-1: #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-color:var(--blue-1);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-left-radius:20px;border-top-right-radius:20px}.upper-data img{position:absolute;top:0;left:0;width:100%;height:100%}.lower-data{position:relative;overflow:hidden;width:100%;height:50%;border-bottom-left-radius:20px;border-bottom-right-radius:20px;padding:1em;display:flex;flex-direction:column}.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-1);font-size:1.2em;font-weight:700;text-align:center}.temperature{color:var(--white-1);font-size:4em;font-weight:900;text-align:center}.more-info-lable{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-lable{width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center}.info-block-lable img{width:3em}.info-block-lable span{color:var(--white);font-size:.9em}.info-block-value{width:50%;display:flex;justify-content:flex-start;align-items:center;color:var(--white);font-size:20px}.search{margin-bottom:1em;text-align:center}.search input{background-color:var(--shadow-light);outline:none;border:none;border-radius:20px;padding:1em;color:var(--grey-1);font-size:.8em;text-align:center}.search button{margin-left:.5em;padding:1em 2em;font-size:.8em;font-weight:700;color:var(--white-1);background-color:var(--yellow-1);border:none;border-radius:20px;cursor:pointer;box-shadow:2px 2px 8px var(--shadow-dark);transition:all .3s ease-in-out}.search button:hover{background-color:#e0b93a;transform:translateY(-2px);box-shadow:4px 4px 12px var(--shadow-dark)}