@font-face{font-family:Kanit;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/kanit/v15/nKKZ-Go6G5tXcrabGwCYdA.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Kanit;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/kanit/v15/nKKZ-Go6G5tXcraVGwA.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Rubik;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-4I-FWUU1Z4Y.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Rubik;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-4I-FV0U1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--color: grey;--contrast-color: rgb(0, 188, 240)}.hidden{opacity:0;filter:blur(10px);transition:all var(--animation-delay) ease-out}.hidden-left{transform:translate(-20vw,5vh)}.hidden-right{transform:translate(20vw,5vh)}.show{opacity:1;filter:blur(0);transform:translate(0)}.no-touch,span.link{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button{display:inline-block;background-color:#ffffff1a;border:2px solid rgb(55,55,55);border-radius:6px;box-shadow:#1b1f230a 0 2px,#ffffff40 0 2px inset;box-sizing:border-box;color:var(--contrast-color);font-family:inherit;font-display:swap;font-weight:500;line-height:20px;list-style:none;padding:3px 8px;position:relative;transition:first-background-color .2s cubic-bezier(.3,0,.5,1);-webkit-user-select:none;user-select:none;touch-action:manipulation;vertical-align:middle;cursor:pointer;margin-top:5px}button:hover{background-color:#fff3;text-decoration:none;transition-duration:.1s;outline:1px transparent;transform:translateY(-1.25px)}body{overflow:hidden;font-family:Kanit,sans-serif;color:var(--contrast-color)}.section{background-color:#ffffff40;border-radius:10px;box-shadow:2px 2px 5px 7px #ffffff80}.section-title{text-align:center;font-size:xx-large}.content{position:fixed;top:calc(var(--navbar-width) + 5px);left:calc(var(--navbar-width) + 5px);width:calc(100vw - ((var(--navbar-width) + 5px) * 2));height:calc(100vh - ((var(--navbar-width) + 5px) * 2));overflow-y:visible;overflow-x:hidden;display:grid;grid-template-columns:repeat(12,1fr);background:#ffffff1a}.content::-webkit-scrollbar{width:0}.home{font-family:Rubik,sans-serif;margin-top:calc(5 * var(--scale));margin-bottom:calc(45 * var(--scale))}.about,.projects{margin-bottom:calc(45 * var(--scale))}.origami{margin-bottom:calc(5 * var(--scale))}canvas{position:fixed;top:calc(var(--navbar-width) + 5px);left:calc(var(--navbar-width) + 5px)}nav{position:absolute;top:0;left:0;background-color:#5a5a5a;border:5px solid var(--contrast-color);margin:0;z-index:10}.topbar,.bottombar{height:var(--navbar-width);width:100vw;z-index:1}.bottombar{top:calc(100vh - var(--navbar-width) - 10px)}.leftbar,.rightbar{width:var(--navbar-width);height:calc(100vh - 10px)}.rightbar{left:calc(100vw - var(--navbar-width) - 10px)}.rightbar:before{background-color:#5a5a5a;position:absolute;content:"";display:block;height:var(--navbar-width);width:var(--navbar-width);left:-5px}.leftbar:before{background-color:#5a5a5a;position:absolute;content:"";display:block;height:var(--navbar-width);width:var(--navbar-width);left:5px}.rightbar:after{background-color:#5a5a5a;position:absolute;top:calc(100vh - var(--navbar-width) - 10px);content:"";display:block;height:var(--navbar-width);width:var(--navbar-width);left:-5px}.leftbar:after{background-color:#5a5a5a;position:absolute;top:calc(100vh - var(--navbar-width) - 10px);content:"";display:block;height:var(--navbar-width);width:var(--navbar-width);left:5px}.diagonals{position:absolute;border-top:5px solid var(--contrast-color);width:calc((var(--navbar-width) + 5px) * 1.414);z-index:99}.diagonal-1{transform:rotate(45deg);transform-origin:5px -5px}.diagonal-2{transform:rotate(135deg);transform-origin:5px 0px;left:calc(100vw - 10px)}.diagonal-3{transform:rotate(-45deg);transform-origin:2px 6px;top:calc(100vh - 10px)}.diagonal-4{transform:rotate(-135deg);transform-origin:3px 3px;top:calc(100vh - 10px);left:calc(100vw - 10px)}.logo-container{display:flex;margin:calc(.5 * var(--scale)) 0 0 calc(5 * var(--scale))}.logo{width:calc(3 * var(--scale));height:calc(3 * var(--scale));margin-right:calc(.5 * var(--scale));z-index:99}.logo-title{font-size:calc(2 * var(--scale));margin:0}.indicators{display:flex;padding:calc(.75 * var(--scale)) calc(5 * var(--scale)) calc(.75 * var(--scale)) calc(5 * var(--scale));margin:auto;width:min-content;justify-content:center;color:#000;font-family:Rubik}.navindicator{position:relative;font-weight:700;text-align:center;background-color:#3c3c3c;box-shadow:1px 1px 2px 3px #ffffff40;filter:blur(.75px)}body:has(.home.section.active) .navindicator.home,body:has(.about.section.active) .navindicator.about,body:has(.projects.section.active) .navindicator.code,body:has(.origami.section.active) .navindicator.origami{color:var(--contrast-color)}.timeline{margin-bottom:10vh;max-width:1024px;display:grid;grid-template-columns:1fr 3px 1fr}.timeline-component{margin:0 calc(1 * var(--scale)) calc(1 * var(--scale)) calc(1 * var(--scale))}.timeline-component--bg{padding:.5em;box-shadow:1px 1px 5px 5px #ffffff80;border-radius:10px;background:#37373780}.timeline-middle{position:relative;background:var(--contrast-color)}.timeline-point{position:absolute;top:0;left:50%;transform:translate(-50%);width:15px;height:15px;background:var(--contrast-color);border-radius:50%}.timeline-point--bottom{top:initial;bottom:0}.timeline-date--right{text-align:right}.timeline-title{margin:0;font-size:1.15em;font-weight:700}.display-component{margin:0 calc(1 * var(--scale)) calc(1 * var(--scale)) calc(1 * var(--scale))}.display-component--bg{padding:.5em;box-shadow:1px 1px 5px 5px #ffffff80;border-radius:10px;background:#37373780}.display-date{margin-top:calc(4 * var(--scale));text-align:right}.display-title{margin:0;font-size:1.15em;font-weight:700}.display-content{display:grid}.display-paragraph,.display-img{box-shadow:1px 1px 5px 5px #ffffff80;margin:calc(.5 * var(--scale))}.display-paragraph{padding:calc(.5 * var(--scale));height:clamp(calc(30 * var(--scale)),calc(80vh*100vh/100vw),50 * var(--scale))}.intro{margin-bottom:calc(3 * var(--scale))}.home{grid-column:2/span 6}.about{grid-column:5/ span 7}.projects{grid-column:2/span 9}.origami{grid-column:3/span 9}@media only screen and (min-width: 901px){:root{--navbar-width: 64px;--scale: 15px }.display-content{display:grid;grid-template-columns:repeat(2,1fr)}.display-paragraph{grid-column:1/span 1;padding:calc(.5 * var(--scale))}.display-img{grid-column:2/span 1;height:calc(26 * var(--scale));width:calc(100% - calc(1 * var(--scale)))}.navindicator{margin:0 5vw;padding:calc(.5 * var(--scale));font-size:calc(1.5 * var(--scale));width:calc(7 * var(--scale))}.section{padding:calc(1 * var(--scale));margin-left:calc(2 * var(--scale));margin-right:calc(2 * var(--scale))}}@media only screen and (max-width: 900px){:root{--navbar-width: 42px;--scale: 12px }.display-img{object-fit:cover;width:calc(100% - calc(1 * var(--scale)))}.scrollbar{display:none}.navindicator{margin:0 3vw;padding:calc(.25 * var(--scale));font-size:clamp(calc(.5 * var(--scale)),calc(1.25 * var(--scale)),calc(1 * var(--scale)))}.content::-webkit-scrollbar{width:0}.home-title{font-size:clamp(calc(.5 * var(--scale)),5vw,calc(3 * var(--scale)))}.projects{grid-column:2/span 10}.section{padding:calc(.5 * var(--scale));margin-left:calc(1 * var(--scale));margin-right:calc(1 * var(--scale));font-size:clamp(calc(.75 * var(--scale)),3vw,calc(1.5 * var(--scale)))}}