.accomplishments{grid-column:span 2;border-radius:2rem;background-color:#b7e9bb;color:#646c73;padding:2rem;position:relative;overflow:hidden}.accomplishments:before{content:"";width:25rem;height:4rem;position:absolute;left:-2rem;top:1.2rem;border-radius:1rem;opacity:.5}@media screen and (max-width:768px){.accomplishments{grid-column:span 3}}.accomplishments h1{font-size:1.8rem;position:relative}.accomplishments .wrapBox{display:flex;gap:2rem;margin-top:1.5rem}@media screen and (max-width:480px){.accomplishments .wrapBox{flex-wrap:wrap;gap:0}}.accomplishments ul{margin-top:2rem}.accomplishments ul li{font-size:1.6rem;margin-top:2rem;line-height:2.5rem;list-style:none;padding:2rem;border-radius:1rem;background-color:#a3e7a9;position:relative}.accomplishments ul li:before{content:"";width:2rem;height:2rem;border-radius:50%;background-color:#b7e9bb;position:absolute;left:-1rem;top:2.2rem}.biodata{grid-column:span 1;border-radius:2rem;background-color:#e8e5e0;color:#646c73;padding:2rem;position:relative}.biodata:before{content:"";width:100%;height:4rem;background-color:#dbd9d5;position:absolute;left:-.01rem;top:1.2rem;border-radius:.5rem 1rem 1rem 0}@media screen and (max-width:768px){.biodata{grid-column:span 3}}.biodata h1{font-size:1.8rem;position:relative}.biodata .box{margin-top:4rem;gap:1rem;padding:1.5rem 2rem;border-radius:1rem;background-color:#dbd9d5;position:relative;display:flex;flex-direction:column;gap:2rem}.biodata .box .boxImage{display:flex;justify-content:center;margin-bottom:4rem}.biodata .box .boxImage .image{width:12rem;height:12rem;border:.5rem solid #fff;border-radius:50%;overflow:hidden;position:absolute;top:-6rem;display:flex;justify-content:center;cursor:pointer;box-shadow:0 2px 5px 3px rgba(50,50,93,.25),0 1px 3px -1px rgba(0,0,0,.3)}.biodata .box .boxImage .image img{width:100%;height:100%;object-fit:fill}.biodata .box .row{font-size:1.6rem}.biodata .box .row a{color:#005bb0}.biodata .box .row a .linkTab{font-size:1.3rem}.modalPhoto{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.2);z-index:99;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);display:flex;justify-content:center;align-items:center}.modalPhoto .boxPhoto{width:45rem;height:45rem;background-color:#fff;border-radius:1rem;padding:1.5rem}@media screen and (max-width:480px){.modalPhoto .boxPhoto{width:35rem;height:35rem}}.modalPhoto .boxPhoto img{width:100%;height:100%;object-fit:cover}.modalPhoto .boxPhoto .btnClosePhoto{position:relative}.modalPhoto .boxPhoto .btnClosePhoto:after{content:"X";width:3rem;height:3rem;background-color:red;color:#fff;font-weight:700;padding:1rem;border-radius:1rem;position:absolute;top:-1rem;right:-3.5rem;display:flex;justify-content:center;align-items:center;font-size:1.6rem;cursor:pointer}@keyframes skeletonLoading{0%{background-color:#a3b8c2}to{background-color:#f0f3f5}}.skeletonProfile{animation:skeletonLoading 1s linear infinite alternate;height:100%}.skeletonProfile.skeletonProfileImage{display:flex;justify-content:center;align-items:center;font-size:1.6rem;color:gray}.certification{grid-column:span 1;border-radius:2rem;background-color:#dae9b7;color:#646c73;padding:2rem;position:relative;overflow:hidden}.certification:before{content:"";width:22rem;height:4rem;position:absolute;left:-2rem;top:1.2rem;border-radius:1rem}@media screen and (max-width:768px){.certification{grid-column:span 3}}.certification h1{font-size:1.8rem;position:relative}.certification .box{margin-top:4rem;display:flex;flex-direction:column;gap:1rem;padding:1.5rem 2rem;border-radius:1rem;position:relative}.certification .box h2 a{color:#3e5d6e}.certification .box h2 .icon{font-size:1.2rem}.certification .box ul{margin-left:1.5rem;display:flex;flex-direction:column;gap:1rem}.certification .box ul li{font-size:1.4rem}.certification .box ul li a{color:#646c73}.certification .box ul li a .icon{font-size:1.2rem}.certification .box hr{opacity:.3}.experiences{grid-column:span 2;border-radius:2rem;background-color:#bfe5f8;color:#646c73;padding:2rem;position:relative}@media screen and (max-width:480px){.experiences{margin-top:3rem}}.experiences:before{content:"";width:20rem;height:4rem;position:absolute;left:-.001rem;top:1.2rem;border-radius:.5rem 1rem 1rem 0}@media screen and (max-width:768px){.experiences{grid-column:span 3}}.experiences h1{font-size:2rem;position:relative}.experiences .wrapBox{display:flex;gap:2rem}@media screen and (max-width:480px){.experiences .wrapBox{flex-wrap:wrap;gap:0}}.experiences .ulBox{margin-top:3rem}.experiences .ulBox .liBox{font-size:1.6rem;margin-top:2rem;line-height:2.5rem;list-style:none;padding:2rem;border-radius:1rem;background-color:#acdcf4;position:relative}.experiences .ulBox .liBox .point{color:#646c73;display:block;font-size:1.6rem;font-weight:700;margin-bottom:.8rem;width:100%}.experiences .ulBox .liBox .groupSkill{display:flex;flex-wrap:wrap;row-gap:.5rem;column-gap:.3rem}.experiences .ulBox .liBox .groupSkill .skill{border:none;background-color:#314755;color:#e9eaee;padding:.5rem 1rem;border-radius:1rem;font-size:1.2rem}.experiences .ulBox .liBox .groupSkill .skill .tooltip{visibility:hidden;width:100%;color:#646c73;border-radius:1rem;padding:2rem;position:absolute;z-index:99;left:0;margin-top:1rem;line-height:2rem;text-align:start}.experiences .ulBox .liBox .groupSkill .skill .tooltip .heading{color:#314755;font-weight:700;margin-bottom:.5rem}.experiences .ulBox .liBox .groupSkill .skill .tooltip .ulTooltip .liTooltip{margin-top:1rem;list-style:none;padding:2rem;border-radius:1rem;position:relative;display:flex;flex-direction:column;gap:10rem}.experiences .ulBox .liBox .groupSkill .skill .tooltip .ulTooltip .liTooltip:before{content:"";width:2rem;height:2rem;border-radius:50%;position:absolute;left:-1rem;top:2.2rem}.experiences .ulBox .liBox .groupSkill .skill .tooltip .ulTooltip .liTooltip.liTooltipExpress,.experiences .ulBox .liBox .groupSkill .skill .tooltip .ulTooltip .liTooltip.liTooltipExpress:before{background-color:#d1dcdd}.experiences .ulBox .liBox .groupSkill .skill .tooltip .ulTooltip .liTooltip.liTooltipMysql,.experiences .ulBox .liBox .groupSkill .skill .tooltip .ulTooltip .liTooltip.liTooltipMysql:before{background-color:#d9d1dd}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipHtml{visibility:visible;background-color:#eee9e9}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipCss{visibility:visible;background-color:#eceee9}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipJavaScript{visibility:visible;background-color:#eeeee9}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipTypeScript{visibility:visible;background-color:#e9eaee}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipReactJs{visibility:visible;background-color:#eee9ee}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipNodeJs{visibility:visible;background-color:#e9eeec}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipExpressJs{visibility:visible;background-color:#eeeee9}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipMySql{visibility:visible;background-color:#e9eeeb}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipRestApi{visibility:visible;background-color:#e9ebee}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipGit{visibility:visible;background-color:#e9eeeb}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipGithub{visibility:visible;background-color:#eee9ed}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipLinux{visibility:visible;background-color:#e9ecee}.experiences .ulBox .liBox .groupSkill .skill:hover .tooltipNginx{visibility:visible;background-color:#e9eeea}.experiences .ulBox .liBox:before{content:"";width:2rem;height:2rem;border-radius:50%;background-color:#bfe5f8;position:absolute;left:-1rem;top:2.2rem}.experiences .ulBox .liBox:before .point span{display:block;color:salmon}.headline{display:flex;flex-direction:column;justify-content:center;gap:1.5rem;grid-column:span 1;color:#7d868e}@media screen and (max-width:768px){.headline{grid-column:span 3}}.headline .top{position:relative}.headline .top h3{font-size:2.2rem;color:#646c73}.headline .top .animationBox{position:absolute;top:-5rem;right:2rem}.headline .top .animationBox .animationHi{width:12rem}.headline h1{font-size:3.8rem;line-height:4rem;font-weight:700;color:#3e5d6e;font-family:Fira Sans,sans-serif}.headline p{font-size:1.6rem;line-height:2.5rem}.headline .proof{display:flex;gap:.5rem;color:#daa520}.headline .proof .icons .icon{font-size:1.6rem}.headline .proof span{font-size:1.4rem;color:#314755;font-weight:700}.headline button{font-size:1.6rem;padding:1.2rem 1.8rem;border:transparent;border-radius:1rem;cursor:pointer;display:flex;gap:.5rem;justify-content:center;align-items:center;background-color:#314755}.headline button .icon{color:#fff;margin-right:1rem}.headline button span{font-weight:700;letter-spacing:.1rem;font-size:1.6rem;color:#fff}.headlineTwo{grid-column:span 1;border-radius:2rem;color:#646c73;padding:0 2rem;overflow:hidden;display:flex;flex-direction:column;gap:2rem;justify-content:center}@media screen and (max-width:768px){.headlineTwo{grid-column:span 3}}.headlineTwo .animationWrap{display:flex;justify-content:space-between;gap:1rem}.headlineTwo .animationWrap .animationSmile{background-color:#ffeeed;border-radius:1rem;box-shadow:0 0 25px 0 hsla(240,5%,41%,.15)}.headlineTwo .title{display:flex;flex-direction:column;gap:.5rem}.headlineTwo .title h1{font-size:2.5rem}.headlineTwo .title p{font-size:1.6rem;line-height:2.2rem}.headlineTwo .github button{padding:1rem;border-radius:.5rem;border:transparent;background-color:#000;color:#fff;font-weight:700;display:flex;align-items:center;gap:.5rem;font-size:1.4rem;cursor:pointer}.headlineTwo .github button .iconGithub{font-size:2.2rem}.headlineTwo .github button .iconLink{font-size:1rem}