@import url(https://fonts.googleapis.com/css2?family=Sarabun&display=swap);@font-face{font-display:fallback;font-family:Vultura;font-weight:400;src:local("Vultura"),url(/static/media/font.017fb5e45c9590bf794e.woff2) format("truetype")}@font-face{font-display:fallback;font-family:VulturaOutline;font-weight:"lighter";src:local("VulturaOutline"),url(/static/media/font.55d840fb596018c258f2.woff2) format("truetype")}*,:after,:before{box-sizing:border-box}*{margin:0}body,html{height:100%}body{line-height:1.5}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}#__next,#root{isolation:isolate}button{background:inherit;border:none;color:inherit}:root{--black:#181818;--white:#ebebeb;--transition:0.5s ease;--backround:var(--white);--foreground:var(--black)}html{background:#ebebeb;background:var(--background);color:#181818;color:var(--foreground);transition:color .5s ease,background .5s ease;transition:color var(--transition),background var(--transition)}html::-webkit-scrollbar{background-color:transparent;width:10px}html::-webkit-scrollbar-thumb{background:#d3d3d3;border-radius:10px}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Sarabun,sans-serif;margin:0;overflow:overlay}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}h1,h2,h3,h4,h5{font-family:Vultura;font-weight:400}a{color:inherit}.container{margin:0 auto;max-width:1200px;width:80%}.hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.spaced-text{letter-spacing:8px;text-transform:uppercase}.title__h2{font-size:60px}@media only screen and (min-width:600px){.title__h2{font-size:80px}}.title__h2 .title__h2__number{font-family:VulturaOutline;font-size:60px;margin-right:5px;vertical-align:top}.block{height:400px}.block--black{background:#181818;background:var(--black)}.navbar{display:flex;justify-content:space-between;padding:20px 0}.toggle{background:var(--black);background:var(--foreground);border-radius:40px;cursor:pointer;height:25px;margin:auto;padding:3px;position:relative;transition:background var(--transition);width:48px}.toggle:before{background:var(--white);background:var(--background);border-radius:30px;content:"";display:block;height:18px;margin-left:1px;position:absolute;-webkit-transform:translate(0);transform:translate(0);transition:-webkit-transform var(--transition);transition:transform var(--transition);transition:transform var(--transition),-webkit-transform var(--transition);transition:background var(--transition),-webkit-transform var(--transition);transition:transform var(--transition),background var(--transition);transition:transform var(--transition),background var(--transition),-webkit-transform var(--transition);width:18px;z-index:2}.toggle.enabled:before{-webkit-transform:translateX(23px);transform:translateX(23px)}.toggle input{opacity:0;position:absolute;top:0}.toggle .icons{align-items:center;color:var(--background);display:flex;height:100%;justify-content:space-between;margin:0 5px}.toggle .icons svg{fill:var(--white);color:var(--background);height:14px;width:11px;z-index:0}#hero{height:100vh;position:relative}#hero .hero__title__container{align-items:center;display:flex}#hero .hero__title__container .hero__title__wrapper{display:inline-block;margin:0 auto;text-align:left}#hero .hero__title__container .hero__title__wrapper .hero__title{font-size:110px;overflow:hidden}@media only screen and (min-width:600px){#hero .hero__title__container .hero__title__wrapper .hero__title{font-size:140px}}#hero .hero__title__container .hero__title__wrapper .hero__title--second{margin-top:-90px}#hero .hero__copyright{cursor:default;position:absolute;-webkit-text-orientation:mixed;text-orientation:mixed;top:75vh;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl}@media only screen and (min-width:600px){#hero .hero__copyright{top:20vh}}#hero .hero__view-projects{background:inherit;bottom:80px;color:var(--foreground);margin-right:56px;position:absolute;right:0;transition:.4s;z-index:100}#hero .hero__view-projects:hover{color:gray;cursor:pointer}.rotatingText{cursor:pointer}.rotatingText .rotatingText__circle{-webkit-animation:rotation 15s linear infinite;animation:rotation 15s linear infinite;display:inline-block;height:calc(330px - 13rem);position:relative;-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center}.rotatingText .rotatingText__circle .rotatingText__letter{height:60px;position:absolute;-webkit-transform-origin:0 100%;transform-origin:0 100%}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}#work{background:var(--black);color:var(--white);padding:200px 0 400px}#work .title__h2{text-align:center}#work #work__heading span:nth-child(2){margin-left:-10px}#work .work__header{padding-bottom:80px;text-align:center}@media only screen and (min-width:950px){#work .work__header{align-items:center;display:flex;justify-content:space-between}}#work .work__bottom{align-items:center;display:flex;justify-content:space-between;margin-top:100px}@media only screen and (min-width:950px){#work .work__nextProject button{cursor:pointer;transition:.4s}#work .work__nextProject button:hover{color:gray}}#work .work__numerals{cursor:default;font-size:40px}#work .work__numerals button{cursor:pointer;font-family:VulturaOutline;margin-right:10px}#work .work__numerals button:hover{cursor:pointer}#work .work__numerals .work__numerals__selected{font-family:Vultura}#project{padding-bottom:100px}@media only screen and (min-width:950px){#project .project__grid{display:grid;grid-template-columns:1.5fr 1fr}}#project .project__grid .project__grid__images{max-width:100%;position:relative}#project .project__grid .project__grid__images .project__grid__images__mainImage{margin-bottom:40px}@media only screen and (min-width:950px){#project .project__grid .project__grid__images .project__grid__images__mainImage{margin:0 auto 0 110px;max-width:523px;padding:0 70px}}#project .project__grid .project__grid__images .project__grid__images__device{display:none}@media only screen and (min-width:950px){#project .project__grid .project__grid__images .project__grid__images__device{display:block;left:0;max-height:380px;position:absolute;top:20%}}#project .project__grid .project__grid__info h2,#project .project__grid .project__grid__info h3,#project .project__grid .project__grid__info h4,#project .project__grid .project__grid__info p{font-family:Sarabun,sans-serif;font-size:16px}#project .project__grid .project__grid__info .project__grid__info__heading{align-items:baseline;border-bottom:1px solid #2a2a2a;display:flex;justify-content:space-between;margin-bottom:10px;padding-bottom:10px}#project .project__grid .project__grid__info .project__grid__info__heading svg{color:var(--white);height:30px;transition:.4s}#project .project__grid .project__grid__info .project__grid__info__heading svg:hover{color:gray;cursor:pointer}#project .project__grid .project__grid__info .project__grid__info__tech{display:none}@media only screen and (min-width:950px){#project .project__grid .project__grid__info .project__grid__info__tech{display:block;margin-bottom:10px}}#project .project__grid .project__grid__info .project__grid__info__button{cursor:pointer;margin-right:56px;margin-top:80px;text-align:right;transition:.4s}#project .project__grid .project__grid__info .project__grid__info__button:hover{color:gray}#tech{background:var(--black);color:var(--white);padding-bottom:400px;text-align:center}#tech .tech__badges__grid{grid-gap:10px;display:grid;font-size:12px;gap:10px;grid-template-columns:1fr 1fr;padding-top:80px}@media only screen and (min-width:750px){#tech .tech__badges__grid{font-size:16px;gap:40px;grid-template-columns:1fr 1fr 1fr 1fr}}#tech .tech__badges__grid .tech__badge{justify-self:center}#tech .tech__badges__grid .tech__badge svg{fill:var(--white);height:100px;margin:0 auto}#tech .tech__badges__grid .tech__badge p{margin-top:20px}#about{background:var(--black);color:var(--white);padding-bottom:400px;text-align:center}#about .about__text{max-width:500px}#about .about__text p{font-family:Sarabun,sans-serif;margin-top:20px}#about .about__icons{display:flex;justify-content:space-between;margin:0 auto;width:160px}#about .about__icons button{background:inherit;color:gray;cursor:pointer}#about .about__icons svg{height:40px;transition:.4s}#about .about__icons svg:hover,#contact{color:var(--white)}#contact{background:var(--black);padding-bottom:400px;text-align:center}#contact .contact__mail{-webkit-animation:shake-animation 4.72s ease infinite;animation:shake-animation 4.72s ease infinite;cursor:pointer;font-size:40px;-webkit-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes shake-animation{0%{-webkit-transform:translate(0);transform:translate(0)}1.78571%{-webkit-transform:translate(5px);transform:translate(5px)}3.57143%{-webkit-transform:translate(0);transform:translate(0)}5.35714%{-webkit-transform:translate(5px);transform:translate(5px)}7.14286%{-webkit-transform:translate(0);transform:translate(0)}8.92857%{-webkit-transform:translate(5px);transform:translate(5px)}10.71429%{-webkit-transform:translate(0);transform:translate(0)}to{-webkit-transform:translate(0);transform:translate(0)}}@keyframes shake-animation{0%{-webkit-transform:translate(0);transform:translate(0)}1.78571%{-webkit-transform:translate(5px);transform:translate(5px)}3.57143%{-webkit-transform:translate(0);transform:translate(0)}5.35714%{-webkit-transform:translate(5px);transform:translate(5px)}7.14286%{-webkit-transform:translate(0);transform:translate(0)}8.92857%{-webkit-transform:translate(5px);transform:translate(5px)}10.71429%{-webkit-transform:translate(0);transform:translate(0)}to{-webkit-transform:translate(0);transform:translate(0)}}.footer__contents{background:var(--black);color:var(--white);padding:100px 0;text-align:center}.footer__contents .footer__arrow{font-size:80px}.skullContainer{width:100%}.skullCanvas,.skullContainer{height:100vh;position:absolute;z-index:1}.skullCanvas{width:100vw}
/*# sourceMappingURL=main.a7bdc895.css.map*/