.button{padding:5px 10px;font-size:16px;background-color:#007bff;color:#fff;border:none;border-radius:5px}.button:hover{background-color:#0056b3}p{margin:5px 0}*{margin:0;padding:0;font-family:Poppins,sans-serif,Arial,Helvetica,sans-serif;box-sizing:border-box}.search{background:url('data:image/svg+xml,<%3Fxml version="1.0" encoding="iso-8859-1"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 488.4 488.4" xml:space="preserve"><g><g><path d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7S381.9,104.65,381.9,203.25z"/></g></g></svg>')}.sunrise{width:60px;aspect-ratio:1;display:grid;border-radius:50%;background:radial-gradient(circle 15px,#ffd738 90%,rgba(0,0,0,0));filter:drop-shadow(0px 0px 1px #ffd738);animation:l2 1s infinite alternate linear}.sunrise:before,.sunrise:after{content:"";grid-area:1/1;border-radius:50%;--g: no-repeat linear-gradient(#ffd738 0 0) 50%;background:var(--g)/100% 5px,var(--g)/5px 100%;-webkit-mask:radial-gradient(farthest-side,rgba(0,0,0,0) 60%,#000 61%)}.sunrise:after{transform:rotate(45deg)}@keyframes l2{to{filter:drop-shadow(0px 0px 20px #ffd738)}}.sunset{width:50px;aspect-ratio:1;background:#ffd738;border-radius:50%;display:grid}.sunset:before,.sunset:after{content:"";grid-area:1/1;background:inherit;clip-path:polygon(0 0,50% 40%,100% 0,60% 50%,100% 100%,50% 60%,0 100%,40% 50%);animation:l1 1s infinite alternate;transform:rotate(var(--r, 0)) scale(1)}.sunset:after{--r: 45deg}@keyframes l1{to{transform:rotate(var(--r, 0)) scale(1.4)}}.weather-navigator{background-color:#fff;padding:10px;display:flex;align-items:center;justify-content:center}nav a{border:1px solid #007bff;border-radius:6px;background-color:#f8f9fa;padding:5px;margin-right:15px;text-decoration:none;color:#007bff}nav a:hover{color:#f8f9fa;background-color:#007bff}.description-card{display:flex;padding:2rem 1.5rem;align-items:center;gap:1rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px}.description-card__image{width:2rem;height:2rem;opacity:.5rem}.description-card__image--bottom{align-self:flex-end}.description-card__icon{width:100%;height:100%}.description-card--reverse{flex-direction:row-reverse;justify-content:center}.description-card--no-shadow{box-shadow:none}.description-card--large{padding:3rem;gap:3rem}.description-card__text{color:#fff}.description-card__text--large{font-size:2.5rem}.description-card__text--small{font-size:.875rem}.loader-cloud{width:108px;height:60px;color:#269af2;--c: radial-gradient(farthest-side, currentColor 96%, #0000);background:var(--c) 100% 100%/30% 60%,var(--c) 70% 0/50% 100%,var(--c) 0 100%/36% 68%,var(--c) 27% 18%/26% 40%,linear-gradient(currentColor 0 0) bottom/67% 58%;background-repeat:no-repeat;position:relative}.loader-cloud:after{content:"";position:absolute;inset:0;background:inherit;opacity:.4;animation:l7 1s infinite}@keyframes l7{to{transform:scale(1.8);opacity:0}}.loader-sun{width:80px;height:40px;border-radius:100px 100px 0 0;position:relative;overflow:hidden}.loader-sun:before{content:"";position:absolute;inset:0 0 -100%;background:radial-gradient(farthest-side,#ffd738 80%,rgba(0,0,0,0)) left 70% top 20%/15px 15px,radial-gradient(farthest-side,#020308 92%,rgba(0,0,0,0)) left 65% bottom 19%/12px 12px,radial-gradient(farthest-side,#ecfefe 92%,rgba(0,0,0,0)) left 70% bottom 20%/15px 15px,linear-gradient(#9eddfe 50%,#020308 0);background-repeat:no-repeat;animation:l5 2s infinite}@keyframes l5{0%,20%{transform:rotate(0)}40%,60%{transform:rotate(.5turn)}80%,to{transform:rotate(1turn)}}.weather{display:flex;justify-content:center;padding:2rem 8rem;gap:2rem;z-index:1;position:relative;height:100vh;overflow:hidden}.weather__image-card{width:400px;height:100%;border:4px soild black;background-image:url(normal.fe2c97daaca283dd.jpeg);border-radius:1.25rem;background-size:cover}.weather__image{height:100%;width:100%;background-repeat:no-repeat;background-size:cover;border-radius:1.25rem}.weather__image.day{background-image:url(day-small.66b734d1480e9ac9.jpeg)}.weather__image.dusk{background-image:url(dusk.small.54f8cb8e01451c1f.jpg)}.weather__image.dawn{background-image:url(dawn-small.c5f13f11f6e7396e.jpeg)}.weather__image.night{background-image:url(night-small.f6ff6ff5ea7443ae.jpeg)}.weather__image.normal{background-image:url(normal.fe2c97daaca283dd.jpeg)}.weather__left{position:relative;min-height:100%;display:grid;place-items:center;min-width:400px;flex-basis:400px}.weather__left-top{position:absolute;display:flex;justify-content:space-between;top:20px;width:100%;padding:.5rem 1rem}.weather__clock{color:#fff;position:relative}.weather__clock:before{content:"";position:absolute;left:-.5rem;background-color:#fff;height:100%;width:2px}.weather__time{font-size:20px}.weather__date{font-size:10px}.weather__country{font-size:24px;color:#fff}.weather__form{position:relative;display:flex;gap:1rem}.weather__input{padding:1rem 2rem .5rem;background:none;border-width:0 0 2px 0}.weather__input:focus{border-width:0 0 2px 0}.weather__input:focus-visible{border-width:0 0 2px 0;outline:none}.weather__icon{position:absolute;left:0;top:1rem}.weather__icon-img{width:1rem;height:1rem}.weather__button{padding:.5rem;background:none;border:1px solid black;border-radius:.5rem;cursor:pointer}.weather__button:hover{background:rgba(180,212,255,.75);opacity:.8}.weather__right{display:grid;place-items:center;box-shadow:#176b8740 0 14px 28px,#176b8738 0 10px 10px;padding:4rem 1rem;border-radius:1.25rem;height:100%;min-width:500px;flex-basis:500px;background-color:#b4d4ff40}.weather__right-top{padding-bottom:2rem}.weather__content{padding:1rem 2rem;display:grid;place-items:center}.weather__content-footer{display:flex;justify-content:center;gap:1rem}.weather__description{display:flex;gap:1rem}.weather__description-card{display:flex}.weather__large{font-size:2rem}.weather__large span{font-size:1rem}.weather-background-container{height:100vh;width:100%;overflow:hidden;position:absolute}.weather-background-image{height:100%;width:100%;opacity:.3}