@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@200;400;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap";:root{--bg-color: #050505;--bg-secondary: #05050542;--sub-bg-color: #171717;--text-color: #ffffff;--accent-color: rgba(255, 255, 255, .1);--stroke-color: rgba(255, 255, 255, .3);--theme-icon-filter: invert(0);--bg-icon-filter: invert(1);--card-bg: #000000;--card-hover-bg: #111111;--card-border: #ffffff;--iframe-border: #333333;--success-color: #008000;--error-color: #ff0000;--info-color: #0084ff;--warning-color: #ba54ff;--grid-color: rgba(255, 255, 255, .03);--circle-gradient: radial-gradient( circle, color-mix(in srgb, var(--text-color), transparent 75%) 0%, transparent 70% );--card-gradient: linear-gradient(145deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .02) 100%);--media-box-bg: rgba(0, 0, 0, .2);--info-box-bg: rgba(0, 0, 0, .3);--text-dim: rgba(255, 255, 255, .5);--dot-bg: #8e8e8e;--star-color: #ffcc00;--star-bg: rgba(255, 204, 0, .1);--star-border: rgba(255, 204, 0, .2);--repo-card-hover: rgba(255, 255, 255, .06);--glow-default: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 60%)}:root[data-theme=light]{--bg-color: #ffffff;--bg-secondary: #f0f0f5;--sub-bg-color: #000000;--text-color: #1a1a1a;--accent-color: rgba(0, 0, 0, .05);--stroke-color: rgba(0, 0, 0, .2);--theme-icon-filter: invert(1);--bg-icon-filter: invert(0);--card-bg: #f9f9f9;--card-hover-bg: #f0f0f0;--card-border: #1a1a1a;--iframe-border: #cccccc;--success-color: #2e7d32;--error-color: #d32f2f;--info-color: #0288d1;--warning-color: #7b1fa2;--grid-color: rgba(0, 0, 0, .05);--circle-gradient: radial-gradient( circle, color-mix(in srgb, var(--text-color), transparent 70%) 0%, transparent 70% );--card-gradient: linear-gradient(145deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .02) 100%);--media-box-bg: rgba(0, 0, 0, .05);--info-box-bg: rgba(0, 0, 0, .02);--text-dim: rgba(0, 0, 0, .5);--dot-bg: #cccccc;--star-color: #b8860b;--star-bg: rgba(184, 134, 11, .1);--star-border: rgba(184, 134, 11, .3);--repo-card-hover: rgba(0, 0, 0, .03);--glow-default: radial-gradient(circle, rgba(0, 0, 0, .05) 0%, transparent 60%)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes Pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}@keyframes Loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes SlideWave{0%{background-position-x:0px}to{background-position-x:1000px}}.wave{background-image:url(../../../img/wave.png);background-size:1000px 100%}@keyframes Typing{0%{border-color:transparent}50%{border-color:var(--text-color)}to{border-color:transparent}}.goog-te-combo{border-radius:10px;background:var(--bg-color);border:1px solid var(--text-color);color:var(--text-color)}#google_translate_element,#google_translate_element *{font-size:1.5vmax;color:var(--text-color)!important;font-weight:300;font-family:JetBrains Mono,Nunito,monospace}#google_translate_element select{margin-bottom:10%}html.translated-ltr #TopText{top:40px!important}iframe.skiptranslate{display:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--text-color);border-radius:10px;opacity:.3}::-webkit-scrollbar-thumb:hover{background:var(--text-color);opacity:.5}*{color:var(--text-color);box-sizing:border-box;transition:color .3s ease,border-color .3s ease}*::selection{color:var(--bg-color);background-color:var(--text-color)}html,body,:global(body>div){height:100%}html{background-color:var(--bg-color);transition:background-color .5s ease}body{margin:0;overflow-y:hidden;font-family:Nunito,Noto Sans Thai,sans-serif;letter-spacing:.5px}.MainText{font-size:8vmax;font-weight:900;font-family:JetBrains Mono,monospace;text-transform:uppercase;letter-spacing:-2px;line-height:.9;color:var(--text-color)}.SubText{font-size:1.5vmax;font-weight:300;opacity:.8;color:var(--text-color)}.StrokeText{color:transparent!important;-webkit-text-stroke:1px var(--text-color);font-family:JetBrains Mono,monospace;opacity:.8}.CenterText{text-align:center}.Large{font-size:4vmax}.MediumText{font-size:3vmax}.bold{font-weight:700}.underline{text-decoration:underline;text-underline-offset:4px}.Page{display:flex;min-height:100vh;width:100%;overflow-y:hidden;padding:0;overflow-x:hidden}.LeftFrame,.RightFrame{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;position:relative}@media(max-width:768px){.Page{flex-direction:column}.RightFrame{border-left:none;border-top:1px solid var(--accent-color)}}.Collum3{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;text-align:center;border-right:1px solid var(--accent-color)}.Collum3:last-child{border-right:none}@media(max-width:768px){.Collum3{width:100%;border-right:none;border-bottom:1px solid var(--accent-color)}}.work{border:1px solid var(--card-border);background:var(--card-bg);padding:20px;margin-bottom:20px;width:100%;max-width:600px;transition:transform .2s;border-radius:10px}.work:hover{transform:translateY(-2px);background:var(--card-hover-bg)}.work .title{font-size:2vmax;font-weight:700;margin-bottom:15px;font-family:JetBrains Mono,monospace}.WorkContainer{display:flex;flex-direction:column;align-items:flex-start;width:100%}.WorkContainer iframe{width:100%;height:300px;border:1px solid var(--iframe-border);margin-bottom:15px;transition:filter .3s;border-radius:10px}.WorkDes{font-size:1.2vmax;text-align:left;width:100%;font-weight:300;line-height:1.5}.typing-animation{animation:Typing .8s infinite;border-right:12px solid var(--text-color);padding-right:10px}.google-translate-container{padding:10px;background:transparent;border-radius:10px}.goog-te-gadget{display:flex;flex-direction:column;justify-content:center;align-items:center}.border-green{border-color:var(--success-color)!important}.border-white{border-color:var(--text-color)!important}.box-shadow-red{box-shadow:var(--error-color) 0 0 6px}.box-shadow-blue{box-shadow:var(--info-color) 0 0 6px}.box-shadow-purple{box-shadow:var(--warning-color) 0 0 6px}.margin-bottom-40{margin-bottom:20vh}.margin-top-40{margin-top:20vh}