@import"https://fonts.googleapis.com/css?family=Montserrat:400,700,900&display=swap";:root{--gradient: linear-gradient(135deg, #72edf2 10%, #5151e5 100%)}*{box-sizing:border-box;line-height:1.25em}.clear{clear:both}body{margin:0;width:100%;min-height:100vh;font-family:Montserrat,sans-serif;background-color:#343d4b;display:flex;align-items:center;justify-content:center}.searchBox{display:flex;max-width:500px;align-items:center;justify-content:space-between;gap:8px;background:#222831;border-radius:50px;position:relative;margin:3rem auto}.inputContainer{display:flex;align-items:center;justify-content:space-between;width:100%}.searchButton{color:#fff;position:absolute;right:8px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#72edf2 10%,#5151e5 100%);border:0;display:inline-block;transition:all .3s cubic-bezier(.23,1,.32,1)}button:hover{color:#fff;background-color:#1a1a1a;box-shadow:#00000080 0 10px 20px;transform:translateY(-3px)}button:active{box-shadow:none;transform:translateY(0)}.searchInput{border:none;background:none;outline:none;color:#fff;font-size:15px;padding:24px 46px 24px 26px}.searchIcon{font-size:2rem}.container-card{border-radius:25px;box-shadow:0 0 70px -10px #0003;background-color:#222831;color:#fff;height:400px;display:flex;align-items:center;justify-content:center;margin:3rem auto}.weather-side{position:relative;height:100%;border-radius:25px;background-image:url(https://images.unsplash.com/photo-1559963110-71b394e7494d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80);width:300px;box-shadow:0 0 20px -10px #0003;transition:transform .3s ease;transform:translateZ(0) scale(1.02) perspective(1000px);float:left}.weather-side:hover{transform:scale(1.1) perspective(1500px) rotateY(10deg)}.weather-gradient{position:absolute;width:100%;height:100%;top:0;left:0;background-image:var(--gradient);border-radius:25px;opacity:.8}.date-container{position:absolute;top:25px;left:25px}.date-dayname{margin:0}.date-day{display:block}.location{display:inline-block;margin-top:10px}.location-icon{display:inline-block;height:.8em;width:auto;margin-right:5px}.weather-container{position:absolute;bottom:25px;left:25px}.weather-icon{height:60px;width:auto}.weather-temp{margin:0;font-weight:700;font-size:4em}.weather-desc{margin:0;text-transform:capitalize}.info-side{position:relative;float:left;height:100%;padding-top:25px}.today-info{padding:15px;margin:0 25px 25px;box-shadow:0 0 50px -5px #00000040;border-radius:10px}.today-info>div:not(:last-child){margin:0 0 10px}.today-info>div .title{float:left;font-weight:700}.today-info>div .value{float:right}.week-list{list-style-type:none;padding:0;margin:10px 35px;box-shadow:0 0 50px -5px #00000040;border-radius:10px}.week-list>li{float:left;padding:15px;cursor:pointer;transition:.2s ease;border-radius:10px}.week-list>li:hover{transform:scale(1.1);background:#fff;color:#222831;box-shadow:0 0 40px -5px #0003}.week-list>li.active{background:#fff;color:#222831;border-radius:10px}.week-list>li .day-name{display:block;margin:10px 0 0;text-align:center}.week-list>li .day-icon{height:30px;width:auto;margin:0 auto}.week-list>li .day-temp{display:block;text-align:center;margin:10px 0 0;font-weight:700}.location-container{padding:25px 35px}.location-button{outline:none;width:100%;box-sizing:border-box;border:none;border-radius:25px;padding:10px;font-family:Montserrat,sans-serif;background-image:var(--gradient);color:#fff;font-weight:700;box-shadow:0 0 30px -5px #00000040;cursor:pointer;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.location-button:hover{transform:scale(.95)}.location-button .feather{height:1em;width:auto;margin-right:5px}.no-data{color:#fff;text-align:center;font-size:2rem}.spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.spinner{font-size:3rem;color:#fff;animation:spin 1s linear infinite}@media (max-width: 800px){.container-card{display:block}.weather-side,.info-side{width:100%;float:none}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}