.home-container{display:flex;justify-content:center;align-items:center;width:100vw;min-height:100vh;overflow-x:hidden;padding:2rem}.home-container .home-intro{width:60%;display:flex;flex-direction:column;gap:1rem;animation:slideInFromLeft 3s ease-out}.home-container .home-hello{color:#fff;font-size:clamp(2.3rem,4vw,2.5rem)}.home-container h2{color:hsla(0,0%,100%,.8);font-size:clamp(1.4rem,3vw,1.8rem);line-height:1.1cm;font-weight:500}.home-container h2 span{color:#4299e1}.home-container button{padding:.6rem 1.2rem;border-radius:5px;background-color:rgba(56,161,105,.667);color:#fff;font-weight:bolder;margin-top:2rem;transition:all .3s;cursor:pointer}.home-container button:hover{background-color:rgba(56,161,105,.502)}.home-container a{align-self:flex-start}.home-container .floating-person{z-index:1;animation:floatingPersonAnimation 2.5s ease-out;scale:1.2}@media screen and (width < 1000px){.home-container{flex-direction:column-reverse}.home-container .floating-person{scale:1}.home-container .home-intro{align-items:center}.home-container h2{text-align:center}.home-container a{align-self:center}}.home-wrap{height:100vh;width:100vw;padding:0 2rem 2rem}.home-wrap,.homepanel{display:grid;place-items:center}.homepanel{max-height:100vh;max-width:1100px;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(5,1fr);grid-template-areas:". . . person person person person . . ." "projects . . person person person person . . certifications" ". experience experience . about about . contact contact ." ". experience experience . about about . contact contact ." ". . . . about about . . . ."}.homepanel a[href="/projects"]{grid-area:projects}.homepanel a[href="/certifications"]{grid-area:certifications}.homepanel a[href="/experience"]{grid-area:experience}.homepanel a[href="/about"]{grid-area:about}.homepanel a[href="/contact"]{grid-area:contact}.homepanel .float-person-nav{grid-area:person;animation:floatingNav 3s ease-out;margin-bottom:-5rem}@media screen and (width < 1024px){.homepanel .float-person-nav{display:none}}@media screen and (width < 768px){.homepanel{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);grid-template-areas:". projects . certifications ." "experience . about . contact" ". . about . ."}}@media screen and (width < 680px){.homepanel{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,1fr);grid-template-areas:"projects . certifications" "projects . certifications" "experience . contact" ". about ."}}.nav-tab{rotate:y -90deg;position:relative;height:126px;aspect-ratio:1/1;border-radius:50%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding-bottom:1.5rem;background-size:contain!important;background-position:50%!important;overflow:hidden;z-index:2;cursor:pointer;animation:flip 1s ease-out forwards;animation-delay:var(--delay);transition:scale .3s}.nav-tab:hover{scale:1.2;transition:scale .3s}.nav-tab .nav-tab-title{color:#f5f5f5;background-color:rgba(0,0,0,.6);width:100%;mix-blend-mode:multiply}.icon:after{animation:shine 5s ease-in-out infinite;animation-fill-mode:forwards;animation-delay:.3s;content:"";position:absolute;top:-110%;left:-210%;width:200%;height:200%;opacity:0;transform:rotate(30deg);background:hsla(0,0%,100%,.13);background:linear-gradient(90deg,hsla(0,0%,100%,.13) 0,hsla(0,0%,100%,.13) 77%,hsla(0,0%,100%,.5) 92%,hsla(0,0%,100%,0))}.icon:active:after,.icon:hover:after{opacity:0}@keyframes shine{10%{opacity:1;top:-30%;left:-30%;transition-property:left,top,opacity;transition-duration:.7s,.7s,.15s;transition-timing-function:ease}to{opacity:0;top:-30%;left:-30%;transition-property:left,top,opacity}}@keyframes slideInFromLeft{0%{translate:-500px;opacity:.1}70%{opacity:.6}to{translate:0;opacity:1}}@keyframes floatingPersonAnimation{0%{translate:500px -600px;opacity:0}to{transform:translate(0);opacity:1}}@keyframes floatingNav{0%{opacity:0}to{opacity:1}}@keyframes flip{0%{rotate:y -90deg}to{rotate:y 0deg}}.lang-badge{position:relative;background-size:contain;background-repeat:no-repeat;border-radius:1rem;height:28px;scale:.5;animation:badgeBounce 8s ease-in-out infinite alternate}.lang-badge:first-of-type{top:10.5rem;left:10px;background-image:url(https://img.shields.io/badge/NextJS-black?style=for-the-badge&logo=next.js&logoColor=white);width:93.5px}.lang-badge:nth-of-type(2){top:18rem;left:-20px;background-image:url(https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white);width:126.5px;animation-delay:.5s;transition:cubic-bezier(.075,.82,.165,1)}.lang-badge:nth-of-type(3){top:7rem;right:-18rem;background-image:url(https://img.shields.io/badge/Python-366c9c?style=for-the-badge&logo=python&logoColor=f7cb3f);width:97.5px;animation-delay:1s}.lang-badge:nth-of-type(4){top:14rem;right:-18rem;background-image:url(https://img.shields.io/badge/Apache%20Kafka-000?style=for-the-badge&logo=apachekafka);width:145px;animation-delay:1.5s}.lang-badge-mob{position:relative;background-size:contain;background-repeat:no-repeat;border-radius:1rem;height:28px;scale:.5;animation:badgeBounce2 8s ease-in-out infinite alternate}.lang-badge-mob:first-of-type{top:4rem;background-image:url(https://img.shields.io/badge/NextJS-000000?style=for-the-badge&logo=next.js&logoColor=white);width:93.5px}.lang-badge-mob:nth-of-type(2){top:8.8rem;left:-20px;background-image:url(https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white);width:126.5px;animation-delay:.5s;transition:cubic-bezier(.075,.82,.165,1)}.lang-badge-mob:nth-of-type(3){top:1rem;left:60%;background-image:url(https://img.shields.io/badge/Python-366c9c?style=for-the-badge&logo=python&logoColor=f7cb3f);width:97.5px;animation-delay:1s}.lang-badge-mob:nth-of-type(4){top:5.5rem;left:60%;background-image:url(https://img.shields.io/badge/Apache%20Kafka-000?style=for-the-badge&logo=apachekafka);width:145px;animation-delay:1.5s}#eyeb{transform:translateY(-9px);animation:eyeb 5s linear infinite}@keyframes eyeb{0%{transform:translateY(-10);-ms-transform:translateY(-10);-moz-transform:translateY(-10)}25%{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0)}75%{transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0)}to{transform:translateY(10);-moz-transform:translateY(10);-ms-transform:translateY(10)}}#mouth{transform:translateY(-5px);-ms-transform:translateY(-5px);-moz-transform:translateY(-5px);animation:mouth 5s linear infinite}@keyframes mouth{0%{transform:translateY(-10);-ms-transform:translateY(-10);-moz-transform:translateY(-10)}25%{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0)}75%{transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0)}to{transform:translateY(10);-moz-transform:translateY(10);-ms-transform:translateY(10)}}#eyey2{transform:translateX(-2px);-moz-transform:translateX(-2px);-ms-transform:translateX(-2px);animation:eyey2 4s linear infinite}@keyframes eyey2{0%{transform:translateX(-2);-ms-transform:translateX(-2);-moz-transform:translateX(-2)}25%{transform:translateX(2px);-moz-transform:translateX(2px);-ms-transform:translateX(2px)}75%{transform:translateX(-2px);-ms-transform:translateX(-2px);-moz-transform:translateX(-2px)}to{transform:translateX(2);-ms-transform:translateX(2);-moz-transform:translateX(2)}}#notebook{transform:translateY(-4px);-moz-transform:translateY(-4px);-ms-transform:translateY(-4px);animation:notebook 6s linear infinite}@keyframes notebook{0%{transform:translateY(-4)}25%{transform:translateY(0)}75%{transform:translateY(0)}to{transform:translateY(4)}}#legs{transform:translateY(-9px);animation:legs 6s infinite}@keyframes legs{0%{transform:translateY(-10);-ms-transform:translateY(-10);-moz-transform:translateY(-10)}25%{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0)}75%{transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0)}to{transform:translateY(10);-moz-transform:translateY(10);-ms-transform:translateY(10)}}#pe{animation:pe 6s infinite}@keyframes pe{0%{transform:rotateX(2deg);-ms-transform:rotateX(2deg);-moz-transform:rotateX(2deg)}}#shirt{transform:translateY(-9px);-ms-transform:translateY(-9px);-moz-transform:translateY(-9px);animation:shirt 6s infinite}@keyframes shirt{0%{transform:translateY(-10);-ms-transform:translateY(-10);-moz-transform:translateY(-10)}25%{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0)}75%{transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0)}to{transform:translateY(10);-moz-transform:translateY(10);-ms-transform:translateY(10)}}#tshirt{transform:translateY(-9px);-ms-transform:translateY(-9px);-moz-transform:translateY(-9px);animation:tshirt 6s infinite}@keyframes tshirt{0%{transform:translateY(-10);-ms-transform:translateY(-10);-moz-transform:translateY(-10)}25%{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0)}75%{transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0)}to{transform:translateY(10);-moz-transform:translateY(10);-ms-transform:translateY(10)}}#head{transform:translateY(-9px);-ms-transform:translateY(-9px);-moz-transform:translateY(-9px);animation:head 6s infinite}@keyframes head{0%{transform:translateY(-8)}25%{transform:translateY(0)}75%{transform:translateY(0)}to{transform:translateY(8)}}#ears{animation:ears 6s linear infinite}@keyframes ears{0%{transform:translateY(-10);-ms-transform:translateY(-10);-moz-transform:translateY(-10)}25%{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0)}75%{transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0)}to{transform:translateY(10);-moz-transform:translateY(10);-ms-transform:translateY(10)}}#brows{animation:brows 6.1s linear infinite}@keyframes brows{0%{transform:scale(.96)}25%{transform:scale(1)}75%{transform:scale(1)}to{transform:scale(.96)}}@keyframes badgeBounce{0%{translate:0 0;rotate:0deg;scale:.6}30%{translate:0 -7px;rotate:-10deg;scale:.8}50%{translate:0 -10px;rotate:0deg;scale:.85}to{translate:0 0;rotate:10deg;scale:.9}}@keyframes badgeBounce2{0%{translate:0 0;rotate:0deg;scale:.5}30%{translate:0 -7px;rotate:-10deg;scale:.55}50%{translate:0 -10px;rotate:0deg;scale:.45}to{translate:0 0;rotate:10deg;scale:.6}}