@import"https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap";:root{--white-text: #fff;--black-text: #000;--white-color: #fff;--black-color: #000;--background: linear-gradient(60deg, #4b0082, #ff4500);--background-alert: linear-gradient(170deg, #000 45%, #f00);scrollbar-width:none}*{margin:0;padding:0}html{font-size:62.5%}body{font-family:Cinzel Decorative,cursive;font-size:20px;height:100vh;color:var(--white-color);background-color:#212529;min-width:320px}div.navBar{background:var(--background);color:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0}h1.logo{font-size:20px;color:inherit}form.search input{width:130px;background-color:transparent;border:none;border-bottom:2px solid var(--white-color);border-right:1px solid #ffffff44;padding:5px;outline:none;color:inherit;transition:.25s ease-in-out}form.search input::placeholder{color:inherit}form.search button{cursor:pointer;background-color:transparent;font-size:15px;font-weight:700;border:none;color:inherit;border-bottom:2px solid var(--white-color);padding:5px;transition:.25s ease-in-out}div.content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;padding:50px 0;margin:0 10px;position:relative}div.content p.error{font-size:16px}div.content p.loader{width:48px;height:48px;border:5px solid #fff;border-radius:50%;display:inline-block;box-sizing:border-box;position:relative;animation:pulse 1s linear infinite}div.content p.loader:after{content:"";position:absolute;width:48px;height:48px;border:5px solid #fff;border-radius:50%;display:inline-block;box-sizing:border-box;left:50%;top:50%;transform:translate(-50%,-50%);animation:scaleUp 1s linear infinite}@keyframes scaleUp{0%{transform:translate(-50%,-50%) scale(0)}60%,to{transform:translate(-50%,-50%) scale(1)}}@keyframes pulse{0%,60%,to{transform:scale(1)}80%{transform:scale(1.2)}}div.city{padding:0 10px;font-size:18px}div.city h2,div.info h2{font-size:inherit;text-align:center;display:inline;padding-right:10px}ul.weather{list-style:none;display:flex;flex-direction:column;gap:15px;width:100%}li.day{display:flex;align-items:center;gap:15px;background:var(--background);border-radius:5px;padding:5px;cursor:pointer}li.alert{background:var(--background-alert);font-weight:700}li.day p{font-size:15px;width:100%;text-align:center}div.info{width:100%;max-width:500px;height:400px;position:absolute;top:5px;background-color:#323630;border:1px solid #fff;padding:5px;display:flex;flex-direction:column;align-items:center;gap:10px;overflow:scroll;scrollbar-width:none}div.info .closeModal{background-color:transparent;border:none;color:inherit;position:absolute;right:5px;top:3px;cursor:pointer;font-size:13px}div.info p,div.info span{font-size:13px}div.alertMessage{display:flex;flex-direction:column;align-items:center;gap:15px;color:red;font-weight:700}div.alertMessage p{font-size:13px}div.alertMessage div{display:flex;flex-direction:column;align-items:center;gap:5px}div.alertMessage span{font-size:13px;color:inherit}@media screen and (min-width: 480px){div.navBar{flex-direction:row;justify-content:space-around}h1.logo{font-size:25px}form.search input{width:140px;font-size:18px}form.search button{padding:7px}div.content{margin:0 25px}div.content p.error{font-size:18px}div.content p.loader{width:55px;height:55px}div.content p.loader:after{width:55px;height:55px}div.city{padding:0 13px;font-size:20px}ul.weather{flex-direction:row;gap:25px;flex-wrap:wrap;justify-content:center}li.day{flex-direction:column;width:100px;padding:10px}li.day span{font-size:30px}li.day p{font-size:16px}div.info{padding:10px;gap:15px}div.info .closeModal{right:10px;font-size:15px}div.info p,div.info span,div.alertMessage p,div.alertMessage span{font-size:15px}}@media screen and (min-width: 768px){div.navBar{justify-content:center;gap:20%}h1.logo{font-size:30px}form.search input{width:200px;font-size:22px}form.search button{padding:6px 10px;font-size:18px}div.content{padding:100px 0;gap:50px}div.content p.error{font-size:28px}div.content p.loader{width:75px;height:75px}div.content p.loader:after{width:75px;height:75px}div.city{font-size:30px}ul.weather{gap:30px}li.day{width:150px;height:200px;border-radius:25px 0}li.day span{font-size:40px}li.day p{font-size:22px}div.info{max-width:700px;height:500px;top:20px;padding:20px;gap:20px}div.info .closeModal{top:5px;right:10px;font-size:20px}div.info p,div.info span{font-size:18px;text-align:center}div.alertMessage{gap:20px}div.alertMessage p{font-size:18px}div.alertMessage div{flex-direction:row;gap:100px}div.alertMessage span{font-size:18px}}