.header{display:flex;align-items:center;justify-content:space-around;background-color:var(--background-color);position:fixed;width:100%;top:0;z-index:999}.logo img{height:60px}.hamburger{display:none;flex-direction:column;cursor:pointer;gap:5px}.hamburger span{display:block;width:25px;height:3px;background-color:var(--paragraph-color);transition:all .3s}.hamburger span.active:first-child{transform:rotate(45deg) translate(5px,5px)}.hamburger span.active:nth-child(2){opacity:0}.hamburger span.active:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}nav{align-items:center;gap:20px}nav,nav ul{display:flex}nav ul{gap:25px;list-style:none;padding:0;margin:0}nav ul li a{color:var(--paragraph-color);text-decoration:none;text-transform:uppercase;cursor:pointer;transition:color .3s}nav ul li a:hover{color:var(--header-color)}.lang-switcher{padding-right:20px}.lang-switcher select{font-size:var(--font-size-sm);padding:5px;border-radius:5px;border:none;cursor:pointer}@media (max-width:850px){.header{justify-content:space-between}.logo{margin-left:20px}.hamburger{display:flex;margin-right:20px}nav{position:fixed;top:65px;right:0;background-color:rgba(0,0,0,.95);width:50%;height:calc(100% - 65px);flex-direction:column;align-items:center;justify-content:flex-start;padding-top:20px;transform:translateX(100%);transition:transform .3s ease}nav.mobile-open{transform:translateX(0)}nav ul{flex-direction:column;gap:20px}.lang-switcher{margin-top:30px}}button{cursor:pointer;background-color:var(--background-color);color:var(--paragraph-color);font-weight:700;transition:background-color .3s ease-in,color .3s ease-in}.btn-small{padding:10px 15px;font-size:var(--font-size-sm);line-height:var(--line-height-sm);border:2px solid var(--button-color)}.btn-medium,.btn-small{font-weight:var(--font-weight-semi-bold)}.btn-medium{padding:10px 20px;font-size:var(--font-size-md);line-height:var(--line-height-md);background:#000;border:none;position:relative;opacity:1}.btn-large:after,.btn-large:before,.btn-medium:after,.btn-medium:before,.btn-small:after,.btn-small:before{content:"";position:absolute;inset:-.3rem;z-index:-1;background:conic-gradient(from var(--angle),transparent 50%,var(--text-color));animation:rotation 2s linear infinite,colorChange 8s infinite}.btn-large:after,.btn-medium:after,.btn-small:after{filter:blur(1.5rem);opacity:.5}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotation{0%{--angle:0deg}to{--angle:360deg}}@keyframes colorChange{0%{--text-color:#66fcf1}28%{--text-color:#76ff71}53%{--text-color:#c022ff}78%{--text-color:#3888f1}to{--text-color:#66fcf1}}.btn-large{padding:15px 25px;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);line-height:var(--line-height-lg);border:3px solid var(--button-color)}.btn-large:hover,.btn-medium:hover,.btn-small:hover{background-color:var(--paragraph-color);color:var(--background-color)}.home-page{padding:40px;display:flex;flex-direction:column;justify-content:center;width:1200px;min-height:80dvh}.text-and-image-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.text-content{gap:40px;width:60%}.text-content,.text-content #title{display:flex;flex-direction:column}@keyframes gradientLoop{0%{color:var(--text-color)}25%{color:#76ff71}50%{color:#c022ff}75%{color:#3888f1}to{color:var(--text-color)}}h1{color:#fff;margin-top:0;margin-bottom:5px;position:relative;overflow:hidden;font-size:112px;letter-spacing:2.5px}.text-content h1:nth-child(2){animation:gradientLoop 8s linear infinite}h4{color:var(--text-color);margin-bottom:5px;margin-top:0;letter-spacing:1px;font-size:var(--font-size-4xl)}.text-content p{color:#fff;font-size:var(--font-size-lg)}@media (max-width:768px){.home-page{margin-top:40px;width:100dvw}.home-page,.text-and-image-container{flex-direction:column;align-items:center}.text-and-image-container{display:flex;justify-content:center;width:100%;gap:20px}.text-content{display:flex;text-align:center;justify-content:center}}@media (min-width:769px) and (max-width:1025px){.home-page{width:100%;height:100%;margin-top:0;align-items:center}.text-and-image-container{justify-content:center;margin-bottom:20px}.text-content h1{font-size:var(--font-size-2xl)}.text-content p{font-size:var(--font-size-md);text-align:left}.carousel-item{width:65px;padding:10px}}.black-section{display:flex;flex-direction:column;align-items:center;padding:40px;gap:20px;height:85dvh;justify-content:center}.black-section .about-container-text{display:flex;flex-direction:column;align-items:start;gap:20px;width:1200px}.black-section .about-container-text h2{border-bottom:5px solid var(--button-color)}.black-section .about-work-text-content{padding:20px;width:60%;text-align:right}.carousel{display:flex;justify-content:center;align-items:space-between;gap:40px;flex-wrap:wrap}.carousel-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:15px;width:120px;text-align:center}.carousel-item img{width:80px;height:80px;-o-object-fit:contain;object-fit:contain}.carousel-item p{margin:0;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--secondary-color)}.white-section{background:var(--paragraph-color);display:flex;flex-direction:column;align-items:center;padding:40px;gap:20px;width:100vw;min-height:85dvh}.white-section .about-hobby-text-content{display:flex;flex-direction:column;align-items:start;gap:20px;width:1200px}.white-section .about-hobby-text-content h3{color:var(--background-color)}.white-section .about-hobby-text-content p1{text-align:left;color:#000}.white-section .about-container-text-white{color:var(--background-color);display:flex;flex-direction:column;gap:20px;width:1200px}.white-section .about-future-text-content{display:flex;flex-direction:column;align-items:start;gap:20px}.white-section .about-future-text-content h3{color:var(--background-color)}.white-section .about-future-text-content p1{color:var(--background-color);text-align:left}.about-hobby-text-content h2{color:var(--background-color)}.white-section .about-container-text-white .about-future-text-content{text-align:center}.white-section .about-container-text-white .about-skills-title h3{color:var(--background-color);text-align:left}.skillbar-container{position:relative;display:block;margin-bottom:15px;width:100%;background-color:#7e7e7e;height:5px}.skills{height:5px;width:0;transition:width 2s}.percentage{float:right;font-weight:700}@media (max-width:768px){.black-section{padding:40px 20px;height:100%}.black-section .about-container-text{width:100%}.carousel-item{padding:10px;width:60px}.carousel-item img{width:70px;height:70px}.carousel-item p{font-size:var(--font-size-lg);font-weight:var(--font-weight-light)}.white-section{padding:40px 10px}.white-section .about-hobby-text-content{width:100%}.white-section .about-container-text-white{width:90%;padding:10px}.skillbar{width:90%}}@media (min-width:768px) and (max-width:1025px){.about-page{display:flex;flex-direction:column;align-items:center;width:100%}.black-section{width:100%}.black-section .about-background-text-content,.black-section .about-work-just-text-content{width:70%}.white-section .about-container-text-white{width:90%}.skillbar{padding:0 0;width:100%}}.services-page{display:flex;flex-direction:column;align-items:center;padding:40px;gap:40px;min-height:85dvh;justify-content:center}.services-page #text-section{display:flex;flex-direction:column;align-items:start;gap:20px;width:1200px}.services-page #text-section h2{border-bottom:5px solid var(--button-color)}.service-container{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center}.service-cards{display:flex;justify-content:space-between;gap:20px;max-width:1200px}.service-card{background:#1f272c;display:flex;flex-direction:column;padding:20px;width:40%;border-radius:15px;animation-duration:.3s}.service-card h3{color:var(--paragraph-color);text-align:center;padding-bottom:10px;border-bottom:3px solid var(--header-color);font-weight:var(--font-weight-medium)}.service-card ul{display:flex;flex-direction:column;gap:10px;list-style:none;flex-grow:1;padding:0}.service-card li{padding-left:30px;position:relative;color:var(--paragraph-color);font-size:var(--font-size-md);font-weight:var(--font-weight-light)}.service-card li:before{content:"#";position:absolute;left:0;font-weight:700;font-size:18px}.service-card.basic li:before,.service-card.premium li:before,.service-card.standard li:before{color:var(--button-color)}.target{background:hsla(0,0%,100%,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;border-radius:12px;color:#94a3b8;font-size:14px;line-height:1.6;margin-bottom:25px;font-style:italic;border:1px solid hsla(0,0%,100%,.1)}.contact-btn{border:none;padding:16px 32px;border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden;color:#fff}.contact-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:hsla(0,0%,100%,.2);transform:translate(-50%,-50%);transition:width .6s,height .6s}.contact-btn:hover:before{width:300px;height:300px}.contact-btn:hover{transform:scale(1.05)}.contact-btn:active{transform:scale(.98)}.service-card.basic .contact-btn,.service-card.premium .contact-btn,.service-card.standard .contact-btn{background:var(--header-color)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.service-card{animation:fadeInUp .6s ease-out backwards}.service-card:first-child{animation-delay:.1s}.service-card:nth-child(2){animation-delay:.2s}.service-card:nth-child(3){animation-delay:.3s}@media (max-width:768px){.services-page{height:100%;padding:40px 20px}.services-page #text-section{width:100%}.service-cards{flex-direction:column;align-items:center;padding:0 20px}.service-card{width:100%}.service-card li,.service-card p1{font-size:var(--font-size-md)}}.contact-page{display:flex;flex-direction:column;align-items:center;padding:40px;gap:20px;min-height:70dvh;justify-content:center}.contact-page .page-title h2{border-bottom:5px solid var(--button-color)}.contact-form{justify-content:center;align-items:center;gap:20px;width:800px}.contact-form,.form-group{display:flex;flex-direction:column}.form-group{width:100%}label{display:block;color:var(--header-color);padding-bottom:10px}input,select,textarea{padding:10px;background-color:#1f272c;color:var(--paragraph-color);border:none;border-radius:5px}.cstm-btn button,.cstm-btn button:hover{padding:12px 20px;border:3px solid var(--paragraph-color)}.cstm-btn button:hover{background-color:var(--paragraph-color);color:var(--background-color)}.error-message{color:red;margin-top:5px}@media (max-width:768px){.contact-page{padding:20px;height:100%}.contact-form{width:100%}label{font-weight:var(--font-weight-medium)}input,label,select,textarea{font-size:var(--font-size-md)}}.footer-section{display:flex;align-items:center;max-width:100%;justify-content:center;gap:10px;padding:20px 0;width:100%;text-align:center;background-color:var(--background-color);z-index:0;flex-shrink:0}.footer-section h{font-size:var(--font-size-sm);color:var(--paragraph-color);letter-spacing:var(--letter-spacing-sm)}.footer-section #email{color:var(--text-color);font-weight:var(--font-weight-semi-bold);letter-spacing:var(--letter-spacing-sm)}.socials{padding:10px 0;display:flex;gap:30px;justify-content:center}.social-icon img{width:24px;height:24px;transition:transform .3s,filter .3s}.social-icon:hover img{transform:scale(1.2);filter:brightness(1.2)}#app{height:100vh}#app,.main-content{display:flex;flex-direction:column;overflow-x:hidden}.main-content{align-items:center;flex-grow:1;overflow-y:auto}@media (max-width:450px){#app{display:block;overflow-y:auto}#about{width:100%}.main-content{align-items:center;justify-content:center}#section{width:450px;padding:10px;display:flex;flex-direction:column}}@media (min-width:451px) and (max-width:1380px){.main-content{width:100%}}:root{--primary-color:#1f2833;--secondary-color:#c5c6c7;--background-color:#000;--text-color:#66fcf1;--button-color:#2ef6e8;--header-color:#16d8cb;--paragraph-color:#fff;--font-family:"Kanit",sans-serif;--font-size-xs:12px;--font-size-sm:14px;--font-size-md:18px;--font-size-lg:24px;--font-size-xl:36px;--font-size-2xl:48px;--font-size-3xl:60px;--font-size-4xl:72px;--line-height:1.5;--letter-spacing-xs:0.5px;--letter-spacing-sm:0.75px;--letter-spacing-md:1px;--letter-spacing-lg:1.25px;--letter-spacing-xl:1.5px;--letter-spacing-2xl:1.75px;--letter-spacing-3xl:2px;--line-height-xs:1.4;--line-height-sm:1.5;--line-height-md:1.6;--line-height-lg:1.4;--line-height-xl:1.3;--line-height-2xl:1.2;--line-height-3xl:1.1;--font-weight-thin:100;--font-weight-extra-light:200;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semi-bold:600;--font-weight-bold:700;--font-weight-extra-bold:800;--font-weight-black:900;--small-screen:480px;--medium-screen:768px;--large-screen:1024px}h1{font-weight:var(--font-weight-bold)}h1,h2{font-size:var(--font-size-2xl);color:var(--paragraph-color);font-family:var(--font-family);margin:0}h2{font-weight:var(--font-weight-semi-bold)}h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semi-bold)}h3,h4{color:var(--paragraph-color);font-family:var(--font-family);margin:0}h4{font-size:var(--font-size-md);font-weight:var(--font-weight-bold)}p1{font-size:var(--font-size-lg);color:var(--paragraph-color);font-family:var(--font-family);font-weight:var(--font-weight-extra-light)}p2{font-size:var(--font-size-md)}p2,p3{color:var(--paragraph-color);font-family:var(--font-family);font-weight:var(--font-weight-light)}p3{font-size:var(--font-size-xs)}@media (max-width:450px){h3{font-weight:var(--font-weight-semi-bold)}h3,p1{font-size:var(--font-size-lg);color:var(--paragraph-color);font-family:var(--font-family)}p1{font-weight:var(--font-weight-light)}}@media (min-width:451px) and (max-width:1025px){h3{font-size:var(--font-size-lg);color:var(--paragraph-color);font-family:var(--font-family);font-weight:var(--font-weight-regular)}}body{background-color:var(--background-color);color:var(--text-color);font-family:var(--font-family);text-decoration:none;margin:0;padding:0;max-height:100vh;max-width:100vw;overflow:hidden;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#000 var(--background-color)}