:root{--grid-size:1.2em;--gap:50px;--highlighter:219,138,138;--dotSize:4px;--colorCyan:cyan;--colorYellow:yellow;--colorMagenta:magenta;}@font-face{font-family:'IBM Plex Sans Thai';src:url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-300.woff2') format('woff2');font-display:swap;font-weight:300;font-style:normal;}@font-face{font-display:swap;font-family:'Beth Ellen';font-style:normal;font-weight:400;src:url('/fonts/beth-ellen-v22-latin-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Reenie Beanie';font-style:normal;font-weight:400;src:url('/fonts/reenie-beanie-v22-latin-regular.woff2') format('woff2')}*{box-sizing:border-box;margin:0;padding:0;color:black;}*::selection{background:rgba(var(--highlighter),.3);}body{background-image:linear-gradient(rgba(228,228,228,.4) 2px,transparent 1px),linear-gradient(90deg,rgba(228,228,228,.4) 2px,transparent 2px);background-size:12px 12px;font-family:"Reenie Beanie",cursive;font-size:1.75rem;}main{display:grid;grid-template-columns:minmax(20%,300px) 60px 1fr;grid-template-rows:100vh;grid-column-gap:0;grid-row-gap:0;transition:.4s ease;}header{background:rgba(255,214,218,1);padding:1em;text-align:center;}header::selection{color:white!important;}header a{white-space:nowrap}.frill{width:100px;background:url("frill.gif") repeat-y}.divider{display:none;}.gallery-image{padding:20px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:flex-start;overflow-y:scroll;}.img-box{box-sizing:content-box;margin:10px;height:250px;display:inline-block;color:white;position:relative;}.img-box img{height:250px;width:auto;transition:.4s ease;}.img-box:hover img{transform:scale(1.1);opacity:.3;}.transparent-box{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;max-height:100%;overflow-y:visible;}.img-box:hover .transparent-box,.img-box:active .transparent-box{opacity:1.0;}.img-box:hover{cursor:pointer;}h1,h2{font-family:"Beth Ellen",cursive;font-weight:400;line-height:1.5em;padding:0;margin:0;}h1{font-size:1.25em;line-height:2.5em;}p,.popup li{font-weight:400;line-height:2rem;margin-top:.5rem;}.popup p{text-indent:1rem;}a{font-size:unset;transition:.3s ease;&:hover,&:focus{color:rgb(219,138,138)}}header a:hover,header a:focus{color:white;}ul{margin:.8rem 0;}li{list-style:none;margin:.8rem 1rem;}li:before{content:"* ";left:.6rem;right:.6rem;top:0;}button{cursor:pointer;padding:.2rem .4rem;background-color:rgb(219,138,138);color:black;font-family:"IBM Plex Sans Thai",sans-serif;font-weight:300;border:1px solid rgb(173,104,104);border-radius:.2rem;transition:.3s ease;&:hover,&:focus{background-color:rgb(173,104,104);color:white}}.modal-toggle{height:0;left:-9999rem;overflow:hidden;pointer-events:none;position:absolute;user-select:none;width:0;}.modal{position:fixed;right:0;top:0;z-index:2;pointer-events:none;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;opacity:0;padding:1rem;transition:opacity .3s ease;}.modal-toggle:checked~.modal{opacity:1;pointer-events:all;transition:all .3s ease;user-select:auto;}.modal-close::before{bottom:0;content:'';left:0;position:absolute;right:0;top:0;cursor:pointer;}body::before{bottom:0;content:'';left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity 0s ease .2s;z-index:-9999;}@keyframes open{0%{transform:scale(.8)}80%{transform:scale(1.01)}100%{transform:none}}.modal-toggle:checked~.modal .popup{animation:open .5s ease-out;}.popup{width:95dvw;position:fixed;overflow-y:scroll;max-width:68rem;max-height:90svh;padding:1em;background-color:white;box-sizing:border-box;box-shadow:8px 8px 0 rgba(253,166,166,.376);border-radius:0 0 125px 3px/3px 85px 5px 55px;border:4px solid #37353f;}@media (prefers-color-scheme:dark){*{color:white}body{background:#333;background-image:linear-gradient(rgba(79,79,79,.4) 2px,transparent 1px),linear-gradient(90deg,rgba(79,79,79,.4) 2px,transparent 2px);background-size:12px 12px}.popup{background:rgb(17,17,17);border:rgba(79,79,79,1) 4px solid}header h1,header p,header a{color:rgb(17,17,17)}}@media screen and (max-width:900px){main{display:flex;flex-direction:column}header{background:#f2bdbd}.frill{background:url("frillmobile.gif") repeat-x;width:100%;height:70px}.gallery-image{overflow-y:auto}.modal{align-items:start}.popup{max-height:85svh}}.font{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif!important;}