html,body{background-color:var(--bg);color:var(--text);margin:0;font-family:Segoe UI,sans-serif;min-height:100vh;transition:background .3s,color .3s;scroll-behavior:smooth}section{background-color:var(--bg);color:var(--text);transition:background .3s,color .3s;margin:0 auto;padding:4rem 2rem}a{color:var(--text);text-decoration:none;font-weight:500;transition:color .3s}a:hover{text-decoration:underline}html,body,header,section,footer,.card{transition:background-color .5s ease,color .5s ease,border-color .5s ease,filter .5s ease}.dark-mode html,.dark-mode body{background-color:var(--bg);color:var(--text)}#root,.App{background-color:var(--bg);color:var(--text);min-height:100vh;transition:background-color .5s ease,color .5s ease}:root{--bg: #ffffff;--text: #000000;--icon-filter: brightness(0);--primary-color: #0077ff;--primary-hover: #005fcc;--text-color: #f1f1f1;--float-distance: -1vh;--fade-duration: .8s}.dark-mode{--bg: #2a2a2a;--text: #f1f1f1;--link: #9cdcfe;--project-link: #66aaff;--component-background: rgba(32, 30, 30, .63);--icon-black-white-filter: brightness(0) invert(1);--icon-color-filter: brightness(1.2) invert(1)}#about{display:flex;justify-content:center;align-items:center;min-height:25vh;padding:4rem 2rem}.about-container{display:flex;gap:3rem;max-width:1000px;padding:2rem;width:100%}.about-left,.about-right{display:flex;flex-direction:column;justify-content:center}.about-left{flex:1 1 40%;align-items:center}.about-right{flex:2 1 60%;gap:1rem}.about-img{width:auto;height:100%;max-width:100%;border-radius:10px;display:block}.about-menu{display:flex;gap:1rem;margin-bottom:1rem;color:var(--primary-color);justify-content:center}.about-menu button{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text);width:100%}.about-menu button:hover{color:var(--primary-color)}.about-menu button.active{font-weight:700;color:var(--primary-color);border-bottom:3px solid var(--primary-color);width:100%}.skills-submenu{display:flex;border-bottom:1px solid #ddd}.skills-submenu button{background:none;border:none;width:100%;padding:.5rem 0;font-size:1.25rem;cursor:pointer;border-bottom:3px solid transparent;color:var(--text)}.skills-submenu button:hover{color:var(--primary-color)}.skills-submenu button.active{color:var(--primary-color);border-bottom-color:var(--primary-color);font-weight:500}.skills-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin-top:1.5rem;background-color:#fff}.skills-icons img{width:40px;height:40px;object-fit:contain;transition:transform .2s ease;position:relative}.skills-icons img:hover{transform:scale(1.1)}.skills-icons img:hover:after{opacity:1}.icon-container{position:relative;display:inline-block}.icon-container:hover:after{content:attr(data-name);position:absolute;bottom:-1.8rem;left:50%;transform:translate(-50%);background-color:#201e1ea1;color:#fff;padding:2px 6px;border-radius:4px;font-size:.8rem;white-space:nowrap;opacity:.9}@media(max-width:768px){.about-container{flex-direction:column;align-items:center;text-align:center}}#contact{max-width:1000px;padding:0 2rem;text-align:left;margin-top:3rem}#contact h2{font-size:2rem;margin-left:.75rem}.contact-container{display:flex;max-width:1000px}.contact-left,.contact-right{flex:1;animation:float 3s ease-in-out infinite}.socials{display:flex;flex-direction:column;align-items:center;gap:2rem}.socials a{color:var(--text);text-decoration:none;font-size:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative;transition:color .3s}.socials img{width:40px;height:40px;filter:var(--icon-black-white-filter);transition:transform .3s}.socials a:hover{color:var(--primary-color)}.socials a:hover img{transform:translateY(-3px)}.socials a:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:3px;background-color:#07f;border-radius:2px;transition:width .3s ease}.socials a:hover:after{width:100%}@keyframes float{0%{transform:translateY(10px)}50%{transform:translateY(-10px)}to{transform:translateY(10px)}}@media(max-width:768px){.contact-container{flex-direction:column;align-items:center;text-align:center}.contact-left,.contact-right{width:100%;justify-content:center}}.dark-mode .card{background:var(--component-background);color:var(--text);box-shadow:0 2px 8px var(--component-background)}.dark-mode .card a{color:var(--project-link)}.dark-mode a{color:var(--link)}.dark-mode footer{background:var(--component-background);color:var(--text);border-top:1px solid #333}.footer{text-align:center;padding:1.5rem 0;margin-top:3rem;border-top:1px solid var(--border-color, #ccc);color:var(--text);font-size:.9rem;background-color:var(--bg-secondary, transparent)}.footer p{margin:0;opacity:1}header{background:var(--bg);border-bottom:1px solid #ccc;position:sticky;top:0;z-index:10}nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem}nav h1{margin:0;font-size:1.5rem}ul{list-style:none;display:flex;gap:1.5rem;margin:0;padding:0}.header-socials{display:flex;gap:1rem;align-items:center}.header-socials img{width:30px;height:30px;filter:var(--icon-black-white-filter);transition:filter .3s,transform .3s}.header-socials a:hover img{transform:translateY(-3px)}.toggle-btn{margin-left:1rem;background:none;border:1px solid var(--text);color:var(--text);padding:5px 10px;border-radius:5px;cursor:pointer;transition:.3s}.toggle-btn:hover{background:var(--text);color:var(--bg)}.menu-icon{display:none;flex-direction:column;cursor:pointer}.menu-icon div{width:35px;height:3px;background-color:var(--text);margin:4px 0;transition:.3s}@media(max-width:600px){ul{flex-direction:column;display:none}ul.show,.menu-icon{display:flex}}.intro-background{position:relative;width:100%;height:75vh;display:flex;justify-content:center;align-items:center}.background-svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto;height:auto;object-fit:contain;z-index:0}.intro-text{color:var(--text-color);position:absolute;top:35.5%;z-index:1;text-align:center}.intro-float{animation:floatText 3s ease-in-out infinite}.intro-text h2,.intro-text p{opacity:0;animation:appearText var(--fade-duration) forwards;margin-top:1rem}.intro-text h2{animation-delay:1s;font-size:calc(1rem + 1vw);line-height:1.25}.intro-text p{animation-delay:2s;font-size:calc(.5rem + 1vw);line-height:1.5;max-width:32ch;word-wrap:break-word;white-space:pre-wrap}.cursor{display:inline-block;opacity:1}.cursor.active{animation:blink .8s steps(1) infinite}.intro-button{position:absolute;top:100%;left:50%;z-index:2;opacity:0;animation:fadeSlideIn var(--fade-duration) forwards;animation-delay:5s}.intro-button button{color:#fff;background-color:var(--primary-color);font-size:1.2rem;padding:.5rem 1.2rem;border-radius:6px;border:none;transition:background-color .3s ease,transform .2s ease}.intro-button button:hover{background-color:var(--primary-hover);transform:translateY(-2px)}@keyframes floatText{0%{transform:translateY(0)}50%{transform:translateY(var(--float-distance))}to{transform:translateY(0)}}@keyframes appearText{0%{opacity:0}to{opacity:1}}@keyframes fadeSlideIn{to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}@media(max-width:768px){.background-svg{width:100%}.intro-text{max-width:50vw}.intro-text h2{font-size:1.5rem}.intro-text p{font-size:.9rem;max-width:90%}.intro-button{top:calc(50% + 25vh)}.intro-button button{font-size:.9rem;padding:.5rem 1rem}}#projects{min-height:25vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;max-width:1000px;margin:0,auto;padding:0vh 2rem;transition:background .3s,color .3s;scroll-margin-top:40px}#projects h2{font-size:2.5rem;margin-bottom:1rem;text-align:left}.project-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:1000px;width:100%}.card{background:var(--bg);color:var(--text);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #201e1ea1}.card p{white-space:pre-line}.card:hover{transform:translateY(-5px)}.card a{display:inline-block;margin-top:.5rem;color:#07f;font-weight:700}.card a:hover{color:#005fcc;transform:translateY(-5px)}