html,body,span,iframe,h1,h2,h3,h4,pre,del,em,img,b,i,dl,dt,dd,ol,ul,li,form,table,tbody,tr,th,td,article,aside,footer,header,nav,section{margin:0;padding:0;border:0;outline:0;font-size:100%;backface-visibility:hidden;vertical-align:baseline;background:transparent;box-sizing:border-box;overflow-wrap:break-word;word-wrap:break-word}:root{--text:#444444;--link:#82be51;--link-hover:#ffffff;--link-hover-background:#ffc0cba9;--bold:#82be51;--back:white;--italic:#ffc0cb;--italic1:#ffc0cb;--italic2:#ffffff;--marker:#ffc0cb3a;--marker1:#ffc0cb3a;--marker2:ffc0cb3a;--highlight-text:#000000;--highlight-background:#82be5138;--h1-shadow:#82be517c;--h2-underline:#ffc0cb94;--h3-color:rgb(37,37,37);--h3-background:#82be5157;--page-height:100dvh;--page-width:100dvw;--page-margin:0;--page-padding:0;--page-background-color:#f1f1f1;--box-sizing:border-box;--display-none:none;--container-background:rgb(255,255,255);--border:#ffc0cb;--tab-display:grid;--tab-background-color:rgba(255,192,203,.333);--label-hover:#ffc0cb;--scrollbar:#b5b5ff;--scrollbar-width:0;--container-background-dark:#46223a;--text-dark:rgb(231,231,231);--border-dark:#1b070a;--h3-color-dark:rgb(223,223,223);--h3-background-dark:#293320}@font-face{font-display:swap;font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:300;src:url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-300.woff2') format('woff2')}@font-face{font-display:swap;font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:400;src:url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:500;src:url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-500.woff2') format('woff2')}@font-face{font-display:swap;font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:600;src:url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-600.woff2') format('woff2')}@font-face{font-display:swap;font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:700;src:url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-700.woff2') format('woff2')}::selection{color:var(--highlight-text);background:var(--highlight-background)}::-moz-selection{color:var(--highlight-text);background:var(--highlight-background)}::-webkit-scrollbar{width:var(--scrollbar-width);height:0;background-color:var(--main-box-background)}::-webkit-scrollbar-thumb{background-color:var(--scrollbar);border-radius:var(--scrollbar-width)}::-webkit-scrollbar-track{background-color:var(--main-box-background);border-radius:var(--scrollbar-width)}::-webkit-scrollbar-corner{background:var(--main-box-background)}*:before,*:after,*,::after,::before{box-sizing:border-box}html,body{display:flex;justify-content:center;margin:var(--page-margin);padding:var(--page-padding);font-family:'IBM Plex Sans Thai','IBM Plex Sans JP';font-size:1em;color:var(--text);background-color:var(--page-background-color);background-image:url('images/bg.jpg')}p{padding:0;margin:1em 0;text-indent:2em}p:last-child{margin-bottom:0}a{color:var(--link);text-decoration:underline;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}a:hover,a:focus{color:var(--link-hover);background:var(--link-hover-background);border-radius:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}h1{text-shadow:2px 2px var(--h1-shadow);-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;font-size:1.5em;text-align:center;font-weight:600;margin-top:.5em}h2,.h2{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;font-size:1.125em;font-weight:400;margin:0 0 12px 0;text-decoration:underline solid var(--h2-underline) 3px}h3,.h3{font-size:1em;line-height:2em;text-align:right;vertical-align:middle;padding:8px 18px;color:var(--h3-color);background-color:var(--h3-background);margin:4px 0}dt{color:#acd177;font-weight:700;float:left;clear:both;margin:0 0 5px;width:12em}dd{border-bottom:dotted 1px #999;margin:0 0 5px 13em}em{background:var(--italic);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,var(--italic2)),color-stop(.79,var(--italic2)),color-stop(.9,var(--italic1)),color-stop(1,var(--italic1)));background:-webkit-linear-gradient(transparent 90%,var(--italic1) 0%);background:linear-gradient(transparent 90%,var(--italic1) 0%)}b,strong{color:var(--bold)}hr{display:block;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;height:1px}ul{padding:0 .2em 0 1.8em}li{margin:1em 0}.marker{background:var(--marker);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,var(--marker2)),color-stop(.49,var(--marker2)),color-stop(.5,var(--marker1)),color-stop(1,var(--marker1)));background:-webkit-linear-gradient(transparent 50%,var(--marker1) 0%);background:linear-gradient(transparent 50%,var(--marker1) 0%)}#container{position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:90dvw;max-width:1000px;height:90dvh;max-height:595px;border-radius:10px;border:solid 1px var(--border);background-color:var(--container-background);overflow:hidden;display:grid;grid-template-columns:300px auto;grid-template-rows:max-content auto}aside{grid-area:1 / 1 / 3 / 2;margin-bottom:1em}aside img{height:calc(100% + 1em);margin-bottom:-1em;max-width:300px;object-fit:cover;object-position:45% 10%}.back a{margin:8px;padding:0 10px;position:absolute;top:8px;left:4px;color:var(--back);text-shadow:0 0 1px var(--container-background)}.back a:hover,.back a:focus{color:var(--text);text-shadow:0 0 2px var(--text);background:none;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}main{display:flex;flex-direction:column;width:100%;height:100%;scroll-margin-top:500px;scroll-margin-bottom:500px}nav{grid-area:1 / 2 / 2 / 3;position:sticky;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}.tab{cursor:pointer;transition:color 250ms;padding:.5em 0;border-right:solid 2px var(--tab-background-color);background-color:var(--tab-background-color);text-align:center;transition:all 250ms;color:unset;text-decoration:none;&:hover{color:var(--label-hover);background-color:rgba(255,255,255,.05)}}.active{color:var(--label-hover);background-color:rgba(255,255,255,.05)}.tab:last-of-type{border:none}tab-container{grid-area:2 / 2 / 3 / 3;overflow:scroll}tab-content{height:auto;scroll-margin-top:2em}tab-content#home{display:block}tab-content:not(:target){display:none}tab-content:target~#home{display:none}.content{margin:2rem 3rem}@media only screen and (max-width:820px){#container{display:flex;flex-direction:column;width:90dvw;max-width:90dvw;height:94dvh;max-height:94dvh}.back a{background-color:#95c5f9b7;box-shadow:0 0 4px 4px #95c5f9b7;border-radius:10px}.back a:hover,.back a:focus{background-color:#95c5f9a9;border-radius:10px}aside{height:20%;width:100%;margin:unset;padding:unset;overflow:hidden}aside img{width:100%;max-width:100%;height:auto;object-fit:cover;object-position:50% 60%}tab-container{height:80%}}@media (prefers-color-scheme:dark){html,body{color:var(--text-dark);background-image:url('images/bgdark.jpg');background-color:rgba(50,0,63,.9);background-blend-mode:multiply}#container{border:solid 1px var(--border-dark);background-color:var(--container-background-dark)}h3,.h3{color:var(--h3-color-dark);background-color:var(--h3-background-dark)}aside img{opacity:.5;mix-blend-mode:hard-light;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}aside:hover img,aside:focus img{opacity:.8}}