:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:flex-start;min-width:100%;min-height:100vh}#root{min-width:100%;padding-left:1rem;padding-right:1rem;font-family:Bai Jamjuree,sans-serif}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}header{position:absolute;top:0;height:100px;font-family:Trirong,serif;color:#0127c8;font-weight:600;font-size:1.75rem}main{margin-top:100px;padding-left:8rem;padding-right:8rem;width:100%;max-height:calc(100vh - 220px);overflow:scroll}footer{position:absolute;bottom:0;width:100%;left:0;padding-left:1rem;padding-right:1rem;min-height:120px;font-size:1rem}@media screen and (max-width:1200px){main{padding-left:4rem;padding-right:4rem}}@media screen and (max-width:1000px){html{font-size:14px}main{padding-left:1rem;padding-right:1rem}}@media screen and (max-width:500px){footer{font-size:.75rem}}button{color:#fff;font-size:1rem;height:42px}label{font-size:1rem}.chakra-field__root{margin-bottom:1.5rem!important}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}