html{box-sizing:border-box;font-size:62.5%}*,:after,:before{box-sizing:inherit;margin:0;padding:0}body{background:url(https://img.freepik.com/premium-vector/stars-night-sky-background_697972-268.jpg?w=900);background-position:50%;font:400;font-family:Courier New,Courier,monospace;font-size:1.8rem;padding:2rem}sup{bottom:0;font-size:4rem;position:relative;right:0;text-transform:none}.search-bar{background-color:hsla(0,0%,100%,.8);font:inherit;font-weight:700;padding:10px;right:2rem;width:30rem}.search-bar,.weathercard{border-radius:7px;-webkit-border-radius:7px;-moz-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;position:absolute}.weathercard{animation:showcard .3s cubic-bezier(.26,.53,.74,1.48) forwards;-webkit-animation:showcard .7s cubic-bezier(.26,.53,.74,1.48) forwards;background-color:hsla(0,0%,100%,.9);display:flex;flex-direction:column;font:inherit;height:50rem;left:2rem;max-width:70rem;padding:3rem 4rem;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform-origin:center;width:70rem}.weathercard__name{font-size:3rem;font-weight:700;text-transform:uppercase}.weathercard__name span{font-size:3rem;font-weight:400;text-transform:uppercase}.weathercard__condition-text{font-size:2rem}.weathercard__condition-icon{align-items:center;display:flex;justify-content:center;position:relative}.weathercard__condition-icon img{height:15rem;top:0;width:15rem}.weathercard__time{background-color:#adff2f;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;padding:.5rem 1rem;position:absolute;right:2rem;top:1rem}.weathercard__temp{font-size:8rem;font-weight:700;text-transform:uppercase}.div_wrapper{align-items:center;display:flex;gap:2rem;justify-content:center}.div_wrapper>div:nth-child(3){font-style:italic;font-weight:700}.div_wrapper>div:nth-child(3) span{font-style:normal;font-weight:400}.div_wrapper>div:nth-child(2){background-color:#d3d3d3;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;height:10rem;width:3px}.weathercard__footer{display:flex;justify-content:space-between;margin-top:auto}.weathercard__footer span{font-weight:700}@keyframes showcard{0%{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.1)}20%{opacity:1}to{left:2rem;top:50%;transform:scale(1) translateY(-50%);-webkit-transform:scale(1) translateY(-50%);-moz-transform:scale(1) translateY(-50%);-ms-transform:scale(1) translateY(-50%);-o-transform:scale(1) translateY(-50%)}}@keyframes showerror{0%{left:50%;opacity:0;top:50%;transform:translate(-50%,-50%) scale(.1)}20%{opacity:1}to{left:50%;top:50%;transform:translate(-50%,-50%) scale(1);-webkit-transform:translate(-50%,-50%) scale(1);-moz-transform:translate(-50%,-50%) scale(1);-ms-transform:translate(-50%,-50%) scale(1);-o-transform:translate(-50%,-50%) scale(1)}}.error_info{animation:showerror .3s cubic-bezier(.26,.53,.74,1.48) forwards;-webkit-animation:showerror .3s cubic-bezier(.26,.53,.74,1.48) forwards;background-color:hsla(0,0%,100%,.8);border-radius:1rem;-webkit-border-radius:1rem;-moz-border-radius:1rem;-ms-border-radius:1rem;-o-border-radius:1rem;display:block;padding:4rem 8rem}.error_info,.lds-grid{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%)}.lds-grid{display:inline-block;height:80px;opacity:1;transition:opacity 2s;-webkit-transition:opacity 2s;-moz-transition:opacity 2s;-ms-transition:opacity 2s;-o-transition:opacity 2s;width:80px}.lds-grid div{animation:lds-grid 1.2s linear infinite;background:#fff;border-radius:50%;height:16px;position:absolute;width:16px}.lds-grid div:first-child{animation-delay:0s;left:8px;top:8px}.lds-grid div:nth-child(2){animation-delay:-.4s;left:32px;top:8px}.lds-grid div:nth-child(3){animation-delay:-.8s;left:56px;top:8px}.lds-grid div:nth-child(4){animation-delay:-.4s;left:8px;top:32px}.lds-grid div:nth-child(5){animation-delay:-.8s;left:32px;top:32px}.lds-grid div:nth-child(6){animation-delay:-1.2s;left:56px;top:32px}.lds-grid div:nth-child(7){animation-delay:-.8s;left:8px;top:56px}.lds-grid div:nth-child(8){animation-delay:-1.2s;left:32px;top:56px}.lds-grid div:nth-child(9){animation-delay:-1.6s;left:56px;top:56px}@keyframes lds-grid{0%,to{opacity:1}50%{opacity:.5}}