@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(to right,#614385,#516395);font-family:Roboto,sans-serif}.weather__container{max-width:350px;margin:0 auto;display:flex;justify-content:center;flex-direction:column;gap:50px;overflow:hidden;padding:15px;position:relative}.search-wrapper{height:49px;overflow:hidden;transition:height 1s ease}.weather__input{width:100%;padding:15px;border-radius:20px;opacity:.2;border:2px solid purple}.text-hint{font-size:15px;opacity:.2;color:#fff;padding-left:10px;margin-top:15px}.common-info__wrapper{display:flex;flex-direction:column;gap:10px;border-bottom:2px solid #516395;padding-bottom:15px}.weather__info{display:flex;flex-direction:column;gap:15px;background:purple;padding:20px;border-radius:20px;box-shadow:0 0 20px 5px #80008099;transform:translate(380px);transition:transform .6s ease;visibility:hidden;opacity:.3}.weather__info p{color:#fff}.weather__info.visible{transform:translate(0);visibility:visible}