.app-home{background-image:linear-gradient(to bottom right,#000,#111827,#111827)}
.app-home-section{justify-content:center;align-items:center;width:100%;height:100vh;min-height:550px;padding:0 24px;display:flex;position:relative}.app-home-section .background-container{width:100%;height:100%;position:absolute;overflow:hidden}.app-home-section .background-image{opacity:.05;background:url(/assets/img/15533605.png) 50%/cover;width:100%;height:100%;position:absolute}.app-home-section .background-element-a{filter:blur(64px);background:#0ea5e91a;border-radius:50%;width:256px;height:256px;position:absolute;top:5rem;left:5rem}.app-home-section .background-element-b{filter:blur(64px);background:#10b9811a;border-radius:50%;width:320px;height:320px;position:absolute;bottom:5rem;right:5rem}.app-home-section .container{z-index:1;width:100%;max-width:710px;height:auto}.app-home-section .image-container{justify-content:center;align-items:center;width:100%;height:auto;margin-bottom:32px;display:flex;position:relative}.app-home-section .image-container .image{border:4px solid var(--sky-blue);border-radius:50%;justify-content:center;align-items:center;width:128px;height:128px;display:flex;overflow:hidden}.app-home-section .image-container .image img{width:100%;height:auto}.app-home-section .image-container .image-dev{background:var(--sky-blue);border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex;position:absolute;bottom:-8px;right:-8px}.app-home-section .image-container .image-dev svg{width:20px;height:20px}.app-home-section .title{text-align:center;color:#0000;background:linear-gradient(90deg,#f3f4f6,#bae6fd,#bae6fd00);-webkit-background-clip:text;background-clip:text;margin-bottom:24px;font-size:60px}.app-home-section .title span{color:var(--light-yellow)}.app-home-section .paragraph{text-align:center;color:var(--light-gray);margin-bottom:32px;font-size:24px}.app-home-section .container .options{justify-content:center;gap:16px;width:100%;height:40px;display:flex}.app-home-section .pointer{color:var(--sky-blue);animation:1s infinite bounce;position:absolute;bottom:40px}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@media (max-width:765px){.app-home-section .title{font-size:48px}}@media (max-width:640px){.app-home-section .title{font-size:36px}.app-home-section .paragraph{font-size:20px}}
.app-about-section{background:var(--black);justify-content:center;width:100%;height:auto;display:flex;position:relative}.app-about-section .backgraund-container{width:100%;height:100%;position:absolute;overflow:hidden}.app-about-section .about-container{width:100%;max-width:890px;height:auto;padding:96px 24px;position:relative}.app-about-section .title-container{flex-direction:column;align-items:center;gap:12px;width:100%;height:auto;margin-bottom:16px;display:flex}.app-about-section .title-icon{color:var(--sky-blue)}.app-about-section .title{color:#0000;background:var(--gradient-blue-sky-green);-webkit-background-clip:text;background-clip:text;font-size:30px;font-weight:700}.app-about-section .title-line{background:var(--gradient-blue-green);border-radius:2px;width:96px;height:4px;margin-top:8px}.app-about-section .about{grid-template-columns:repeat(5,minmax(0,1fr));justify-content:center;align-items:center;gap:32px;width:100%;height:auto;margin-top:48px;display:grid}.app-about-section .about-image-container{grid-column:span 2/span 2;width:100%;max-width:380px}.app-about-section .about-image{position:relative}.app-about-section .image-about{aspect-ratio:1;border:2px solid #0ea5e94d;border-radius:6px;justify-content:center;align-items:center;width:100%;height:auto;display:flex;overflow:hidden}.app-about-section .image-about img{width:100%;height:auto}.app-about-section .image-element-a{background:var(--gradient-yellow-1);border-radius:6px;width:105px;height:105px;position:absolute;bottom:-16px;right:-16px;transform:matrix(.994522,.104528,-.104528,.994522,0,0)}.app-about-section .image-element-b{background:var(--gradient-sky-blue-1);border-radius:6px;width:105px;height:105px;position:absolute;top:-16px;left:-16px;transform:matrix(.994522,-.104528,.104528,.994522,0,0)}.app-about-section .about-paragraph{color:var(--gray);grid-column:span 3/span 3;line-height:28px}.app-about-section .paragraph-a{font-size:18px}.app-about-section .paragraph-b,.app-about-section .paragraph-c{margin-top:16px;font-size:16px}@media (max-width:770px){.app-about-section .about{flex-direction:column;display:flex}}
.app-skills-section{background:var(--gradient-black-1);justify-content:center;width:100%;height:auto;display:flex;position:relative}.app-skills-section .background-container{width:100%;height:100%;position:absolute}.app-skills-section .background-image{opacity:.05;background:url(/assets/img/background.svg) 0 0/cover;width:100%;height:100%;position:absolute}.app-skills-section .skills-container{width:100%;max-width:890px;height:auto;padding:96px 24px;position:relative}.app-skills-section .title-container{flex-direction:column;align-items:center;gap:12px;width:100%;height:auto;margin-bottom:16px;display:flex}.app-skills-section .title-icon{color:var(--normal-green)}.app-skills-section .title{color:#0000;background:var(--gradient-green-sky-blue);-webkit-background-clip:text;background-clip:text;font-size:30px;font-weight:700}.app-skills-section .title-line{background:var(--gradient-blue-green);border-radius:2px;width:96px;height:4px;margin-top:8px}.app-skills-section .skills{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;width:100%;height:auto;margin-top:48px;display:grid}.app-skills-section .skills-card{border:1px solid var(--dark-blue-border);background:var(--dark-blue);border-radius:6px;padding:16px}.app-skills-section .skills-lang{align-items:center;gap:12px;width:100%;height:auto;margin-bottom:12px;display:flex}.app-skills-section .dev-icon{border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.app-skills-section .dev-icon.blue{color:var(--level-ico-low);background:var(--level-bg-low)}.app-skills-section .dev-icon.green{color:var(--level-ico-medium);background:var(--level-bg-medium)}.app-skills-section .dev-icon.red{color:var(--level-ico-high);background:var(--level-bg-high)}.app-skills-section .dev-icon.low{color:var(--level-ico-low);background:var(--level-bg-low)}.app-skills-section .dev-icon.medium{color:var(--level-ico-medium);background:var(--level-bg-medium)}.app-skills-section .dev-icon.high{color:var(--level-ico-high);background:var(--level-bg-high)}.app-skills-section .dev-icon svg{width:18px;height:18px}.app-skills-section .skills-text{font-size:16px;font-weight:500}.app-skills-section .level-container{background:var(--level-bar-backgraund);border-radius:4px;width:100%;height:8px}.app-skills-section .level{border-radius:4px;width:auto;height:100%}.app-skills-section .level.low{background:var(--level-bar-low)}.app-skills-section .level.medium{background:var(--level-bar-medium)}.app-skills-section .level.high{background:var(--level-bar-high)}@media (max-width:770px){.app-skills-section .skills{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:640px){.app-skills-section .skills{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:400px){.app-skills-section .skills{grid-template-columns:repeat(1,minmax(0,1fr))}}
.app-projects-section{background:var(--black);justify-content:center;width:100%;height:auto;display:flex;position:relative}.app-projects-section .background-container{width:100%;height:100%;position:absolute}.app-projects-section .skills-container{width:100%;max-width:890px;height:auto;padding:96px 24px;position:relative}.app-projects-section .title-container{flex-direction:column;align-items:center;gap:12px;width:100%;height:auto;margin-bottom:16px;display:flex}.app-projects-section .title-icon{color:var(--yellow)}.app-projects-section .title{color:#0000;background:var(--gradient-yellow-2);-webkit-background-clip:text;background-clip:text;font-size:30px;font-weight:700}.app-projects-section .title-line{background:var(--gradient-blue-green);border-radius:2px;width:96px;height:4px;margin-top:8px}.app-projects-section .projects{width:100%;height:auto;margin-top:48px}.app-projects-section .projects p{text-align:center}
.app-touch-section{background:var(--gradient-black-1);justify-content:center;width:100%;height:auto;display:flex;position:relative}.app-touch-section .background-container{width:100%;height:100%;position:absolute}.app-touch-section .background-image{opacity:.05;background:url(/assets/img/background.svg) 0 0/cover;width:100%;height:100%;position:absolute}.app-touch-section .skills-container{width:100%;max-width:890px;height:auto;padding:96px 24px;position:relative}.app-touch-section .title-container{flex-direction:column;align-items:center;gap:12px;width:100%;height:auto;margin-bottom:16px;display:flex}.app-touch-section .title-icon{color:var(--normal-green)}.app-touch-section .title{color:#0000;background:var(--gradient-green-sky-blue);-webkit-background-clip:text;background-clip:text;font-size:30px;font-weight:700}.app-touch-section .title-line{background:var(--gradient-blue-green);border-radius:2px;width:96px;height:4px;margin-top:8px}.app-touch-section .touch{width:100%;height:auto;margin-top:48px}.app-touch-section .touch-inner{border:1px solid var(--dark-blue-border);background:var(--dark-blue);border-radius:6px;padding:32px}.app-touch-section .touch-inner p{text-align:center;margin-bottom:32px;font-size:18px}.app-touch-section .touch-options{justify-content:center;gap:32px;width:100%;height:auto;display:flex}.app-touch-section .touch-options .touch-option{flex-direction:column;align-items:center;display:flex}.app-touch-section .touch-option .touch-option-icon{border-radius:50%;justify-content:center;align-items:center;min-width:56px;min-height:56px;margin-bottom:12px;padding:16px;display:flex}.app-touch-section .touch-option .touch-option-icon svg{width:24px;height:24px}.app-touch-section .touch-option .touch-option-icon.a{background:var(--level-bar-low)}.app-touch-section .touch-option .touch-option-icon.b{background:var(--level-bar-high)}.app-touch-section .touch-option .touch-option-icon.c{background:var(--level-bar-medium)}
.app-footer{background:var(--black);justify-content:center;align-items:center;width:100%;height:auto;padding:24px 0;display:flex}.app-footer .app-footer-inner{padding:0 24px}