html{scroll-behavior:smooth;height:100%;-webkit-tap-highlight-color:transparent}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{padding:0;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{display:flex;flex-direction:column;min-height:100vh}.content{width:80%;display:flex;justify-content:center}.dark-mode{background-color:#2f2f2f;background-image:linear-gradient(30deg,#222222 12%,transparent 12.5%,transparent 87%,#222222 87.5%,#222222),linear-gradient(150deg,#222222 12%,transparent 12.5%,transparent 87%,#222222 87.5%,#222222),linear-gradient(30deg,#222222 12%,transparent 12.5%,transparent 87%,#222222 87.5%,#222222),linear-gradient(150deg,#222222 12%,transparent 12.5%,transparent 87%,#222222 87.5%,#222222),linear-gradient(60deg,#22222277 25%,transparent 25.5%,transparent 75%,#22222277 75%,#22222277),linear-gradient(60deg,#22222277 25%,transparent 25.5%,transparent 75%,#22222277 75%,#22222277);background-size:54px 95px;background-position:0 0,0 0,27px 47px,27px 47px,0 0,27px 47px;color:#e4e4e4;flex:1}.light-mode{background-color:#dadada;background-image:linear-gradient(30deg,#ebebeb 12%,transparent 12.5%,transparent 87%,#ebebeb 87.5%,#ebebeb),linear-gradient(150deg,#ebebeb 12%,transparent 12.5%,transparent 87%,#ebebeb 87.5%,#ebebeb),linear-gradient(30deg,#ebebeb 12%,transparent 12.5%,transparent 87%,#ebebeb 87.5%,#ebebeb),linear-gradient(150deg,#ebebeb 12%,transparent 12.5%,transparent 87%,#ebebeb 87.5%,#ebebeb),linear-gradient(60deg,#ebebeb77 25%,transparent 25.5%,transparent 75%,#ebebeb77 75%,#ebebeb77),linear-gradient(60deg,#ebebeb77 25%,transparent 25.5%,transparent 75%,#ebebeb77 75%,#ebebeb77);background-size:54px 95px;background-position:0 0,0 0,27px 47px,27px 47px,0 0,27px 47px;flex:1}.tooltip{position:relative;display:inline-block}.tooltip .tooltiptext{visibility:hidden;width:120px;background-color:#1f1f1f77;color:#fff;text-align:center;padding:5px 0;border-radius:6px;margin-left:-60px;top:100%;left:50%;position:absolute;z-index:99}.tooltip:hover .tooltiptext{visibility:visible}a:link{text-decoration:none}@media screen and (max-width: 500px){.content{width:85%}.light-mode,.dark-mode{width:100%;padding-right:0;overflow-x:clip}}@media screen and (max-width: 1000px){.content{width:85%}}.header{background-color:#122f49;height:100px;display:flex;position:sticky;z-index:55}.dark-mode .header{background-color:#262626}.header-logo{width:100px;height:100px}.content-header{justify-content:space-between;margin:auto;align-items:center}@media screen and (max-width: 1200px){.header-logo{width:60px;height:60px}.header{height:80px}.header .content-header{margin:auto;width:85%}}@media screen and (max-width: 500px){.header-logo{width:60px;height:60px}.header{height:80px}.header .content-header{margin:auto;width:85%}}.button{width:50px;height:50px;border-radius:50%;box-shadow:none;background:transparent;border:0px;padding:0}.button:hover{background:#00000028}.toggle-icon{color:#f5f5f5;font-size:30px}.main-button{border:none;display:block;border-radius:6px;padding:20px;max-width:140px;margin-top:10px;color:#f5f5f5;background:rgb(81,153,208);background:linear-gradient(90deg,rgba(81,153,208,1) 0%,rgba(100,174,200,1) 50%,rgba(110,212,217,1) 100%);cursor:pointer;font-size:15px;font-family:roboto condensed,sans-serif;font-weight:500;text-align:center;transition:transform .2s ease-in-out}.main-button span{margin:auto}.main-button.disabled{cursor:context-menu}.main-button:hover{transform:scale(1.05)}.toggle-button{cursor:pointer}.scroll-to-top{display:flex;position:fixed;bottom:30px;right:30px;z-index:99;border:none;outline:none;user-select:none}.scroll-to-top .content-button{justify-content:center;margin:0 auto}.scroll-to-top button{border:3px solid #1e466a;margin-right:auto;border-radius:50%;background-color:#fff;padding:0}.scroll-to-top button:hover{cursor:pointer}.scroll-to-top button span{font-size:40px;color:#1e466a;text-align:center}.dark-mode .scroll-to-top button{border:3px solid #3d3d3d;background-color:#6b6b6b}.dark-mode .scroll-to-top button span{color:#ebebeb}@media screen and (max-width: 500px){.scroll-to-top{display:inline-block!important;bottom:30px}}.navbar{background-color:#122f4979;width:100%;height:70px;display:flex;font-size:15px;font-family:roboto condensed,sans-serif;color:#fff9;position:absolute;z-index:10}.dark-mode .navbar{background-color:#3b3b3b79}.logo{width:100px;height:100px}.content-navbar{justify-content:space-between;margin:0 auto}.sticky{position:fixed;top:0;width:100%}.right-section{width:420px;display:flex}.reach-me{background-color:#ffffffd3;color:#000;font-weight:600;width:50%;display:flex;align-items:center}.reach-me:hover{background-color:#e2e2e2d3}.social{width:50%;display:flex;justify-content:end;align-items:center;margin-right:auto;padding-right:20px}.social a{padding:0 15px}.menus{display:flex}.menu:first-child{padding:0 40px 0 0;border-right:1px solid rgb(178,178,178)}.menu:last-child{padding:0 40px;border:none}.menu{margin:auto;height:30%;padding:0 40px;border-right:1px solid rgb(178,178,178)}.menu-title{height:40px}.email-icon{width:30px;height:30px}.reach-me-content{display:flex;margin:auto;vertical-align:middle;align-items:center;text-align:center}.reach-me-content a{margin:5px}.menu-title>a:link,.menu-title>a:visited{text-decoration:none;color:#fff}.menu-title>a:hover{color:#74bfdf}.reach-me-content img{margin:5px}@media screen and (max-width: 1200px){.navbar .content-navbar{position:relative;overflow:visible;overflow-x:scroll;width:85%}.menu{padding:0 20px;text-align:center;min-width:70px}.menu:first-child{text-align:left;padding:0 10px 0 0}.menu:last-child{padding:0 20px;margin-right:60px}}@media screen and (max-width: 500px){.navbar .content-navbar{position:relative;overflow:visible;overflow-x:scroll;width:85%}.menu{padding:0 20px;text-align:center;min-width:70px}.menu:first-child{text-align:left;padding:0 10px 0 0}.menu:last-child{padding:0 20px;margin-right:60px}}#footer{height:65px;background-color:#122f49;border-top:1px solid #4E5683;display:flex;color:#8388a7;font-family:roboto condensed,sans-serif}.dark-mode+*+#footer{background-color:#262626;border-top:1px solid #7a7a7a;color:#747474}.footer-logo{width:60px;height:60px}@media screen and (max-width: 500px){#footer .content{width:85%;font-size:14px}}.contact-section{display:grid;background-color:#122f49;color:#fff;font-family:roboto condensed,sans-serif}.dark-mode+* .contact-section,.dark-mode+* .contact-title h2{background-color:#262626}.dark-mode+* .contact-title{background-color:#2c2c2c}textarea{resize:none}.contact-title{background-color:#254058;height:90px;font-family:rubik}.contact-title h2{display:flex;margin:auto;text-align:center;align-items:center;justify-content:center}.contact-title h2{margin:auto;align-items:center;text-align:center;width:240px;height:100%;background-color:#122f49}.content-contact{display:flex;margin:auto;padding:3%}.content-contact img{margin-right:20px}.contact-info{width:30%}.contact-logo{width:55px;height:55px}form{width:70%;border-left:1px solid #4E5683;margin-left:60px;padding-left:100px}.dark-mode+* form{border-left:1px solid #7a7a7a}.contact-info>div{display:flex;margin-bottom:30px}.info-content div{margin-bottom:10px}.info-content a{color:#8388a7}.dark-mode+* .info-content a{color:#747474}.first-row{display:flex;margin-bottom:10px;justify-content:space-between}.first-row input{height:30px}.first-row label{width:48%;display:grid}.second-row{margin-bottom:30px}.second-row label{display:grid}.second-row textarea{height:200px}label span{font-size:14px;margin-bottom:10px}input,textarea{border-radius:5px;border:3px solid transparent;font-size:14px;font-family:inherit;font-size:inherit;color:#525252;padding:3px 10px;border:3px solid #60AACA}.dark-mode+* input,.dark-mode+* textarea{border:3px solid #7a7a7a}input:focus,textarea:focus{outline:none;border:3px solid #4E5683}.invalid-field{border:3px solid #ce3d3d}.err-message{visibility:hidden;margin-top:3px;color:#ce3d3d}.invalid-field+.err-message{visibility:visible}label .field-msg{height:20px}.submitted-msg{display:flex;margin:auto auto 20px;max-width:400px;background-color:#88c98cd7;color:#fff;padding:10px 0;text-align:center;align-items:center;vertical-align:middle;border-radius:6px;font-size:15px}@media screen and (max-width: 500px){.content-contact{display:block}.dark-mode+* form,form{border:none;padding:0;margin-left:0;margin-bottom:20px;width:100%}.first-row{display:block}.first-row label{width:100%}.second-row{margin-bottom:10px}.contact-info{width:100%;margin-top:20px}}@media screen and (max-width: 1000px){.content-contact{display:block}form{border:none;padding:0;margin-left:0;margin-bottom:20px;width:100%}.dark-mode+* form{border:none}.first-row{display:block}.first-row label{width:100%}.second-row{margin-bottom:10px}.contact-info{width:100%;margin-top:20px}}.blog-section{width:75%;padding:30px 0;margin:100px auto;font-size:15px;font-family:Roboto,sans-serif;font-weight:500}.blog-section h1{margin-bottom:50px}.content-blog{display:flex;width:100%}.content-left{width:75%;border-right:1px solid rgb(141,141,141);margin-right:4%;padding-right:4%}.dark-mode .content-left{border-right:1px solid #7a7a7a}.content-right{width:25%;height:100%}.content-right h3{margin-bottom:20px}.blog-categories-section{margin-bottom:50px}.content-categories{display:grid;gap:1rem}.content-categories a{padding:7px;text-align:center;border-radius:5px;background-color:#c2dde3;color:#60aaca}.content-categories a:hover{background-color:#b7d1d6}.dark-mode .content-categories a{background-color:#2c2c2c;color:#60aaca}.dark-mode .content-categories a:hover{background-color:#262626}.paginate-section{display:flex;justify-content:center;width:fit-content;border-radius:5px;border:2px solid #60AACA}.paginate-section button:first-child{border-right:1px solid #60AACA;border-radius:3px 0 0 3px}.paginate-section button:last-child{border-left:1px solid #60AACA;border-radius:0 3px 3px 0}.paginate-section button span{font-size:21px;color:#60aaca}.paginate-section button{font-family:Roboto condensed;font-size:15px;width:35px;height:35px;box-shadow:none;padding:6px;border:0px;background-color:#ffffff80}.dark-mode .paginate-section button{color:#d3d3d3;background-color:#52525280}.paginate-section button.active{background-color:#bbd1db9c}.dark-mode .paginate-section button.active{background-color:#2b2b2b9c}.paginate-section button:hover{cursor:pointer;background-color:#bbd1db9c}.dark-mode .paginate-section button:hover{cursor:pointer;background-color:#2b2b2b9c}@media screen and (max-width: 500px){.blog-section{width:85%}}@media screen and (max-width: 600px){.content-right{display:none}.content-left{border:none;width:100%}.dark-mode .content-left{border:none}}@media (min-width: 600px){.content-categories{grid-template-columns:repeat(2,1fr)}}.card-post{margin-bottom:30px;background-color:#cfe2eb9c;padding:30px;height:220px;border-radius:5px;border-top:5px solid #60AACA;position:relative;display:grid}.card-post:hover{background-color:#bbd1db9c}.dark-mode .card-post{border-top:5px solid #262626;background-color:#2c2c2cd2}.dark-mode .card-post:hover{background-color:#252525d2}.card-post a:before{content:"";position:absolute;top:0px;right:0px;bottom:0px;left:0px}.post-categories{font-size:13px}.post-categories span:first-child{margin:0 10px 0 0}.post-categories span{padding:7px;margin:0 10px;border-radius:5px;background-color:#c2dde3;color:#60aaca}.dark-mode .post-categories span{background-color:#262626;color:#60aaca}.post-date{color:#aaa;font-size:13px;margin-bottom:10px}.post-description{font-size:14px}.post-title{font-weight:600;margin:30px 0;font-size:30px;color:#60aaca;font-family:Roboto Condensed,sans-serif}.dark-mode .post-title{color:#dbdbdb}.post-date{color:#000;font-size:14px}.dark-mode .post-date{color:#acacac}.not-found{width:75%;padding:50px 0;margin:100px auto}#home{height:1000px;background-color:#c2dde3;clip-path:polygon(0% 0%,100% 0%,100% 90%,67% 90%,56% 100%,34% 96%,0 98%)}.banner{font-family:Krub,sans-serif;font-weight:600;background-image:url(/assets/banner.67cfe28b.svg);background-position:center;background-repeat:no-repeat;height:932px;font-family:roboto condensed,sans-serif}.dark-mode #home{background-color:#2c2c2c}.logo{width:100px;height:100px}.content-banner{margin:auto;display:block;padding:17% 0 20%}.section{margin-bottom:20px}.role-text{width:285px;height:35px;border-left:5px solid #60AACA;background:rgba(90,90,90,.25);font-size:14px;display:flex;align-items:center;padding-left:10px;color:#fff;font-weight:500}.name-text{font-size:60px;font-weight:700;color:#fff;font-family:roboto condensed,sans-serif}.titleOne{animation-name:moveLeft;animation-duration:1s}.titleTwo{animation-name:moveRight;animation-duration:1s}@keyframes moveLeft{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translate(0)}}@keyframes moveRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}.position-text{border-top:1px solid rgba(90,90,90,.25);width:310px;padding-top:10px;color:#60aaca;font-size:13px;margin-bottom:35px}.dark-mode .position-text{border-top:1px solid rgba(255,255,255,.25)}@media screen and (max-width: 500px){.banner{padding-top:75px}.name-text{font-size:50px}.titleTwo{min-height:14vh}.position-text{width:250px}}.bg-light{background-color:#c2dde3;clip-path:polygon(0 26%,100% 0%,100% 74%,0% 100%)}.bg-dark{background-color:#2c2c2c;clip-path:polygon(0 26%,100% 0%,100% 74%,0% 100%)}.content-aboutme{margin:auto;display:flex;justify-content:flex-start;padding:120px;font-family:roboto condensed,sans-serif}.self-description{font-size:18px}.text{font-size:35px;margin-left:80px;margin-top:30px}.title{font-weight:600;margin-bottom:30px;color:#60aaca;font-size:45px;font-family:Roboto Condensed,sans-serif}.dark-mode .title{color:#dbdbdb}.content-quote{margin:-60px auto auto;display:flex;justify-content:flex-start;font-style:italic}.quote{width:400px;font-size:17px;margin-left:auto;text-align:right;font-family:roboto condensed,sans-serif}.photo-profile img{width:190px;margin-bottom:-30px;transform:translateY(40px)}@media screen and (max-width: 500px){.content-aboutme{display:block;padding:0}.bg-light,.bg-dark{padding:130px 0;clip-path:polygon(0 14%,100% 0%,100% 86%,0% 100%)}.photo-profile img{width:140px;transform:translateY(0)}.title{text-align:right}.text{margin:0;padding:0}.self-description{height:300px;overflow-y:scroll}.content-quote{margin-top:-30px}}@media screen and (max-width: 1000px){.content-aboutme{display:block;padding:0}.bg-light,.bg-dark{padding:130px 0;clip-path:polygon(0 14%,100% 0%,100% 86%,0% 100%)}.photo-profile img{transform:translateY(0)}.text{margin:0;padding:0}.self-description{height:175px;overflow-y:scroll}.content-quote{margin-top:-30px}}.skillset{width:80%;margin:50px auto auto}.skillset .title{display:flex;margin:auto auto 40px;font-size:45px;font-family:Roboto Condensed,sans-serif}.skillset img{max-height:80px;margin:30px}.content-skillset{display:flex;margin:auto auto 40px}@media screen and (max-width: 1000px){.skillset{width:85%}.content-skillset{display:grid;max-height:600px;grid-row:auto auto;overflow-y:scroll;overflow-x:hidden;width:100%;padding:0;justify-content:center;text-align:center;margin:auto}.skillset img{justify-content:center;margin:20px auto;transform:scale(.9)}}.app-profile{padding:50px 0;display:flex;margin:auto;align-items:center;font-family:roboto condensed,sans-serif}.content-app-profile{margin:auto;display:flex;align-items:center;justify-content:space-between}.content-colors{margin:auto;display:flex}.text-app{font-family:roboto condensed,sans-serif;font-weight:700;font-size:40px;display:flex}.logos img{height:60px;padding:25px 0 25px 35px}.right{display:block}.colors{width:340px;height:100px;border-radius:6px;background-color:#b9b9b94b;display:flex;align-items:center;padding:0 12px}.content-colors{display:flex;justify-content:end;margin-top:-50px}.col{width:42px;height:42px;margin:auto;border-radius:6px}.col-1{background-color:#c2dde3}.col-2{background-color:#60aaca}.col-3{background-color:#254058}.col-4{background-color:#122f49}.col-5{background-color:#2c2c2c}.col-6{background-color:#262626}.thanks{font-size:13px}.arrow{display:inline-block}@media screen and (max-width: 500px){.arrow{display:none}.content-colors{margin-top:10px}}@media screen and (max-width: 1000px){.arrow{display:none}.content-colors{margin-top:10px}}#projects{margin-bottom:40px;font-family:roboto condensed,sans-serif}.project-light{background-image:url(/assets/projectBgLight.da2b0163.svg);height:555px;background-repeat:no-repeat;background-position:80%}.project-dark{background-image:url(/assets/projectBgDark.37d0afae.svg);height:555px;background-repeat:no-repeat;background-position:80%}.projects-section .title{width:80%;margin:auto auto 40px;text-align:right;padding-top:40px}.project-title{color:#60aaca;font-size:26px;font-weight:600;margin-bottom:30px}.project-thumbnail{display:flex;flex-direction:column;justify-items:space-between;justify-content:center;width:55%}.project-thumbnail img{height:60%;padding-right:30px;margin-right:30px}.project-detail{display:flex;flex-direction:column;justify-items:space-between;justify-content:space-between;margin:13% 0;width:45%}.project{width:80%;border-radius:20px;margin:25px auto}.content-project{display:flex;margin:auto;justify-content:center;height:100%;padding:0 50px}.project-detail button{margin-top:auto}.candy-stripe{list-style:none;padding:0;margin:0 0 25px;display:flex;justify-content:space-between;height:1rem;-webkit-clip-path:polygon(25% 0%,100% 0%,75% 100%,0% 100%);clip-path:polygon(25% 0%,100% 0%,75% 100%,0% 100%);background-color:#60aaca}@media (min-width: 1000px){.stripe{height:1.5rem}}@media (max-width: 500px){.content-project{display:block;margin:auto;padding:20px}.project-detail{display:flex;flex-direction:column;justify-items:space-between;justify-content:space-between;margin:20px 0 0;width:100%}.projects-section .title,.project{width:85%}.project-light,.project-dark{height:575px}.project-thumbnail{width:100%;display:flex;justify-content:center;margin:auto}.project-thumbnail img{padding:0;margin:0}}@media (max-width: 1000px) and (min-width: 500px){.content-project{display:block;margin:auto;padding:20px}.project-detail{display:flex;flex-direction:column;justify-items:space-between;justify-content:space-between;margin:20px 0 0;width:100%}.projects-section .title,.project{width:85%}.project-light,.project-dark{height:575px}.project-thumbnail{width:75%;display:flex;justify-content:center;margin:auto}.project-thumbnail img{padding:0;margin:0}}.sorting-content{margin:100px auto;height:70vh;justify-content:space-between;font-family:roboto condensed,sans-serif;user-select:none}#numbers{display:flex;justify-content:center;width:90%;padding:0 20px}.sorting-content .tooltip{margin-top:0;height:30px}.sorting-content .tooltiptext{padding:10px;position:absolute;left:153%;top:0%;width:300px;border-radius:0;background-color:#60aaca}.dark-mode .sorting-content .tooltiptext{background-color:#262626c2}.chevron-right{font-size:20px}.sorting-menu{display:flex;flex-direction:column;justify-content:space-between;width:10%;padding:15px;border-right:2px solid rgb(136,136,136);background-color:#122f493f}.sorting-content .buttons button:disabled{cursor:default}.sorting-content .algorithms-content button,.sorting-content .algorithms-content a{display:flex;justify-content:center;align-items:center;border:none;height:50px;cursor:pointer;font-size:13px;font-family:roboto condensed,sans-serif;font-weight:500;text-align:center}.algorithms-content button .description{font-size:18px;margin:0 3px}.algorithms-content button div{margin:0 3px}.sorting-content .algorithms-content a:hover{cursor:pointer}.algorithm-list{visibility:hidden;left:100%;top:0%;position:absolute;z-index:99}.algorithm:hover .algorithm-list{visibility:visible}.tooltip button{margin-left:16px;padding:1px 0;width:120px}.dark-mode .sorting-menu{background-color:#3b3b3b79}.dark-mode .description{font-size:18px;color:#fff}.sorting-content .buttons,.sorting-content .algorithms-content{display:flex;flex-direction:column}.sorting-content .buttons button{display:flex;justify-content:center;align-items:center;border:none;height:50px;cursor:pointer;font-size:13px;font-family:roboto condensed,sans-serif;font-weight:500;text-align:center}.light-mode .sorting-content button,.light-mode .sorting-content a{background-color:#c2dde3}.light-mode .sorting-content button:disabled{opacity:.5}.dark-mode .sorting-content button,.dark-mode .sorting-content a{background-color:#c2dde33f;color:#fff}.dark-mode .sorting-content button:disabled{opacity:.5}.sort-button span{transform:scaleY(-1);display:inline-block}.buttons button span{font-size:18px;margin:0 3px}.buttons button div{margin:0 3px}.sorting-content button:hover:enabled,.sorting-content .algorithm:hover{background-color:#60aaca;color:#fff}.dark-mode .sorting-content button:hover:enabled{background-color:#262626c2}.dark-mode .sorting-content .algorithm:hover,.dark-mode .sorting-content .algorithm-list{background-color:#262626c2}.number{margin:0 1px;font-size:12px;width:25px;padding-top:5px;text-align:center;border:1px solid #2d2d2d99;background-color:#52525233}.dark-mode .number{border:1px solid rgb(222,222,222)}.sliders{font-size:14px}.slider{margin:15px 0}.slider-input{margin:0;padding:0;width:105px}@media screen and (max-width: 500px){.sorting-content{flex-direction:column;height:90vh}.sorting-menu{flex-direction:row;align-items:center;height:15%;width:100%;padding:10px 0;border-right:0px;border-bottom:2px solid rgb(136,136,136)}.algorithms-content{display:flex;flex-direction:row;width:35%}#numbers{width:100%;height:700px;padding:0;margin:50px auto auto;overflow-x:scroll}.algorithms-content .tooltiptext{top:100%;left:48%}.algorithm-list button{margin-left:0;width:90px;height:32px!important}.buttons{width:25%}.sliders{margin:0 5px}.slider{padding:8px 0;margin:0}.algorithms-content,.buttons{margin:0 15px}.number{background-color:#b3b3b3;border:0px}}