@charset "UTF-8";html,body{margin:0;padding:0;scroll-behavior:smooth;font-family:Montserrat;background:#131313;color:#fff;width:100%;height:100%;display:grid;place-content:center}*{margin:0;padding:0;box-sizing:border-box}.card{background:linear-gradient(45deg,rgba(255,255,255,.02),rgba(255,255,255,.05));padding:2.5rem;border-radius:2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden}.card.not-available{padding:1rem}.card.not-available img{width:150px}.card.loading svg{animation:rotate 2s infinite linear}.card .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:9}.card .searchBar{width:100%;padding:2rem;border-radius:2rem;background:#181818;position:absolute;top:0;z-index:10}.card .searchBar form{width:100%;display:flex;flex-direction:row;align-items:center;gap:.35rem}.card .searchBar input,.card .searchBar button{outline:0;font-family:Montserrat;padding:.5rem;border-radius:.5rem;border:none;background:rgba(255,255,255,.02);color:#fff}.card .searchBar input{flex-grow:1;font-size:1rem;padding:.75rem 1rem;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.card .searchBar button{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.card__topInfo{display:flex;justify-content:space-between;align-items:center;width:400px}.card__topInfo .city{padding:.5rem .75rem;background:rgba(255,255,255,.05);border-radius:.5rem;font-size:.9rem;display:flex;align-items:center;gap:.75rem;cursor:pointer}.card__topInfo .time{font-size:1.2rem;letter-spacing:1px}.card__mainInfo{margin-top:1.5rem;margin-bottom:2.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;width:400px}.card__mainInfo img{width:70%}.card__mainInfo h3{font-size:1.5rem;text-align:center;max-width:400px}.card__bottomInfo{display:flex;justify-content:space-between;align-items:center;width:100%}.card__bottomInfo .line{font-size:1.1rem;display:flex;gap:.5rem;align-items:center}.card__bottomInfo .line:last-child{margin-bottom:0}.card__bottomInfo .line img{height:2rem}.card__bottomInfo .line:nth-child(1) img{height:3rem;aspect-ratio:1/1.6;object-fit:cover}.card__bottomInfo .temperature{font-size:5rem;font-weight:700;text-align:right;position:relative;padding-right:1.75rem}.card__bottomInfo .temperature:before{position:absolute;top:17.5%;right:0;content:"°C";font-size:1.25rem;color:#ffffff80}.card__bottomInfo .feelslike{font-size:.9rem;color:#ffffff80;text-align:right}@media only screen and (max-width: 500px){.card{padding:1.5rem}.card__topInfo,.card__mainInfo{width:calc(90vw - 2rem)}.card__mainInfo img{width:50%}.card__mainInfo h3{width:100%}.card .temperature{font-size:3.5rem}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}