*{box-sizing:border-box;margin:0;padding:0}html{box-sizing:border-box;scroll-behavior:smooth;scroll-padding-top:17vh}@font-face{font-family:Monserat;src:url(../fonts/Montserrat-VariableFont_wght.ttf) format("truetype");font-weight:400;font-style:normal}body{font-family:Monserat;margin:0;padding:0}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{font-weight:400;margin:0;padding:0}.hidden{opacity:0}button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:.5rem 1rem;transition:background-color .3s ease,color .3s ease}button:focus{outline:none}button.dark{background-color:#616161;color:#f6f6f6}button.dark:hover{background-color:#7b7b7b}button.light{background-color:#f6f6f6;color:#616161}button.light:hover{background-color:#ddd}.heightFill,dialog,dialog[open],html{height:-webkit-fill-available;height:-moz-available;height:fill-available}.widthFill,dialog,dialog[open],.descriptionFooter{width:-webkit-fill-available;width:-moz-available;width:fill-available}.mainContainer{display:flex}.middleContainer{width:-webkit-fill-available;width:-moz-available;width:fill-available}.header{position:sticky;top:0;background-color:#f6f6f6b3;z-index:2}.header nav{display:flex;justify-content:center;margin:0 .5rem}@media screen and (max-width: 768px){.header nav{justify-content:space-between}}.header nav a{margin:.5rem;text-decoration:none;color:#434343}@media screen and (min-width: 1024px){.header nav a{margin:calc(.75rem + .5vw)}}.header nav .active:after{content:"";display:block;height:2px;background-color:#616161;margin-top:4px}aside{position:fixed;display:flex;flex-direction:column;gap:1rem;padding:.5rem;background-color:#f6f6f699;top:50%;left:auto;right:0;z-index:2}aside svg{width:26px;height:100%;vertical-align:middle;fill:#767676;transition:fill .3s ease}aside svg:hover{fill:#616161}aside,.header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}a{color:#767676;cursor:pointer;transition:color .3s ease;text-decoration:underline;text-decoration-style:solid}a:hover{color:#000}.socialContainer{right:0;display:flex;flex-direction:column}.socialContainer svg{width:24px;height:24px;margin:.5rem 1.5rem;transition:fill .3s ease;fill:#767676}.socialContainer svg:hover{fill:#616161}.intro{display:flex;flex-direction:column;position:relative;background:#f6f6f6;overflow:hidden;min-height:95vh}.intro:after{content:"";transition:transform .5s ease-in-out;background:#347ca2;position:absolute;top:0;bottom:0;left:0;width:100%;transform:translateY(-50%)}@media screen and (min-width: 768px){.intro:after{transform:translate(-50vw)}}.intro .description{z-index:1;color:#f6f6f6;position:absolute;top:50%;bottom:50%;right:auto;transition:opacity .5s ease-in-out;left:8vw}@media screen and (max-width: 1024px){.intro .description{top:35%;right:auto;bottom:auto;left:auto;padding:0 1.5rem}}.intro h1{z-index:1;text-align:center;font-size:15vw;margin:auto;transition:transform .5s ease-in-out}.intro span{transition:color .2s ease-in-out}.intro span:first-child{color:#000}.intro span:last-child{display:inline-flex;transition:width .2s ease-in-out;width:1ch;color:#347ca2}.introShowDescription:after{transform:translateY(0)}@media screen and (min-width: 768px){.introShowDescription:after{transform:translate(-20vw)}}.introShowDescription h1{transform:translateY(calc(41vh + 6vw)) scale(.8)}@media screen and (min-width: 768px){.introShowDescription h1{transform:translate(26.75vw,-3.5vw) rotate(-90deg) scale(.6)}}.introShowDescription span:first-child{color:#f6f6f6}.introShowDescription span:last-child{color:#0000;width:0px}.skills{display:flex;flex-direction:column;align-items:center}.buddha #wholeBody{animation:buddhaHover 3s ease-in-out infinite}.buddha #bodyShadow{transform-origin:bottom center;animation:buddhaShadow 3s ease-in-out infinite}.buddha #arm_1{transform-origin:top center;animation:armSlightRotation 3s ease-in-out infinite;animation-delay:-2.4s}.buddha #arm_2{transform-origin:top center;animation:armSlightRotation 3s ease-in-out infinite;animation-delay:-1.3s}.buddha #arm_3{transform-origin:top center;animation:armSlightRotation 3s ease-in-out infinite;animation-delay:-2s}.buddha #arm_4,.buddha #arm_5{transform-origin:top center;animation:armSlightRotation 3s ease-in-out infinite;animation-delay:-1.9s}.buddha #arm_6{transform-origin:top center;animation:armSlightRotation 3s ease-in-out infinite;animation-delay:-.6s}.buddha #arm_7{transform-origin:top center;animation:armSlightRotation 3s ease-in-out infinite;animation-delay:-.4s}.buddha #arm_8{transform-origin:top center;animation:armSlightRotation 3s ease-in-out infinite;animation-delay:-2.3s}.skillsTitleContainer{margin-top:-30vh;pointer-events:none;height:60vh;position:relative;z-index:-1;text-align:center}.skillsTitle{position:sticky;line-height:.71;top:18vh;font-size:clamp(2.5em,17vw,9rem);color:#a23434}.skillsContainer{display:grid;grid-template-columns:repeat(9,minmax(115px,1fr));grid-template-rows:repeat(3,25ch);grid-auto-flow:column;margin:0 auto}@media screen and (max-width: 1024px){.skillsContainer{grid-template-columns:repeat(6,14vw);grid-template-rows:repeat(1,25ch)}}.buddhaContainer{display:none;grid-column:span 3;grid-row:span 1/3;padding-left:1.5rem}@media screen and (min-width: 1025px){.buddhaContainer{display:block}}.skillTreeContainer{background-color:#a23434;position:relative;grid-column:span 6;grid-row:span 3}@media screen and (max-width: 1024px){.skillTreeContainer{font-size:.9em}}@media screen and (min-width: 1024px){.skillTreeContainer{margin:0 1.5rem}}.skillBranches{display:grid;grid-template-columns:repeat(2,auto)}@media screen and (min-width: 768px){.skillBranches{grid-template-columns:repeat(6,auto)}}@media screen and (min-width: 1024px){.skillBranches{grid-template-columns:repeat(4,auto)}}.branchTitle{font-size:1.25em;font-weight:500;padding:.5rem 1rem;color:#f6f6f6;border-bottom:2px solid transparent;text-align:center;cursor:pointer;transition:all .3s ease}.branchTitle:hover{background-color:#f6f6f626;border-left-width:6px}.branchTitle:not(:first-child){border-left:2px solid rgba(246,246,246,.8)}.branchTitle.active{background-color:#f6f6f633;border-bottom:2px solid rgba(246,246,246,.2);box-shadow:0 0 0 2px #f6f6f64d}.skilNode{display:flex;align-items:center;justify-content:center;background-color:#f6f6f60d;cursor:pointer;transition:all .3s ease;border:2px solid rgba(246,246,246,.2)}.skilNode:hover{transform:scale(1.05);background-color:#f6f6f61a}.skilNode.active{background-color:#f6f6f626;border-color:#f6f6f699;box-shadow:0 0 0 2px #f6f6f64d}.skilNode .nodeIcon{font-size:1.8rem}.skilNode .nodeLabel{font-size:.8em;text-align:center;color:#f6f6f6;font-weight:500;max-width:90px}.skillDetailsPanel{display:grid;grid-auto-rows:max-content;gap:1.5rem;background-color:#f6f6f60d;padding:1.5rem;border-top:2px solid rgba(246,246,246,.2)}@media screen and (max-width: 1024px){.skillDetailsPanel{min-height:40ch}}.skillDetailsPanel .skillContent{display:none;opacity:0}.skillDetailsPanel .skillContent.active{display:contents;animation:fadeIn .5s ease forwards}.skillDetailsPanel .skillContent h1{font-size:1.2em;color:#f6f6f6;position:relative;padding:.5rem 0}.skillDetailsPanel .skillContent h1:after{content:"";position:absolute;bottom:-3px;left:0;width:100%;height:1.2px;background-color:#f6f6f64d}.skillDetailsPanel .skillContent ul{padding-top:.35rem;padding-left:1.5rem;margin-bottom:0;font-size:.9em}.skillDetailsPanel .skillContent ul li{color:#f6f6f6;padding:.35rem 0}@media screen and (min-width: 768px){.skillDetailsPanel .skillContent ul li{max-width:60ch}}.skillFooter{padding:2rem 1.5rem;margin:-1.5vh 1.5rem 0 1.5rem;max-width:150ch;background:#f6f6f6;font-size:.9em}.portfolio{margin:15vh auto 1.5rem auto;padding:0 1.5rem;max-width:150ch}.arrowLeft,.arrowRight{transition:opacity .3s ease;cursor:pointer}@media screen and (max-width: 1024px){.arrowLeft,.arrowRight{position:absolute;top:auto;bottom:auto;z-index:2;background-color:#f6f6f680}}.arrowLeft.hidden,.arrowRight.hidden{pointer-events:none}.arrowLeft svg,.arrowRight svg{width:3em;height:3em;stroke:#767676;transition:stroke .3s ease}@media screen and (min-width: 1024px){.arrowLeft svg,.arrowRight svg{width:5em;height:5em}}.arrowLeft svg:hover,.arrowRight svg:hover{stroke:#616161}@media screen and (max-width: 1024px){.arrowLeft{left:0}.arrowRight{right:0}}.portfolioItem{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(4,1fr);background-color:#f6f6f6;grid-auto-rows:max-content}.portfolioItem img{opacity:0;display:none;-webkit-user-select:none;user-select:none}.portfolioItem img.active{display:block;animation:fadeIn .3s ease forwards}.description{grid-column:span 10;grid-row:span 4;display:grid}@media screen and (min-width: 1024px){.description{grid-column:span 3;grid-template-rows:repeat(4,1fr);grid-auto-rows:min-content}}.description h2{font-size:1.5em;color:#616161;-webkit-user-select:none;user-select:none}.description h2,.description p,.description a{padding:1.5rem}.description h2,.description a{text-align:center}.description a{width:fit-content;height:fit-content;margin:0 auto}.description p{line-height:1.4;max-width:58ch}@media screen and (max-width: 768px){.description p{padding:0;font-size:1.1em}}.imageContainerParent{display:flex;justify-content:center;align-items:center;grid-column:span 10;grid-row:span 4;position:relative}@media screen and (min-width: 1024px){.imageContainerParent{grid-column:span 7;padding:2rem}}.imageContainer{max-width:800px}[data-portfolio-item]{display:none;background-color:#fff;grid-row:span 3}[data-portfolio-item].active{display:grid;opacity:1;animation:fadeIn .3s ease forwards}.descriptionFooter{margin-top:1.5rem;font-size:clamp(.8em,2vw,3em);text-align:center;color:#767676;grid-row:span 1}.descriptionFooter h1:first-child{line-height:.86}.descriptionFooter h1:last-child{background-color:#f6f6f6;padding:.5rem 0}.contact{margin:10vh auto 0;display:flex;flex-direction:column;align-items:center}.housesContainer{display:grid;grid-auto-flow:column;align-items:flex-end;border-bottom:4px solid rgb(118,118,118);padding:0 1.5rem}.housesContainer img{transform:rotateX(-90deg) perspective(500px);transition:transform .5s cubic-bezier(.67,0,.29,.99);transform-origin:bottom;-webkit-user-select:none;user-select:none}.housesContainer img:nth-child(1){transition-delay:.1s}.housesContainer img:nth-child(2){transition-delay:.2s}.housesContainer img:nth-child(3){transition-delay:.3s}.housesContainer img:nth-child(4){transition-delay:.4s}.housesContainer img:nth-child(5){transition-delay:.5s}.showHouses img{transform:rotateX(0) perspective(500px)}svg.email{transform:translateY(-15%);transition:transform .3s cubic-bezier(.86,0,.07,1)}svg.email #letter{transition:transform .3s cubic-bezier(.86,0,.07,1);transform:translateY(49%)}svg.email #envelopeTriangleUp{transition:clip-path .2s cubic-bezier(1,.15,.73,1.27),transform .3s cubic-bezier(.86,0,.07,1);transform-origin:center;clip-path:inset(-100% 0 0 -10%)}.emailParent:hover .email{transform:translateY(0)}.emailParent:hover #letter{transform:translateY(10%)}.emailParent:hover #envelopeTriangleUp{transform:rotateX(180deg);clip-path:inset(-16% 0 0 0)}svg.phone #wave,svg.phone #wave2{transform-origin:center;opacity:.7}.phoneParent:hover #wave,.phoneParent:hover #wave2{animation:waveAnimation .9s ease infinite}.phoneParent:hover #wave2{animation-delay:.05s}.phoneParent:hover #phoneGroup{animation:phoneVibrate .7s ease infinite}svg.location{transform-origin:top;padding:.5rem}.locationParent:hover svg{animation:jumpAndSquish 1.5s ease infinite}.infoContainer{background-color:#f6f6f6;padding:2rem;margin:0 -5vw -3vh -5vw;position:relative;text-align:center}.infoContainer h2{color:#616161}.contactContainer{display:flex;flex-direction:column;gap:.5rem}.contactContainer div{display:grid;grid-template-columns:3em max-content;align-items:center;gap:1rem}.contactFooter{width:100%;background-color:#000;color:#f6f6f6;text-align:center;padding:5vh 2rem 2rem 2rem}.galleryContainer{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.galleryContainer>div{display:flex}.galleryContainer>div img{object-fit:cover}.galleryContainer dialog{overflow:hidden}dialog:modal{animation:fadeIn .3s quadratic(.5,0,.5,1)}dialog[open]{display:flex}dialog{place-content:center;background-color:transparent;border:none}dialog::backdrop{background-color:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}dialog:focus{outline:none}dialog .closeButton{top:0;right:0;position:absolute}dialog img{transition:opacity .3s ease}dialog .active{animation:fadeIn .2s ease forwards}dialog .popupContent{display:flex;justify-content:center;align-items:center;position:relative}dialog .popupContent *{-webkit-user-select:none;user-select:none}.loading:after{content:"Loading...";font-size:1.5em;color:#767676;animation:fadeIn 1s ease-in-out infinite;-webkit-user-select:none;user-select:none}@keyframes introToBlue{0%{background:linear-gradient(to left,#f6f6f6 50vw,#347ca2 50vw)}to{background:linear-gradient(to right,#347ca2 80vw,#f6f6f6 20vw)}}@keyframes buddhaHover{0%{transform:translateY(0)}50%{transform:translateY(-7px)}to{transform:translateY(0)}}@keyframes buddhaShadow{0%{transform:scale(1)}50%{transform:scale(.9)}to{transform:scale(1)}}@keyframes armSlightRotation{0%{transform:rotate(0)}50%{transform:rotate(1deg)}to{transform:rotate(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes waveAnimation{0%{transform:scale(1);opacity:.7}25%{transform:scale(1.1);opacity:.5}50%{transform:scale(.85);opacity:.8}to{transform:scale(1);opacity:.7}}@keyframes phoneVibrate{0%{transform:translateZ(0)}25%{transform:translate3d(1rem,1rem,0)}50%{transform:translate3d(-1rem,0,-1rem)}75%{transform:translate3d(1rem,0,1rem)}to{transform:translateZ(0)}}@keyframes jumpAndSquish{0%{transform:translateY(0) scaleY(1)}35%{transform:translateY(-5%) scaleY(.8)}70%{transform:translateY(-5%) scaleY(.8)}to{transform:translateY(0) scaleY(1)}}