*,*:before,*:after{box-sizing:border-box}html,body,div,span,object,iframe,figure,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,em,img,small,strike,strong,sub,sup,tt,b,u,i,ol,ul,li,fieldset,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,canvas,embed,footer,header,nav,section,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;text-size-adjust:none}footer,header,nav,section,main{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}input{-webkit-appearance:none;border-radius:0}h1,h2{font-weight:700}h3,h4{font-weight:600}h1{font-size:2.4em;margin-bottom:.6em}h2{font-size:2em;margin-bottom:.4em}h3{font-size:1.6em;margin-bottom:.3em}h4{font-size:1.4em;margin-bottom:.8em}h5,h6{font-weight:600}h5{font-size:1em;margin-bottom:.6em}h6{font-size:.8em;margin-bottom:.4em}p{font-size:.9em}html,body,#app{height:100%;width:100%;margin:0;padding:0;position:relative}html.dark-mode{filter:invert(1)}.distorted{filter:url(#wavy)}.dg.ac{display:none}#canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}#canvas canvas{display:block;width:100%;height:100%}#portfolio{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;padding:1em;width:1080px;position:absolute;left:50%;transform:translate(-50%)}::selection{background:#1b52bf;color:#fff}b{font-weight:600}body,a{cursor:none}.cursor{width:var(--size);height:var(--size);border-radius:50%;position:absolute;left:0;top:0;pointer-events:none;z-index:100}.cursor :hover,.cursor--large{--size: 2em;border:.05em solid #1B52BF}.cursor--small{--size: .5em;background:#1b52bf;transform:translate(-50%,-50%)}header{padding:0 1.2rem 1.2rem}header div{padding:1.2em}header section.first{margin-bottom:2em}header section.first .hello,header section.first .intro{display:inline-block}header section.first .hello{width:33.33%;vertical-align:bottom}header section.first .hello h1{margin-bottom:0}header section.first .intro{width:66.66%;border-left:.05em solid #000000}header section.first .intro p{font-size:.96em;line-height:1.56em}section.second .name{margin:1em 0;text-align-last:justify;border-top:.05em solid #000;border-bottom:.05em solid #000}section.second .name h3{font-size:large;margin-bottom:0}.resume{display:flex;flex-wrap:wrap}.resume section[class^=col-]{width:33.33%;padding:1.2em;display:flex;flex-direction:column;justify-content:space-between}.resume .bold,.resume .link{font-weight:600}.resume .bold span,.resume .link span{font-weight:400}.resume .link{color:#000}.resume .extra-info{font-size:.8em;font-style:italic;line-height:1.28em;text-align:right;margin:.2rem 0 .8rem}.resume p{line-height:1.44em}.resume .col-1 .intro{display:flex;justify-content:space-between}.resume .col-1 .intro .face{width:76%;margin-bottom:1.6em}.resume .col-1 .edu .school,.resume .col-1 .edu .job,.resume .col-1 .work .school,.resume .col-1 .work .job{display:flex;align-items:center;margin:1.2em 0}.resume .col-1 .edu .school:last-child,.resume .col-1 .edu .job:last-child,.resume .col-1 .work .school:last-child,.resume .col-1 .work .job:last-child{margin-bottom:0}.resume .col-1 .edu .school img,.resume .col-1 .edu .job img,.resume .col-1 .work .school img,.resume .col-1 .work .job img{width:20%;margin-right:.8em}.resume .col-1 .edu .job.info,.resume .col-1 .work .job.info{text-align:right;justify-content:flex-end}.resume .col-1 .edu{margin-bottom:1.6em}.resume .col-1 .edu .start{text-align:right}.resume .col-2{flex-direction:column;border-right:.05em solid #000;border-left:.05em solid #000}.resume .col-2 .skills .on-off,.resume .col-2 .skills .front-end{margin-bottom:1.2rem}.resume .col-2 .skills .front-end{margin-bottom:0}.resume .col-2 .skills .front-end .front-end-icons .css,.resume .col-2 .skills .front-end .front-end-icons .node,.resume .col-2 .skills .front-end .front-end-icons .git{display:flex;flex-wrap:wrap;overflow:hidden}.resume .col-2 .skills .front-end .front-end-icons img{width:20%;padding-bottom:.8rem}.resume .col-2 .skills .front-end .front-end-icons .level{font-size:1.6em;text-align:center;color:#444;padding-top:.2em;display:inline-block}.resume .col-2 .skills .front-end .front-end-icons .level span{font-size:.8em}.resume .col-2 .skills .front-end .front-end-icons .text{width:80%;padding:0 .8rem 1.6rem}.resume .col-2 .projects .project{display:flex;align-items:center;margin:1.2rem 0}.resume .col-2 .projects .project img{width:25%;margin-right:.8rem}.resume .col-3 .soft-skills{margin-bottom:1.6rem}.resume .col-3 .soft-skills .soft-skill{display:flex;align-items:flex-start;margin-bottom:1.6rem}.resume .col-3 .soft-skills .soft-skill img{width:40px;height:auto;flex-shrink:0;margin-top:.2em}.resume .col-3 .soft-skills .soft-skill .bar-wrapper{flex:1;display:flex;flex-direction:column;position:relative;top:1.52rem;left:-.08rem}.resume .col-3 .soft-skills .soft-skill .bar-wrapper .bar{width:100%;height:1.2em;border:.05em solid #000;background:transparent;position:relative}.resume .col-3 .soft-skills .soft-skill .bar-wrapper .pro-bar{position:absolute;height:1.2em;background:#000;top:0;left:0;animation:fluctuate 6s infinite ease-in-out;transform-origin:left}.resume .col-3 .soft-skills .soft-skill .bar-wrapper .pro-bar.psd-pro-bar{width:70%;animation-delay:.1s}.resume .col-3 .soft-skills .soft-skill .bar-wrapper .pro-bar.ai-pro-bar{width:64%;animation-delay:.3s}.resume .col-3 .soft-skills .soft-skill .bar-wrapper .pro-bar.id-pro-bar{width:56%;animation-delay:.2s}.resume .col-3 .soft-skills .soft-skill .bar-wrapper .pro-bar.pr-pro-bar{width:44%;animation-delay:.4s}.resume .col-3 .soft-skills .soft-skill .bar-wrapper .pro-bar.ae-pro-bar{width:48%;animation-delay:.5s}.resume .col-3 .soft-skills .soft-skill .bar-wrapper .pro-bar.live-pro-bar{width:52%;animation-delay:.6s}.resume .col-3 .soft-skills .soft-skill .bar-wrapper .label-soft-skill{width:100%;margin:.4em 0;font-size:.8em;font-style:italic;text-align:right}@keyframes fluctuate{0%{transform:scaleX(1)}25%{transform:scaleX(.98)}50%{transform:scaleX(1.04)}75%{transform:scaleX(.96)}to{transform:scaleX(1)}}.resume .col-3 .interests,.resume .col-3 .contact,.resume .col-3 .langs{margin-bottom:1.6rem}.resume .col-3 .langs .level{display:flex;justify-content:space-around;text-align:center;font-weight:600}.resume .col-3 .langs .level label,.resume .col-3 .langs .level span{display:block}.resume .col-3 .langs .level span{font-weight:500;font-size:.8em;line-height:1.2em;margin-top:.3em}.resume .col-3 .interests .points{display:flex;align-items:flex-end;justify-content:space-between}.resume .col-3 .interests .points .interest{text-align:center}.resume .col-3 .interests .points .interest img{width:48px}.resume .col-3 .interests .points .interest p{font-size:.8em;line-height:1.2em}.resume .col-3 .contact .points .point{margin-bottom:.8em}.resume .col-3 .contact .points .point p{line-height:1em}.resume .col-3 .bye h4{font-size:2em}.resume .col-3 .bye h6{text-align:right;margin-bottom:0;font-style:italic;line-height:1em;margin-top:.8em}.switch{position:relative;display:inline-block;width:50px;height:24px}.switch svg.moon,.switch svg.sun{color:#fff;z-index:1;position:relative}.switch svg.moon{top:2px;left:4px}.switch svg.sun{top:2px;right:-6px}.switch input{opacity:0;width:0;height:0}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#000;transition:.4s;border-radius:24px;cursor:pointer}.switch .slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}footer .bye{margin:1.2em 0;padding:1.2em;text-align-last:justify;border-top:.05em solid #000;border-bottom:.05em solid #000}footer .bye h3{font-size:small;margin-bottom:0}@media only screen and (max-width: 1024px){#portfolio{width:100%}}@media only screen and (max-width: 768px){.cursor{visibility:hidden}#portfolio header,#portfolio section[class^=col-]{padding:.6em}#portfolio header section.first{margin-bottom:0}#portfolio header section.first .hello,#portfolio header section.first .intro{width:100%}#portfolio header section.first .hello{padding:0 4.8em 2.4em}#portfolio header section.first .intro{border-top:.05em solid #000000;border-left:0;padding:2em 1em}#portfolio header section.second .name{margin:0;text-align-last:center;text-align:center}#portfolio .resume section[class^=col-]{width:100%}#portfolio .resume .col-1 .face{width:80%}#portfolio .resume .col-1 .work{margin-bottom:1.6rem}#portfolio .resume .col-2{border:0}#portfolio .resume .col-2 .projects,#portfolio .resume .col-2 .skills{margin-bottom:1.6rem}#portfolio .resume .col-3 .topic .level,#portfolio .resume .col-3 .topic .points{justify-content:space-around}}@media only screen and (max-width: 560px){footer .bye{text-align-last:center}}