.accomplishments{color:#646c73;background-color:#b7e9bb;border-radius:2rem;grid-column:span 2;padding:2rem;position:relative;overflow:hidden}.accomplishments:before{content:"";opacity:.5;border-radius:1rem;width:25rem;height:4rem;position:absolute;top:1.2rem;left:-2rem}@media screen and (max-width:768px){.accomplishments{grid-column:span 3}}.accomplishments h1{font-size:1.8rem;position:relative}.accomplishments .wrapBox{gap:2rem;margin-top:1.5rem;display:flex}@media screen and (max-width:480px){.accomplishments .wrapBox{flex-wrap:wrap;gap:0}}.accomplishments ul{margin-top:2rem}.accomplishments ul li{background-color:#a3e7a9;border-radius:1rem;margin-top:2rem;padding:2rem;font-size:1.6rem;line-height:2.5rem;list-style:none;position:relative}.accomplishments ul li:before{content:"";background-color:#b7e9bb;border-radius:50%;width:2rem;height:2rem;position:absolute;top:2.2rem;left:-1rem}
.biodata{color:#646c73;background-color:#e8e5e0;border-radius:2rem;grid-column:span 1;padding:2rem;position:relative}.biodata:before{content:"";background-color:#dbd9d5;border-radius:.5rem 1rem 1rem 0;width:100%;height:4rem;position:absolute;top:1.2rem;left:-.01rem}@media screen and (max-width:768px){.biodata{grid-column:span 3}}.biodata h1{font-size:1.8rem;position:relative}.biodata .box{background-color:#dbd9d5;border-radius:1rem;flex-direction:column;gap:2rem;margin-top:4rem;padding:1.5rem 2rem;display:flex;position:relative}.biodata .box .boxImage{justify-content:center;margin-bottom:4rem;display:flex}.biodata .box .boxImage .image{cursor:pointer;border:.5rem solid #fff;border-radius:50%;justify-content:center;width:12rem;height:12rem;display:flex;position:absolute;top:-6rem;overflow:hidden;box-shadow:0 2px 5px 3px #32325d40,0 1px 3px -1px #0000004d}.biodata .box .boxImage .image img{object-fit:fill;width:100%;height:100%}.biodata .box .row{font-size:1.6rem}.biodata .box .row a{color:#005bb0}.biodata .box .row a .linkTab{font-size:1.3rem}
.modalPhoto{z-index:99;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background-color:#0003;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modalPhoto .boxPhoto{background-color:#fff;border-radius:1rem;width:45rem;height:45rem;padding:1.5rem}@media screen and (max-width:480px){.modalPhoto .boxPhoto{width:35rem;height:35rem}}.modalPhoto .boxPhoto img{object-fit:cover;width:100%;height:100%}.modalPhoto .boxPhoto .btnClosePhoto{position:relative}.modalPhoto .boxPhoto .btnClosePhoto:after{content:"X";color:#fff;cursor:pointer;background-color:red;border-radius:1rem;justify-content:center;align-items:center;width:3rem;height:3rem;padding:1rem;font-size:1.6rem;font-weight:700;display:flex;position:absolute;top:-1rem;right:-3.5rem}@keyframes skeletonLoading{0%{background-color:#a3b8c2}to{background-color:#f0f3f5}}.skeletonProfile{height:100%;animation:1s linear infinite alternate skeletonLoading}.skeletonProfile.skeletonProfileImage{color:gray;justify-content:center;align-items:center;font-size:1.6rem;display:flex}
.certification{color:#646c73;background-color:#dae9b7;border-radius:2rem;grid-column:span 1;padding:2rem;position:relative;overflow:hidden}.certification:before{content:"";border-radius:1rem;width:22rem;height:4rem;position:absolute;top:1.2rem;left:-2rem}@media screen and (max-width:768px){.certification{grid-column:span 3}}.certification h1{font-size:1.8rem;position:relative}.certification .box{border-radius:1rem;flex-direction:column;gap:1rem;margin-top:4rem;padding:1.5rem 2rem;display:flex;position:relative}.certification .box h2 a{color:#3e5d6e}.certification .box h2 .icon{font-size:1.2rem}.certification .box ul{flex-direction:column;gap:1rem;margin-left:1.5rem;display:flex}.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{color:#646c73;background-color:#bfe5f8;border-radius:2rem;grid-column:span 2;padding:2rem;position:relative}@media screen and (max-width:480px){.experiences{margin-top:3rem}}.experiences:before{content:"";border-radius:.5rem 1rem 1rem 0;width:20rem;height:4rem;position:absolute;top:1.2rem;left:-.001rem}@media screen and (max-width:768px){.experiences{grid-column:span 3}}.experiences h1{font-size:2rem;position:relative}.experiences .wrapBox{gap:2rem;display:flex}@media screen and (max-width:480px){.experiences .wrapBox{flex-wrap:wrap;gap:0}}.experiences .ulBox{margin-top:3rem}.experiences .ulBox .liBox{background-color:#acdcf4;border-radius:1rem;margin-top:2rem;padding:2rem;font-size:1.6rem;line-height:2.5rem;list-style:none;position:relative}.experiences .ulBox .liBox .point{color:#646c73;width:100%;margin-bottom:.8rem;font-size:1.6rem;font-weight:700;display:block}.experiences .ulBox .liBox .point span{color:salmon;display:block}.experiences .ulBox .liBox .groupSkill{flex-wrap:wrap;gap:.5rem .3rem;display:flex}.experiences .ulBox .liBox .groupSkill .skill{color:#e9eaee;background-color:#314755;border:none;border-radius:1rem;padding:.5rem 1rem;font-size:1.2rem}.experiences .ulBox .liBox .groupSkill .skill .tooltip{visibility:hidden;color:#646c73;z-index:99;text-align:start;border-radius:1rem;width:100%;margin-top:1rem;padding:2rem;line-height:2rem;position:absolute;left:0}.experiences .ulBox .liBox .groupSkill .skill .tooltip .heading{color:#314755;margin-bottom:.5rem;font-weight:700}.experiences .ulBox .liBox .groupSkill .skill .tooltip .ulTooltip .liTooltip{border-radius:1rem;flex-direction:column;gap:10rem;margin-top:1rem;padding:2rem;list-style:none;display:flex;position:relative}.experiences .ulBox .liBox .groupSkill .skill .tooltip .ulTooltip .liTooltip:before{content:"";border-radius:50%;width:2rem;height:2rem;position:absolute;top:2.2rem;left:-1rem}.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:"";background-color:#bfe5f8;border-radius:50%;width:2rem;height:2rem;position:absolute;top:2.2rem;left:-1rem}
.headline{color:#7d868e;flex-direction:column;grid-column:span 1;justify-content:center;gap:1.5rem;display:flex}@media screen and (max-width:768px){.headline{grid-column:span 3}}.headline .top{position:relative}.headline .top h3{color:#646c73;font-size:2.2rem}.headline .top .animationBox{position:absolute;top:-5rem;right:2rem}.headline .top .animationBox .animationHi{width:12rem}.headline h1{color:#3e5d6e;font-family:Fira Sans,sans-serif;font-size:3.8rem;font-weight:700;line-height:4rem}.headline p{font-size:1.6rem;line-height:2.5rem}.headline .proof{color:#daa520;gap:.5rem;display:flex}.headline .proof .icons .icon{font-size:1.6rem}.headline .proof span{color:#314755;font-size:1.4rem;font-weight:700}.headline button{cursor:pointer;background-color:#314755;border:#0000;border-radius:1rem;justify-content:center;align-items:center;gap:.5rem;padding:1.2rem 1.8rem;font-size:1.6rem;display:flex}.headline button .icon{color:#fff;margin-right:1rem}.headline button span{letter-spacing:.1rem;color:#fff;font-size:1.6rem;font-weight:700}
.headlineTwo{color:#646c73;border-radius:2rem;flex-direction:column;grid-column:span 1;justify-content:center;gap:2rem;padding:0 2rem;display:flex;overflow:hidden}@media screen and (max-width:768px){.headlineTwo{grid-column:span 3}}.headlineTwo .animationWrap{justify-content:space-between;gap:1rem;display:flex}.headlineTwo .animationWrap .animationSmile{background-color:#ffeeed;border-radius:1rem;box-shadow:0 0 25px #64646f26}.headlineTwo .title{flex-direction:column;gap:.5rem;display:flex}.headlineTwo .title h1{font-size:2.5rem}.headlineTwo .title p{font-size:1.6rem;line-height:2.2rem}.headlineTwo .github button{color:#fff;cursor:pointer;background-color:#000;border:#0000;border-radius:.5rem;align-items:center;gap:.5rem;padding:1rem;font-size:1.4rem;font-weight:700;display:flex}.headlineTwo .github button .iconGithub{font-size:2.2rem}.headlineTwo .github button .iconLink{font-size:1rem}