:root{font-family:Montserrat,sans-serif;font-optical-sizing:auto;--light-bg: #fdfdfd;--dark-bg: #1c1c1c;--light-text: #1a1a1a;--dark-text: #f2f2f2;--primary-blue: #1e5162;--primary-blue-hover: #1c414c;--dark-mode-blue: #4a97ae;--dark-mode-blue-hover: #5bb0c9;--shadow-light: rgba(0,0,0,.08) 0px 4px 12px;--shadow-dark: rgba(0,0,0,.3) 0px 10px 20px;--nav-height: 70px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;scroll-behavior:smooth;color:var(--light-text);background-color:var(--light-bg)}li{list-style:none}.app-container{display:flex;flex-direction:column;min-height:100vh}.content{flex:1;max-width:1200px;margin:0 auto;padding:6em 1.5em 2em;display:flex;flex-direction:column;gap:4em}h1{font-size:2.5rem;font-weight:800;margin-bottom:1rem;line-height:1.2}h2{font-size:1.75rem;font-weight:700;margin-bottom:.75rem}p{font-size:1.05rem;line-height:1.7;font-weight:400;color:inherit}.button-group{display:flex;flex-wrap:wrap;gap:1.5em;margin-top:2em}button:not(.dark-mode-toggle){cursor:pointer;font-weight:700;font-size:1rem;border-radius:8px;padding:.75em 1.25em;transition:all .3s ease;box-shadow:var(--shadow-light)}.button-fill{background-color:var(--primary-blue);color:#fff;border:none}.button-outline{background-color:transparent;color:var(--light-text);border:2px solid var(--primary-blue-hover)}nav{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;width:100%;height:var(--nav-height);z-index:200;background-color:var(--light-bg);padding:0 2em;box-shadow:0 2px 8px #0000000d}nav ul{display:flex;flex-direction:column;gap:2em}nav li a{text-decoration:none;font-weight:600;font-size:1rem;color:var(--light-text);transition:color .2s ease}.dark-mode-toggle{margin-left:1em;border:none;background:transparent;color:#fff;padding:.5em 1em;border-radius:6px;font-weight:600;cursor:pointer;transition:background .3s ease;margin-right:1.5em}.hamburger-checkbox{display:none}.hamburger-menu{display:flex;flex-direction:column;gap:5px;cursor:pointer;z-index:201;margin-left:1.5em}.hamburger-menu span{display:block;width:28px;height:3px;background-color:var(--light-text);border-radius:2px;transition:all .3s ease}.hamburger-checkbox:checked+.hamburger-menu span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger-checkbox:checked+.hamburger-menu span:nth-child(2){opacity:0}.hamburger-checkbox:checked+.hamburger-menu span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.sidebar{position:fixed;top:0;left:0;width:80%;max-width:220px;height:100%;background-color:var(--light-bg);transform:translate(-100%);transition:transform .3s ease;padding:6em 2em;z-index:199;display:flex;flex-direction:column;gap:2em}.hamburger-checkbox:checked~.sidebar{transform:translate(0)}.container{max-width:1000px;margin:0 auto;padding:2em}.ProjectBlogToggle{display:flex;gap:1.5em;margin-bottom:1.5em;cursor:pointer;font-weight:600}.ProjectBlogToggle li{padding:.5em 1em;border-radius:8px;transition:background .3s,color .3s}.ProjectBlogToggle li:not(.active):hover{background-color:var(--secondary-blue);color:#fff}.projects,.blog{display:grid;grid-template-columns:1fr;gap:2em}.project-item,.blog-item{background-color:var(--light-bg);border-radius:12px;box-shadow:var(--shadow-light);padding:1.5em;transition:transform .3s ease,box-shadow .3s ease}.project-item:hover,.blog-item:hover{transform:translateY(-4px);box-shadow:#0000002e 0 8px 16px}.project-text h3,.blog-item h3{font-size:1.3rem;font-weight:700;margin-bottom:.5em}.project-text p,.blog-item p{font-size:1rem;line-height:1.5;margin-bottom:.5em}.project-text a{display:inline-block;margin-top:.5em;padding:.5em 1em;border-radius:6px;background-color:var(--primary-blue);color:#fff;text-decoration:none;font-weight:600;transition:background .3s ease}.view-all{margin-top:1.5em}.view-all a{color:var(--primary-blue);font-weight:600;text-decoration:none;transition:color .3s ease}footer{text-align:center;padding:2em 0;background-color:var(--light-bg);color:var(--light-text)}@media (min-width: 768px){.projects,.blog{grid-template-columns:repeat(2,1fr)}nav ul{flex-direction:row;margin-left:1.5em;justify-content:flex-start;gap:2em;min-width:500px}.hamburger-menu,.hamburger-checkbox{display:none}.sidebar{transform:none;position:static;width:auto;height:auto;padding:0;flex-direction:row;gap:2em;background:transparent;box-shadow:none}}button.button-fill:hover{background-color:var(--primary-blue-hover)}button.button-outline:hover{color:#000;border-color:var(--primary-blue-hover)}nav li a:hover{color:var(--primary-blue-hover)}.ProjectBlogToggle li.active{background-color:var(--primary-blue);color:#fff}.ProjectBlogToggle li:not(.active):hover{background-color:var(--primary-blue-hover);color:#fff}.project-text a:hover{background-color:var(--primary-blue-hover)}.view-all a:hover{color:var(--primary-blue-hover)}body.dark-mode{background-color:var(--dark-bg);color:var(--dark-text)}body.dark-mode nav{background-color:var(--dark-bg)}body.dark-mode nav li a{color:var(--dark-text)}body.dark-mode nav li a:hover{color:var(--dark-mode-blue-hover)}body.dark-mode .sidebar{background-color:var(--dark-bg);color:var(--dark-text)}body.dark-mode .button-fill{background-color:var(--dark-mode-blue);color:#fff}body.dark-mode .button-fill:hover{background-color:var(--dark-mode-blue-hover)}body.dark-mode .button-outline{border-color:var(--dark-mode-blue);color:var(--dark-text)}body.dark-mode .button-outline:hover{color:#fff;border-color:var(--dark-mode-blue-hover)}body.dark-mode .ProjectBlogToggle li.active{background-color:var(--dark-mode-blue);color:#fff}body.dark-mode .ProjectBlogToggle li:not(.active):hover{background-color:var(--dark-mode-blue-hover);color:#fff}body.dark-mode .project-item,body.dark-mode .blog-item{background-color:var(--dark-bg);color:var(--dark-text);box-shadow:#ffffff0d 0 8px 16px}body.dark-mode .project-item:hover,body.dark-mode .blog-item:hover{transform:translateY(-4px);box-shadow:#ffffff2e 0 8px 16px}body.dark-mode .project-text a{background-color:var(--dark-mode-blue);color:#fff}body.dark-mode .project-text a:hover{background-color:var(--dark-mode-blue-hover)}body.dark-mode .hamburger-menu span{background-color:var(--dark-text)}body.dark-mode footer{background-color:var(--dark-bg);color:var(--dark-text)}body.dark-mode .content{background-color:var(--dark-bg)}body.dark-mode .view-all a:hover{color:var(--dark-mode-blue-hover)}.project-detail{display:flex;flex-direction:column;gap:1.5em;max-width:900px;margin:0 auto;align-items:flex-start}.project-detail h1{font-size:2rem;text-align:left;margin:0}.project-detail p{max-width:800px;margin:0;line-height:1.6;text-align:left}.slider{position:relative;display:flex;align-items:center;justify-content:center;max-width:900px;overflow:hidden}.slider-image{width:100%;text-align:center}.slider-image img{width:100%;max-height:70vh;height:auto;object-fit:contain;border-radius:12px;box-shadow:var(--shadow-md)}.slider button{position:absolute;top:50%;transform:translateY(-50%);background:#0006;color:#fff;border:none;font-size:2rem;padding:.4em .6em;cursor:pointer;border-radius:50%;transition:background .2s ease;z-index:2}.slider button:hover{background:#000000b3}.slider .prev{left:1rem}.slider .next{right:1rem}.visit-link,.back-link{display:inline-block;padding:.6em 1.2em;border:2px solid var(--primary-blue);background:transparent;color:#000;border-radius:8px;text-decoration:none;transition:background .2s ease}.visit-link:hover,.back-link:hover{background:var(--primary-blue);color:#fff}body.dark-mode .visit-link,body.dark-mode .back-link{border:2px solid var(--dark-mode-blue);color:#fff}body.dark-mode .visit-link:hover,body.dark-mode .back-link:hover{background:var(--dark-mode-blue-hover);color:#fff}
