@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap");*{font-family:IBM Plex Sans Thai,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;font-size:14px;color:var(--colorThree)}a{text-decoration:none}footer,header{text-align:center}header{& h1{font-size:28px;font-weight:700;color:var(--colorOne)}& h1,a{text-decoration:none}}h2{font-size:25px;font-weight:700}.card h4{font-size:18px;font-weight:600}footer{& p{font-size:14px}}.t-700{font-weight:700}.t-color-light{color:var(--colorFive)}.block-title{font-weight:700}select.place-selector{text-align:center;font-size:16px;font-weight:600}.container-light{& p,div,h4{color:var(--colorThree)}& h4{font-weight:700}}.data-highlight p{font-size:50px}@keyframes text-marquee{0%{transform:translateX(100%)}to{transform:translateX(-100%)}}select{cursor:pointer;color:var(--colorOne);-moz-appearance:none;appearance:none;text-align-last:center;-webkit-appearance:none;line-height:normal;width:100%;padding:10px;margin-bottom:20px;border:transparent;border-radius:25px;background-color:var(--colorTwo);option{font-size:16px;color:var(--colorOne)}}.place-selector option:first-child{color:#999}svg.weather-icon{fill:var(--colorThree);width:24px;height:24px}:root{--colorOne:#020817;--colorTwo:#d6ff00;--colorThree:#faf9f7;--colorFour:#3673b9;--colorFive:#c4caee;--colorSix:#29654b;--borderTypeOne:3px solid var(--colorOne)}*{margin:0;box-sizing:border-box}body,html{height:100%;margin:0}body{background-color:var(--colorSix)}.body-wrapper{max-width:400px;margin:auto;overflow-x:hidden;padding:10px;display:flex;flex-direction:column;min-height:100vh}div.d-flex{justify-content:center}div.d-flex,div.d-flex-col-two{display:flex;align-items:center}div.d-flex-col-two{justify-content:space-between}div.d-flex-col{display:flex;flex-direction:column;align-items:center;justify-content:center}div.d-flex-row{flex-direction:row;align-items:stretch;gap:10px;& div{flex:1 1}}.main-container{flex:1 1}header img{width:150px;height:auto;cursor:pointer}header h1,header img{margin:15px 0}.header-text-run{white-space:nowrap;animation:text-marquee 20s linear infinite}.flex-row-two{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:20px;& div{flex:1 1}}.card{background-color:white;padding:24px;margin-bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,.08);border:var(--borderTypeOne)}.block-container{padding:20px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;flex-direction:column}.block-current{& .current-infos-wrapper{width:100%;min-width:150px}& .info-wrapper{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}& img{width:150px;height:auto;margin-bottom:20px}}.update-container{margin-bottom:10px;& p{line-height:.8}}.container-data{border-radius:20px;flex-direction:column;justify-content:space-between;padding:20px;& div{width:100%}}.container-light{background-color:var(--colorThree);& p,h4{color:var(--colorSix)}}.data-highlight{width:100%;text-align:left}.court-container{border:4px solid var(--colorThree);& p{text-align:center}& .court-halftop-top,.court-halfbottom-bottom,.court-halftop-bottom{min-height:140px}& .court-halftop-top,.court-halfbottom-bottom{display:flex;align-items:center;justify-content:center}& .court-halftop-top,.court-halftop-bottom{border-bottom:4px solid var(--colorThree)}& .court-halftop-bottom{display:flex;flex-direction:row;flex:1 1;background-color:red}}.forecastHours-container{justify-content:flex-start;overflow-x:auto;flex-direction:row}.card-hour{display:flex;flex-direction:column;justify-content:center;width:100px;flex:0 0 auto;text-align:center;& img{width:50px;height:auto}}.card-day{width:100%;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;padding:20px 0;& img{height:50px;width:auto}& .d-flex-col{width:90px;& div{width:100%;text-align:right}}}.flex-current-info{gap:20px}.block-title{width:100%;padding:20px}.temp-highlight{font-size:70px;font-weight:700}.container-linebreak{height:2px;background-color:var(--colorThree);width:200px}footer{padding-bottom:10px}@media only screen and (max-width:450px){.body-wrapper{min-height:100svh}.forecastHours-container::-webkit-scrollbar{display:none}.forecastHours-container{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}}