@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;600;800&display=swap);:root{--dark:#222}html[theme=lg]{--light:#222;--dark:#fff}html[theme=dk],html[theme=lg]{--primary:#f26c4f;--green:#0fb}html[theme=dk]{--light:#fff;--dark:#222;--gray:#77777}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body,html{background-color:#222;background-color:var(--dark);color:var(--light);transition:.2s ease}img{width:100%}body,html{font-family:"Poppins",sans-serif;font-size:50.5%;line-height:1.6}@media screen and (min-width:600px){body,html{font-size:60.5%}}@media screen and (min-width:992px){body,html{font-size:62.5%}}@media screen and (min-width:1800px){body,html{font-size:72.5%}}h1{font-size:3.8rem;font-weight:800}h2{font-size:3rem}h2,h3{font-weight:600}h3{font-size:2rem}h4{font-weight:400;font-size:1.8rem}h5{font-weight:600;font-size:1.6rem}p{font-size:1.4rem}p,p.caption{font-weight:400}p.caption{font-size:1rem}span{display:inline-block}a.text-link{color:#f26c4f}a.text-link:hover{text-shadow:0 0 5px #f26c4f,0 0 20px #f26c4f;color:#f2f2f2}.section-container{width:100%;max-width:1920px;margin-left:auto;margin-right:auto}@-webkit-keyframes moveUp{0%{opacity:0;transform:translateY(10rem)}to{opacity:1;transform:translateY(0)}}@keyframes moveUp{0%{opacity:0;transform:translateY(10rem)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes moveDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10rem)}}@keyframes moveDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10rem)}}@-webkit-keyframes rotateHero{0%{transform:rotate(0deg) translate(-50%,-50%)}to{transform:rotate(1turn) translate(-50%,-50%)}}@keyframes rotateHero{0%{transform:rotate(0deg) translate(-50%,-50%)}to{transform:rotate(1turn) translate(-50%,-50%)}}header{position:relative;z-index:99;width:100%;height:15rem}header .header-fixed{position:fixed;width:100%}header .header-inner{width:100%;max-width:1920px;margin-left:auto;margin-right:auto;display:flex;justify-content:space-between;align-items:center;padding:3rem;z-index:99}header .header-inner .header-logo{width:8rem}header .header-inner .header-logo .header-logo__flame{width:8rem;height:8rem;background-color:var(--primary);padding:1rem;transition:.2s ease}header .header-inner .header-logo .header-logo__flame.active{border-top-right-radius:50%;border-bottom-right-radius:50%}header .header-inner .header-navbar{width:100%}@media screen and (min-width:992px){header .header-inner .header-navbar{display:block;margin-left:10rem}}header .header-inner .header-navbar ul{width:100%;list-style:none;display:flex;justify-content:flex-start}header .header-inner .header-navbar ul li{min-width:12rem;text-transform:uppercase;cursor:pointer;display:inline-block;text-align:center}header .header-inner .header-navbar ul li a{cursor:pointer;text-decoration:none;color:var(--light);font-size:1.6rem;font-weight:200;letter-spacing:1.8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:all .2s linear}header .header-inner .header-navbar ul li:hover a,header .header-inner .header-navbar ul li a.active{font-weight:700;color:#fff;text-shadow:0 0 3px #fff,0 0 10px var(--primary),0 0 15px var(--primary),0 0 50px var(--primary)}header .header-inner .header-navbar ul.active li:first-child{-webkit-animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .1s backwards;animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .1s backwards}header .header-inner .header-navbar ul.active li:nth-child(2){-webkit-animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .2s backwards;animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .2s backwards}header .header-inner .header-navbar ul.active li:nth-child(3){-webkit-animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .3s backwards;animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .3s backwards}header .header-inner .header-navbar ul.active li:nth-child(4){-webkit-animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .4s backwards;animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .4s backwards}header .header-inner .header-navbar ul.active li:nth-child(5){-webkit-animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .5s backwards;animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .5s backwards}header .header-inner .header-navbar ul.active li:nth-child(6){-webkit-animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .6s backwards;animation:moveUp .3s cubic-bezier(.91,.18,.21,1.6) .6s backwards}header .header-inner .header-navbar ul.unActive li:first-child{-webkit-animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .1s both;animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .1s both}header .header-inner .header-navbar ul.unActive li:nth-child(2){-webkit-animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .2s both;animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .2s both}header .header-inner .header-navbar ul.unActive li:nth-child(3){-webkit-animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .3s both;animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .3s both}header .header-inner .header-navbar ul.unActive li:nth-child(4){-webkit-animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .4s both;animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .4s both}header .header-inner .header-navbar ul.unActive li:nth-child(5){-webkit-animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .5s both;animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .5s both}header .header-inner .header-navbar ul.unActive li:nth-child(6){-webkit-animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .6s both;animation:moveDown .3s cubic-bezier(.91,.18,.21,1.6) .6s both}header .header-inner .header-hamberger .hamberger-box{position:relative;padding:1rem .5rem;transition:.2s ease;background-color:var(--primary);cursor:pointer}header .header-inner .header-hamberger .hamberger-box span{display:block;width:3rem;height:2px;background-color:#fff6fd}header .header-inner .header-hamberger .hamberger-box span:not(:last-child){margin-bottom:.8rem}header .header-inner .hamberger-box.active{background-color:rvar(--primary);border-top-left-radius:50%;border-bottom-left-radius:50%}header .header-inner .hamberger-box.active span:first-child{transform:rotate(45deg) translateX(7px)}header .header-inner .hamberger-box.active span:last-child{transform:rotate(-45deg) translate(7px)}header .header-navbar.onScroll-bg ul{flex-direction:column;position:absolute;top:80%;right:3rem;width:20rem;border-radius:.3rem;overflow:hidden}header .header-navbar.onScroll-bg ul li{padding:2rem 5rem;background-color:#222;background-color:var(--dark);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.language{margin-right:1rem}.switch{position:relative;display:inline-block;width:6.5rem;height:3rem}.switch .lang-text{position:absolute;font-weight:600;font-size:1.6rem;z-index:3;top:50%;text-transform:uppercase;transition:.2s cubic-bezier(.6,-.28,.735,.045);transform:translate(150%,-50%);color:#fff6fd}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;right:0;bottom:0;background-color:#222;background-color:var(--dark);border:1px solid var(--primary)}.slider,.slider:before{position:absolute;left:0;transition:.2s cubic-bezier(.6,-.28,.735,.045)}.slider:before{content:"";height:2.9rem;width:2.9rem;background-color:var(--primary)}input:checked~.lang-text{transform:translate(30%,-50%)}input:checked+.slider{background-color:var(--primary)}input:checked+.slider:before{background-color:var(--light);transform:translateX(3.5rem)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}html[theme=lg] .hero-stage{background-image:url(/static/media/bg-hero-light.7dfa25e0.jpg);background-position:center 55%}html[theme=dk] .hero-stage{background-image:url(/static/media/bg-hero.dce1902b.jpg)}.hero-stage{margin-left:auto;margin-right:auto;background-color:#222;background-color:var(--dark);width:100%;max-width:1920px;background-repeat:no-repeat;background-size:100%;height:50rem;overflow-y:hidden;padding:0 10rem}.hero-stage div.hero-content{display:flex;justify-content:center;flex-wrap:wrap}@media screen and (min-width:992px){.hero-stage div.hero-content{flex-wrap:nowrap}}.hero-stage div.hero-content .hero_name{position:relative;width:45rem;z-index:2}@media screen and (min-width:992px){.hero-stage div.hero-content .hero_name{z-index:1}}.hero-stage div.hero-content .hero_name p{position:relative;font-weight:600;font-size:7rem;letter-spacing:8px}.hero-stage div.hero-content .hero_name p span{color:var(--primary)}@media screen and (min-width:992px){.hero-stage div.hero-content .hero_name p{left:30rem}}@media screen and (min-width:1800px){.hero-stage div.hero-content .hero_name p{font-size:10rem}}.hero-stage div.hero-content .hero_profile-pic{flex-basis:40rem;opacity:.5;position:absolute}@media screen and (min-width:992px){.hero-stage div.hero-content .hero_profile-pic{position:relative;opacity:1;z-index:1}}.hero-stage div.hero-content .hero_detail{position:relative;top:0;width:40rem}@media screen and (min-width:992px){.hero-stage div.hero-content .hero_detail{top:15rem}}.hero-stage div.hero-content .hero_detail h3{color:var(--primary);letter-spacing:1.5px;text-decoration:underline}.hero-stage div.hero-content .hero_detail h5{margin:1rem 0 1.5rem}.hero-stage div.hero-content .hero_detail p{color:var(--gray)}.dot-rotate{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;width:55rem;height:55rem;border-radius:50%;-webkit-animation:rotateHero 10s linear infinite;animation:rotateHero 10s linear infinite;transform-origin:0 0}.dot-rotate .green-dot{position:relative;top:5%;left:45%;display:inline-block;width:3rem;height:3rem;border-radius:50%;background-color:var(--green)}.dot-rotate .green-dot.dot-1{top:90%}.sub-title{color:#f26c4f;display:flex;align-items:center}.sub-title h3{display:inline-block;text-decoration:underline;text-transform:none;letter-spacing:2px}.sub-title span{display:inline-block;height:3px;width:8rem;background-color:#f26c4f;margin-left:.5rem}.page-title{font-size:6rem;letter-spacing:4px;transform:rotate(-90deg) translate(-90%,-5rem)}.btn,.page-title{display:inline-block}.btn{cursor:pointer;font-size:1.4rem;text-transform:uppercase;text-decoration:unset;letter-spacing:1.5px;padding:.35rem 2rem}.btn:focus{outline:none}.btn-primary{color:#f26c4f;border:2px solid #f26c4f;background-color:transparent;position:relative;transition:.3s ease,transform .1s;z-index:2}.btn-primary:before{z-index:-1;background-color:#f26c4f}.btn-primary:after,.btn-primary:before{content:"";width:0;height:100%;position:absolute;top:0;left:0;transition:.3s ease}.btn-primary:after{z-index:1;background-color:#fff6fd}.btn-primary:hover{color:#fff;border:2px solid #fff}.btn-primary:hover:before{width:100%}.btn-primary:active{transform:scale(.95);overflow:hidden}.btn-primary:active:after{width:100%;-webkit-animation:leftToRight .1s forwards;animation:leftToRight .1s forwards}.btn-primary.linked{color:#f7ce48;border:2px solid #f7ce48}.btn-primary.linked:before{background-color:#f7ce48}.btn-primary.linked:hover{color:#fff;border:2px solid #fff}@-webkit-keyframes leftToRight{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes leftToRight{0%{transform:translateX(0)}to{transform:translateX(100%)}}.ReactModal__Overlay--after-open{background-color:transparent!important;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:100}.modal{position:absolute;top:50%;left:50%;object-position:center;transform:translate(-50%,-50%) scale(0);transition:transform .3s cubic-bezier(.645,.045,.355,1)}.modal:focus{outline:none}.ReactModal__Overlay--after-open .modal{transform:translate(-50%,-50%) scale(1)}.icon-close{position:absolute;font-size:3rem;right:-4rem;top:-4rem;transition:.1s linear;cursor:pointer}.icon-close :hover{transform:scale(1.03)}.icon-close :active{transform:scale(.98)}.modal-project-detail{cursor:ns-resize;min-width:40rem;width:100%;height:100%;max-width:100rem;max-height:65vh;background-color:hsla(0,0%,100%,.3);border-radius:1rem;overflow-y:auto}.modal-project-detail .detail-image-box img{display:block}.detail-text-box{position:absolute;top:10%;right:-10rem;border-radius:.5rem;width:100%;max-width:40rem;padding:2rem;background-color:rgba(29,29,29,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff;cursor:default}.detail-text-box a{color:inherit}.detail-text-box a :hover{color:var(--primary)}.detail-text-box h5{margin-top:.5rem}.detail-text-box .detail-text-box__footer{margin-top:2rem;display:flex;align-items:center;justify-content:space-between}.detail-text-box .detail-text-box__footer .dev-tool{color:var(--primary)}.detail-text-box .detail-text-box__footer .icon{display:inline-block;font-size:2rem;cursor:pointer}.sub-about{position:relative;background-color:#222;padding:8rem 10rem;z-index:1;display:flex;justify-content:center;flex-wrap:wrap}@media screen and (min-width:992px){.sub-about{flex-wrap:nowrap;justify-content:space-between}}@media screen and (min-width:1160px){.sub-about{padding:8rem 22rem}}.sub-about .sub-about_left{max-width:45rem;color:#fff}.sub-about .sub-about_left h5{margin:1rem 0 1.5rem}.sub-about .experience{display:flex;align-items:center;margin-top:3rem}.sub-about .experience span{display:inline-block}.sub-about .experience span:first-child{line-height:1;font-size:10rem;color:#f26c4f}.sub-about .experience span:last-child{margin-top:-.8rem;font-size:3rem;font-weight:100;margin-left:1rem;color:#fff;max-width:20rem}.sub-about .sub-about_right{max-width:45rem;color:#fff}.sub-about .sub-about_right h1.text-title-extra{letter-spacing:2px;font-size:4.2rem}.sub-about .sub-about_right h3{margin:1rem 0;font-weight:400;letter-spacing:1.5px}.sub-about .sub-about_right>a.text-link{display:flex;justify-content:space-between;align-items:center;margin-top:12rem;font-size:3rem}.sub-about .sub-about_right .footer-social{display:flex;font-size:5rem;margin-top:1.2rem}.sub-about .sub-about_right .footer-social>a{display:block}.sub-about .sub-about_right .footer-social>a:not(:last-child){margin-right:3rem}html[theme=lg] .sub-about{border-radius:8rem}.error-style1{padding:5rem 3rem;text-align:center}.error-style1 h1{font-size:6rem;letter-spacing:2px;margin-bottom:3rem}.landing-page{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.landing-page h1{text-align:center;color:#fff6fd;white-space:nowrap;border-right:.15em solid #f26c4f;overflow:hidden;font-size:6rem}.landing-page h1:first-child{-webkit-animation:typing 3.5s steps(30) backwards,blink-caret .5s step-end infinite,gone 1s linear 3.6s forwards;animation:typing 3.5s steps(30) backwards,blink-caret .5s step-end infinite,gone 1s linear 3.6s forwards}.landing-page h1:nth-child(2){-webkit-animation:typing 3.5s steps(30) 3.8s backwards,blink-caret .5s step-end 3.8s backwards,gone 1s linear 9s forwards;animation:typing 3.5s steps(30) 3.8s backwards,blink-caret .5s step-end 3.8s backwards,gone 1s linear 9s forwards}@-webkit-keyframes typing{0%{width:0;opacity:1;visibility:visible}to{width:100%;opacity:1;visibility:visible}}@keyframes typing{0%{width:0;opacity:1;visibility:visible}to{width:100%;opacity:1;visibility:visible}}@-webkit-keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:#f26c4f}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:#f26c4f}}@-webkit-keyframes gone{0%{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}@keyframes gone{0%{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}.contact .mouse-style{background-color:#fff;box-shadow:0 0 2px #f26c4f,0 0 5px #f26c4f,0 0 20px #f26c4f;width:1rem;height:1rem;position:absolute;z-index:1;border-radius:50%}.contact .contact-detail{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100vh;padding-left:20rem;margin-left:auto;margin-right:auto;-webkit-clip-path:circle(100px at 20rem 20rem);clip-path:circle(100px at 20rem 20rem)}.contact .contact-detail img.profile1{position:absolute;bottom:0;width:30rem}.contact .contact-detail img.profile2{position:absolute;bottom:0;right:0;width:40rem}.select-lang{max-width:60rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);top:40%}.select-lang h1{font-size:4rem;color:#f26c4f}.select-lang ul{list-style:none;display:flex;justify-content:center;width:100%;margin-top:5rem}.select-lang ul li{padding:0 2rem;font-size:1.8rem;color:#fff6fd;cursor:pointer;transition:.2s ease}.select-lang ul li:first-child{border-right:3px solid #f26c4f}.select-lang ul li:hover{text-shadow:0 2px 15px #f26c4f}.select-lang ul li:active{text-shadow:0 2px 5px #f26c4f}.list-wrapper{width:calc(100% - 20rem);margin-left:auto;display:flex;flex-wrap:wrap;grid-column-gap:5rem;-webkit-column-gap:5rem;column-gap:5rem;grid-row-gap:5rem;row-gap:5rem;height:70vh;overflow-y:auto;padding:3rem 15rem 2rem 2rem;margin-top:-9rem}.card__item-list{position:relative;cursor:default;width:100%;max-width:24.7rem;height:31.1rem;border-radius:1.5rem;overflow:hidden;box-shadow:-6px -2px 10px rgba(128,128,131,.3),0 2px 5px rgba(0,0,0,.5),0 5px 15px rgba(18,18,19,.5);transition:all .35s ease;text-align:center}.card__item-list .card__preview-img{width:100%;height:100%;transition:all .2s ease;backface-visibility:hidden;-webkit-backface-visibility:hidden}.card__item-list .card__preview-img img{width:100%;height:100%;object-position:top;object-fit:cover}.card__item-list .title{display:inline-block;opacity:0;padding:3rem 2rem;transform:translateY(-250%);transition:all .15s ease;font-size:1.8rem;word-wrap:break-word;text-align:center;color:var(--light);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.card__item-list .title,.card__item-list button{backface-visibility:hidden;-webkit-backface-visibility:hidden}.card__item-list button{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%) translateY(8rem);transition:all .2s ease-out}.card__item-list:hover button{transform:translateX(-50%) translateY(0)}.card__item-list:hover .card__preview-img{height:40%}.card__item-list:hover .title{transform:translateY(0);opacity:1}.card__item-list:hover{transform:scale(1.05);border-radius:0;box-shadow:0 0 5px hsla(0,0%,100%,.7),0 0 15px hsla(0,0%,100%,.5),0 5px 20px rgba(128,128,131,.5),0 2px 5px rgba(0,0,0,.8),0 5px 15px rgba(18,18,19,.7);-webkit-animation:shadow-moving 4s linear 1s infinite;animation:shadow-moving 4s linear 1s infinite}.card__item-list.already-read .title{transform:translateY(0);opacity:1}.card__item-list.already-read button{transform:translateX(-50%) translateY(0)}.card__item-list.already-read .card__preview-img{height:40%}.card__item-list.already-read:hover{-webkit-animation:shadow-moving-linked 4s linear 1s infinite;animation:shadow-moving-linked 4s linear 1s infinite}.card__item-list.active-blur{-webkit-filter:blur(2px);filter:blur(2px)}.list-wrapper.border-scroll{border-top:2px solid rgba(242,108,79,.6)}@-webkit-keyframes shadow-moving{0%,to{box-shadow:0 0 5px hsla(0,0%,100%,.7),-6px -6px 15px rgba(242,108,79,0),0 0 15px hsla(0,0%,100%,.5),0 5px 20px rgba(128,128,131,.5),0 2px 5px rgba(0,0,0,.8),0 5px 15px rgba(18,18,19,.7)}40%,70%{box-shadow:0 0 5px hsla(0,0%,100%,.7),6px 6px 15px #f26c4f,0 0 15px hsla(0,0%,100%,.5),0 5px 20px rgba(128,128,131,.5),0 2px 5px rgba(0,0,0,.8),0 5px 15px rgba(18,18,19,.7)}}@keyframes shadow-moving{0%,to{box-shadow:0 0 5px hsla(0,0%,100%,.7),-6px -6px 15px rgba(242,108,79,0),0 0 15px hsla(0,0%,100%,.5),0 5px 20px rgba(128,128,131,.5),0 2px 5px rgba(0,0,0,.8),0 5px 15px rgba(18,18,19,.7)}40%,70%{box-shadow:0 0 5px hsla(0,0%,100%,.7),6px 6px 15px #f26c4f,0 0 15px hsla(0,0%,100%,.5),0 5px 20px rgba(128,128,131,.5),0 2px 5px rgba(0,0,0,.8),0 5px 15px rgba(18,18,19,.7)}}@-webkit-keyframes shadow-moving-linked{0%,to{box-shadow:0 0 5px hsla(0,0%,100%,.7),-6px -6px 15px rgba(247,206,72,0),0 0 15px hsla(0,0%,100%,.5),0 5px 20px rgba(128,128,131,.5),0 2px 5px rgba(0,0,0,.8),0 5px 15px rgba(18,18,19,.7)}40%,70%{box-shadow:0 0 5px hsla(0,0%,100%,.7),6px 6px 15px #f7ce48,0 0 15px hsla(0,0%,100%,.5),0 5px 20px rgba(128,128,131,.5),0 2px 5px rgba(0,0,0,.8),0 5px 15px rgba(18,18,19,.7)}}@keyframes shadow-moving-linked{0%,to{box-shadow:0 0 5px hsla(0,0%,100%,.7),-6px -6px 15px rgba(247,206,72,0),0 0 15px hsla(0,0%,100%,.5),0 5px 20px rgba(128,128,131,.5),0 2px 5px rgba(0,0,0,.8),0 5px 15px rgba(18,18,19,.7)}40%,70%{box-shadow:0 0 5px hsla(0,0%,100%,.7),6px 6px 15px #f7ce48,0 0 15px hsla(0,0%,100%,.5),0 5px 20px rgba(128,128,131,.5),0 2px 5px rgba(0,0,0,.8),0 5px 15px rgba(18,18,19,.7)}}.skills{padding:6rem;width:100%;height:70vh}.skills-box{width:calc(100% - 20rem);margin-left:auto;position:relative}.skill-lists{position:absolute;width:70rem;height:70rem;top:50%;left:50%;border-radius:50%;border:2px solid #000;transform:rotate(0deg) translate(-50%,-50%);transition:.4s;-webkit-animation:rolling 20s linear infinite;animation:rolling 20s linear infinite}.bubble-card{position:absolute;top:50%;left:46%;transform-origin:center top;transform:translateX(-50%) rotate(90deg);width:80px;height:calc(50% + 30px);line-height:30px;text-align:center}.bubble-card img{width:100%;height:100%;object-position:center;object-fit:cover}.bubble-card .bubble-detail{position:absolute;z-index:2;bottom:-10rem;left:50%;border-radius:50%;border:1px solid red;transform:translate(-50%,-50%);transition:.3s;color:#000}.brain-box{width:100%;height:70vh;position:relative;cursor:pointer}.brain-box #brain{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:40rem;height:40rem;z-index:2}.brain-box #brain path{fill:transparent;stroke:var(--light);stroke-width:2px;stroke-dasharray:25726.482421875;stroke-dashoffset:25726.482421875;-webkit-animation:dashoffset 8s ease 1s forwards;animation:dashoffset 8s ease 1s forwards}.brain-box #brain-fill{object-position:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;opacity:0;max-width:80rem;height:60rem;transform:translate(-50%,-50%) scale(.5) rotate(-1turn);-webkit-animation:scaleZoom 1.5s cubic-bezier(.82,0,0,1.03) 4s forwards;animation:scaleZoom 1.5s cubic-bezier(.82,0,0,1.03) 4s forwards;overflow:hidden;transition:.3s ease;-webkit-backface-visibility:hidden;backface-visibility:hidden}@-webkit-keyframes rolling{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes rolling{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}@-webkit-keyframes scaleZoom{to{opacity:.8;transform:translate(-50%,-50%) scale(1) rotate(0deg)}}@keyframes scaleZoom{to{opacity:.8;transform:translate(-50%,-50%) scale(1) rotate(0deg)}}@-webkit-keyframes dashoffset{to{stroke-dashoffset:0}}@keyframes dashoffset{to{stroke-dashoffset:0}}.skill-box{position:relative;padding:8rem 22rem;overflow:hidden}.skill-box:before{position:absolute;content:"";width:100%;height:100%;display:block;background-image:url(/static/media/brain-fill.a04ba4f3.svg);background-size:80%;background-position:50% 8%;background-repeat:no-repeat;opacity:.2;z-index:0}.skill-box .skill-inner{margin-top:1rem}.skill-item{position:relative;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:.2rem;background-color:rgba(242,109,79,.8);margin:2rem 0;z-index:2;border-top-right-radius:3rem;border-bottom-right-radius:3rem;display:flex;justify-content:space-between;align-items:center}.skill-item[data-level="4"]{width:40%}.skill-item[data-level="5"]{width:50%}.skill-item[data-level="6"]{width:60%}.skill-item[data-level="7"]{width:70%}.skill-item[data-level="8"]{width:80%}.skill-item[data-level="9"]{width:90%}.skill-item[data-level="10"]{width:100%}.skill-item span{display:inline-block;padding:0 1rem;color:#fff}.skill-item span.skill-title{font-size:1.3rem}.skill-item span.skill-level{font-size:1.5rem}:root{--light:#fff}.brain-box.landing{width:100%;height:100vh;-webkit-animation:fadeOut 2s linear 8s forwards;animation:fadeOut 2s linear 8s forwards}@-webkit-keyframes fadeOut{to{opacity:0}}@keyframes fadeOut{to{opacity:0}}.select-lang{opacity:0;-webkit-animation:fadeIn 1.5s linear 1s forwards;animation:fadeIn 1.5s linear 1s forwards}@-webkit-keyframes fadeIn{to{opacity:1}}@keyframes fadeIn{to{opacity:1}}
/*# sourceMappingURL=main.d4f32b7a.chunk.css.map */