@import"https://fonts.googleapis.com/css2?family=Indie+Flower&family=Sarabun:wght@300;400;500&display=swap";@import"https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Indie+Flower&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-family:Sarabun,sans-serif}.sidebar{width:200px;height:100vh;position:fixed;display:flex;flex-direction:column;justify-content:center;gap:40px;background-color:#0a0a0a;color:#fff;padding-left:40px;z-index:1000;border-right:1px solid rgba(0,240,255,.1);box-shadow:5px 0 20px #00000080}.nav-link{font-size:1.2rem;color:#aaa;text-decoration:none;transition:all .1s cubic-bezier(.175,.885,.32,1.275);display:flex;align-items:center;position:relative}.nav-link:hover{color:#00f0ff;transform:scale(1.05) translate(10px);cursor:pointer;font-weight:700;text-shadow:none}.nav-link:hover:before{content:"> ";color:#00f0ff;position:absolute;left:-18px;font-weight:400}#portfolio__heading{font-family:Doto,sans-serif;font-size:25px}@media (max-width: 768px){.sidebar{width:100%;height:auto;position:fixed;bottom:0;top:auto;left:0;flex-direction:row;padding:10px 20px;gap:20px;border-right:none;border-top:1px solid rgba(0,240,255,.1);box-shadow:0 -5px 20px #00000080;justify-content:space-around;align-items:center;background-color:#0a0a0a}#portfolio__heading{display:none}.nav-link{font-size:.9rem}.nav-link:hover{transform:scale(1.1) translateY(-5px)}}:root{--primary-bg: #0a0a0a;--secondary-bg: #161616;--text-primary: #ffffff;--text-secondary: #d0d0d0;--accent-color: #00f0ff;--accent-glow: rgba(0, 240, 255, .4);--font-main: "Outfit", sans-serif}.about-section{padding:0 2rem;background-color:#0a0a0ad9;color:var(--text-primary);font-family:var(--font-main);display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden}.about-container{max-width:1100px;width:100%;display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center;height:100%}.about-image-wrapper{position:relative;display:flex;justify-content:center;align-items:center;height:auto;width:fit-content;margin:0 auto}.profile-image{width:auto;max-width:380px;height:auto;max-height:65vh;object-fit:contain;border-radius:20px;position:relative;z-index:2;transition:transform .3s ease;filter:grayscale(20%);box-shadow:0 10px 30px #00000080}.profile-image:hover{transform:translateY(-5px);filter:grayscale(0%)}.image-backdrop{position:absolute;width:100%;height:100%;border:2px solid var(--accent-color);border-radius:20px;top:15px;left:15px;z-index:1;transition:transform .3s ease}.about-image-wrapper:hover .image-backdrop{transform:translate(-10px,-10px)}.about-content{display:flex;flex-direction:column;justify-content:center;gap:1rem}.section-subtitle{color:var(--accent-color);text-transform:uppercase;letter-spacing:2px;font-size:1rem;font-weight:600;margin:0}.section-title{font-size:2.5rem;line-height:1.1;font-weight:700;margin:0}.highlight{background:linear-gradient(90deg,var(--accent-color),#00a8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.about-description{font-size:1.15rem;line-height:1.6;color:var(--text-secondary);max-width:600px;margin:0}.skills-container{margin-top:.5rem}.skills-heading{font-size:1rem;margin-bottom:.8rem;font-weight:600}.skills-grid{display:flex;flex-wrap:wrap;gap:.6rem}.skill-tag{background-color:#ffffff0d;color:#fff;padding:.5rem 1rem;border-radius:50px;font-size:1rem;border:1px solid rgba(255,255,255,.2);transition:all .3s ease;cursor:default}.skill-tag:hover{border-color:var(--accent-color);box-shadow:0 0 10px var(--accent-glow);transform:translateY(-2px);background-color:#00f0ff1a}@media (max-width: 968px){.about-container{grid-template-columns:1fr;text-align:center;gap:3rem}.about-image-wrapper{justify-content:center}.profile-image,.image-backdrop{max-width:300px}.about-content{align-items:center}.section-title{font-size:2.5rem}}@media (max-width: 768px){.about-section{margin-left:0;padding-bottom:151px}.image-backdrop{display:none}}.project-card{background-color:#0a0a0a;padding:2rem;border-radius:16px;transition:all .3s ease;border:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden;display:flex;flex-direction:column;height:100%}.project-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px #0006;border-color:#00f0ff}.project-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(0,240,255,.1) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;z-index:0;pointer-events:none}.project-card:hover:before{opacity:1}.project-card h3{color:#fff;margin-bottom:1rem;font-size:1.5rem;font-weight:600;font-family:Outfit,sans-serif;position:relative;z-index:1}.project-card p{color:#d0d0d0;line-height:1.6;margin-bottom:1.5rem;flex-grow:1;font-size:.95rem;position:relative;z-index:1}.project-tech-stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;position:relative;z-index:1}.tech-chip{font-size:.75rem;color:#00f0ff;padding:.25rem .75rem;background:#00f0ff1a;border-radius:50px;border:1px solid rgba(0,240,255,.2)}.project-link{color:#0a0a0a;background-color:#fff;text-decoration:none;font-weight:600;padding:.8rem 1.5rem;border-radius:8px;text-align:center;transition:all .3s ease;display:inline-block;align-self:flex-start;font-family:Outfit,sans-serif;position:relative;z-index:1}.project-link:hover{background-color:#00f0ff;color:#000;box-shadow:0 0 15px #00f0ff99}.projects-section{background-color:#111111d9;color:#fff;padding:6rem 2rem;min-height:100vh;font-family:Outfit,sans-serif;display:flex;flex-direction:column;justify-content:center}.projects-section h2{font-size:3rem;color:#fff;margin-bottom:3rem;text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:2px}.projects-section h2:after{content:"";display:block;width:60px;height:4px;background:#00f0ff;margin:1rem auto 0;border-radius:2px}.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;max-width:1200px;margin:0 auto;width:100%}@media (max-width: 768px){.projects-section{padding:4rem 1rem 8rem}.projects-section h2{font-size:2.2rem}.project-grid{grid-template-columns:1fr}}.contact-section{background-color:#0a0a0ad9;color:#fff;padding:6rem 2rem;min-height:100vh;font-family:Outfit,sans-serif;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:none;max-width:100%;margin:0}.contact-heading{font-size:3rem;font-weight:700;margin-bottom:1rem;color:#fff}.contact-text{font-size:1.2rem;margin-bottom:3rem;color:#a0a0a0;max-width:600px;line-height:1.6}.contact-icons{display:flex;justify-content:center;gap:2rem;margin-bottom:3rem}.contact-icon{font-size:2rem;color:#fff;transition:all .3s ease;padding:1rem;background:#ffffff0d;border-radius:50%;display:flex;align-items:center;justify-content:center}.contact-icon:hover{transform:translateY(-5px);color:#00f0ff;background:#00f0ff1a;box-shadow:0 0 15px #00f0ff66}.contact-form{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:500px;background:#161616;padding:3rem;border-radius:20px;border:1px solid #2a2a2a}.form-input,.form-textarea{width:100%;padding:1rem;border-radius:10px;border:1px solid #333;background:#0a0a0a;color:#fff;outline:none;font-family:Outfit,sans-serif;font-size:1rem;transition:all .3s ease}.form-input:focus,.form-textarea:focus{border-color:#00f0ff;box-shadow:0 0 10px #00f0ff33}.form-textarea{resize:vertical;min-height:150px}.contact-button{padding:1rem 2rem;font-size:1.1rem;font-weight:600;color:#000;background-color:#00f0ff;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;font-family:Outfit,sans-serif;margin-top:1rem}.contact-button:hover{background-color:#fff;box-shadow:0 0 20px #00f0ff80;transform:scale(1.02)}.success-message{color:#00f0ff;margin-top:1rem}.error-message{color:#f44336;margin-top:1rem}@media (max-width: 768px){.contact-section{padding-bottom:100px}.contact-heading{font-size:2.5rem}.contact-form{padding:2rem}}.background-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at bottom,#1b2735,#090a0f)}.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:0;animation:twinkle 5s infinite}@keyframes twinkle{0%{opacity:0;transform:translateY(0) scale(.5)}50%{opacity:1;transform:translateY(-20px) scale(1)}to{opacity:0;transform:translateY(-40px) scale(.5)}}.shooting-star{position:absolute;width:100px;height:1px;background:linear-gradient(90deg,white,transparent);animation:shoot 3s ease-in-out infinite;opacity:0}@keyframes shoot{0%{transform:translate(0) translateY(0) rotate(-45deg);opacity:1}to{transform:translate(-500px) translateY(500px) rotate(-45deg);opacity:0}}.random-fact-container{position:fixed;bottom:20px;right:20px;background:#101010e6;border:1px solid #00f0ff;box-shadow:0 0 15px #00f0ff4d;padding:15px;border-radius:12px;color:#fff;max-width:300px;font-family:Outfit,sans-serif;z-index:2000;transform:translateY(100px);opacity:0;transition:all .5s cubic-bezier(.175,.885,.32,1.275);display:flex;align-items:flex-start;gap:10px}.random-fact-container.visible{transform:translateY(0);opacity:1}.fact-icon{font-size:1.2rem}.fact-text{font-size:.9rem;line-height:1.4;color:#d0d0d0;margin:0}@media (max-width: 768px){.random-fact-container{bottom:80px;right:50%;transform:translate(50%) translateY(100px);width:90%}.random-fact-container.visible{transform:translate(50%) translateY(0)}}.app{display:flex;font-family:Arial,sans-serif;min-height:100vh}.content{margin-left:200px;padding:0;flex:1;display:flex;flex-direction:column}@media (max-width: 768px){.content{margin-left:0;padding-bottom:80px}}