@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Poppins:wght@100;200;400&display=swap);.card{background-color:hsla(0,0%,100%,.7);border-radius:15px;box-shadow:0 3px 5px 0 #00000047;height:100%;margin:15px;padding:15px}.card>.header{margin:10px 10px 15px}.card>.header h1{font-size:3rem;height:3rem;line-height:3rem;margin-bottom:0}.card>.header .desc h4{display:inline;height:1.3rem}.card>.header .desc h4:not(:last-child):after{content:"．";margin:0 5px}.card>.header h4{color:#707070}.card .body .weather>.header{align-items:center;display:flex;justify-content:space-between;margin:0 30px 30px}.card .body .weather>.header .temp{align-items:flex-end;display:flex}.card .body .weather>.header .temp h1{font-size:6rem;font-weight:200;height:6rem;line-height:6rem}.card .body .weather>.header .temp:after{color:#3a3a3a;content:"°C";font-size:2rem;font-weight:200;margin-left:8px}.card .body .weather>.header .status img{width:6rem}.card .body .weather>.extra{display:grid;grid-template-columns:auto auto}.card .body .weather>.extra .weatherBlock{align-items:center;display:flex;margin:8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.card .body .weather>.extra .weatherBlock span{color:#323232;font-size:20px;font-weight:400;height:20px;line-height:20px}.card .footer>div{height:15px;position:relative;width:100%}.card .footer>div>div{display:flex;position:absolute;right:0}.card .footer>div>div span{color:#707070;height:25px}.card .footer>div>div .refreshIcon{align-items:center;display:flex;justify-content:center}.skt.card>.header h1{-webkit-animation:sktAni 2s linear infinite;animation:sktAni 2s linear infinite;background-color:grey;border-radius:5px;content:"";width:250px}.skt.card>.header .desc{margin:5px 0}.skt.card .body .weather>.header .temp h1,.skt.card>.header .desc{content:"";width:150px}.skt.card .body .weather>.header .status,.skt.card .body .weather>.header .temp h1,.skt.card>.header .desc{-webkit-animation:sktAni 2s linear infinite;animation:sktAni 2s linear infinite;background-color:grey;border-radius:5px}.skt.card .body .weather>.header .status{height:6rem;width:6rem}.skt.card .body .weather>.extra .weatherBlock span{width:100%}.skt.card .body .weather>.extra .weatherBlock span,.skt.card .footer>div>div span:not(:first-child){-webkit-animation:sktAni 2s linear infinite;animation:sktAni 2s linear infinite;background-color:grey;border-radius:5px}.skt.card .footer>div>div span:not(:first-child){width:80px}.skt.card .footer>div>div .refreshIcon svg{-webkit-animation:round .8s infinite;animation:round .8s infinite}@-webkit-keyframes sktAni{0%{background-color:#79797980}50%{background-color:#55555580}to{background-color:#79797980}}@keyframes sktAni{0%{background-color:#79797980}50%{background-color:#55555580}to{background-color:#79797980}}@-webkit-keyframes round{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}@keyframes round{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}*{font-family:Poppins,Noto Sans TC,sans-serif;padding:0;transition:.8s}*,body{margin:0}body{background-color:#666;background:linear-gradient(135deg,#5f32ff,#1c3a93 34%,#1c6daf 68%,#7db9e8);min-height:100vh;width:100%}#app{height:100%}