@import"https://fonts.googleapis.com/css2?family=Actor&family=Cal+Sans&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}.app{min-height:150vh;display:grid;background:#e2ffd4}.card{place-self:center;padding:40px;border-radius:10px;background-image:linear-gradient(37deg,#002418,#6e0f09 35%,red);display:flex;flex-direction:column;align-items:center}.search-bar{display:flex;align-items:center;gap:12px}.search-bar input{height:50px;border:none;outline:none;border-radius:40px;padding-left:35px;color:#626262;background-color:#e7f3e1;font-size:18px}.search-bar img{width:50px;padding:15px;border-radius:50%;cursor:pointer}.weather-icon{width:130px;margin:30px 0}.temperature{color:#fff;font-size:60px;line-height:1}.location{color:#fff;font-size:30px}.weather-data{width:100%;margin-top:40px;color:#fff;display:flex;justify-content:space-between}.weather-data .col{display:flex;align-items:flex-start;gap:12px;font-size:22px}.weather-data .col span{display:block;font-size:15px}.weather-data .col img{width:26px;margin-top:10px}body{display:flex;justify-content:center;align-items:center;height:100vh;background-image:url(/assets/banner-DPFw0msb.jpg);background-repeat:no-repeat;background-position:center;background-attachment:fixed;background-size:cover}.card{margin:0 auto;padding:2rem;width:350px;text-align:center;border-radius:10px;position:relative}.card:after,.card:before{--angle:0deg;content:"";position:absolute;height:100%;width:100%;background-image:conic-gradient(from var(--angle),transparent 70%,#456456,#ff4545,#003321,#00ffa6,rgb(0,159,222),#02106c,#ff0095,#ff4545);top:50%;left:50%;translate:-50% -50%;z-index:-1;padding:2px;border-radius:10px;animation:3s spin linear infinite}.card:before{filter:blur(1.5rem);opacity:1.5}@keyframes spin{0%{--angle:0deg}to{--angle:360deg }}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits:false ;}h1{font-size:50px;font-weight:bolder;font-family:Verdana,Geneva,Tahoma,sans-serif;text-align:center;translate:0% -80%;color:#fff}h1{color:transparent;position:relative;-webkit-text-stroke:0px white;color:#fff}h1:before{content:"WEATHER";position:absolute;width:0%;height:100%;overflow:hidden;color:#0ff;border-right:4px solid black;transition:1s ease-in-out}h1:hover:before{width:78.5%;filter:drop-shadow(0 0 10px black)}