@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;700&display=swap";:root{--text: #2c2c2f;--whitebg: #edf0fa;--blackbg: #202020;--red: #d74f49;--yellow: #f2c550;--green: #5e9c5a;--blue: #4170ca;--highlight: #63b0f0;--error: #d82b2b}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{font-family:IBM Plex Sans Thai,sans-serif;color:var(--text);font-weight:400;font-size:10px}h1{font-size:3.7rem;font-weight:700;line-height:70px}h2{font-size:3.2rem;font-weight:700;line-height:20px}h3{font-size:22px;font-weight:400}p,a{font-size:1.8rem;font-weight:400;text-decoration:none;color:inherit}button,input[type=submit]{padding:1rem 2rem;border-radius:.5rem;border-color:transparent;background-color:#fff;box-shadow:0 5px 7px #0000001a;font-family:ibm plex sans thai,sans-serif;transition:scale .2s ease-in-out}button:hover,input[type=submit]:hover{cursor:pointer;scale:1.05}button:active,input[type=submit]:active{scale:.95}.bad{border:1px solid var(--error);color:var(--error);box-shadow:none}.icon-button{padding:1rem;border-radius:.5rem;aspect-ratio:1/1;background-color:var(--highlight);box-shadow:0 5px 7px #0000001a;font-family:ibm plex sans thai,sans-serif;width:2.4em}.page{width:100%;min-height:100vh;display:flex;flex-direction:row;flex-wrap:wrap;gap:10rem;align-items:center;padding:5rem;background-color:var(--whitebg)}.section{min-height:100%;display:flex;flex-direction:column;gap:1rem}@media (max-width: 768px){.page{padding:1.2rem}}form{display:flex;flex-direction:column;gap:1rem}form label{font-weight:700}form input,form select{padding:.5rem 1rem;padding:1rem 2rem;border-radius:.5rem;border-color:transparent;box-shadow:0 5px 7px #0000001a;font-family:ibm plex sans thai,sans-serif;transition:scale .2s ease-in-out}form select{-webkit-appearance:none;-moz-appearance:none;appearance:none}form input[type=submit],form button[type=submit]{background-color:var(--green);color:#fff;border:none}.score-changer{display:flex;flex-direction:column;align-items:center;width:14rem;padding:1.5rem;border-radius:1.5rem;color:#fff}.score-changer button{background-color:inherit;color:#fff}.red{background-color:var(--red)}.yellow{background-color:var(--yellow)}.green{background-color:var(--green)}.blue{background-color:var(--blue)}