*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI','Roboto','Helvetica Neue',system-ui,-apple-system,sans-serif;background-color:#f5f0e8;color:#1a1a1a;transition:background-color .3s ease,color .3s ease;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;margin:0;position:relative}.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgb(0 0 0 / .7);z-index:999;align-items:center;justify-content:center;padding:1.5rem}.overlay.active{display:flex}.portfolio-card{background-color:#ffeb3b;border:4px solid #000;box-shadow:12px 12px 0 #000;max-width:650px;width:100%;padding:2.8rem 2rem 2.5rem;transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;display:flex;flex-direction:column}.theme-toggle-btn{position:absolute;top:0;right:0;z-index:10;width:46px;height:46px;background-color:#fff;border:none;border-left:3px solid #000;border-bottom:3px solid #000;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;padding:10px}.theme-toggle-btn i{color:#000;font-size:20px;transition:color .3s ease}.theme-toggle-btn:hover,.social-trigger-btn:hover,.social-link:hover{background-color:#f9c}.theme-toggle-btn:active,.social-trigger-btn:active,.social-link:active{box-shadow:1px 1px 0 #000;transform:translate(4px,4px)}.portfolio-card h1{font-size:3.2rem;font-weight:900;text-transform:uppercase;letter-spacing:-.5px;line-height:1.1;margin-bottom:1.2rem;word-break:break-word;color:#000;transition:color .3s ease;padding-right:3.5rem}.portfolio-card .description{font-size:1.25rem;font-weight:600;line-height:1.6;margin-bottom:2.5rem;color:#111;transition:color .3s ease}.social-trigger-btn{background-color:#fff;border:3px solid #000;box-shadow:6px 6px 0 #000;font-weight:800;font-size:1.1rem;padding:.8rem 1.8rem;cursor:pointer;color:#000;transition:all .15s ease;letter-spacing:.5px;align-self:flex-start;margin-bottom:2rem}.social-trigger-btn:hover,.social-link:hover{box-shadow:3px 3px 0 #000;transform:translate(2px,2px)}.copyright{margin-top:auto;text-align:right;font-weight:700;font-size:.9rem;border-top:3px solid #000;padding-top:1.2rem;color:#000;transition:color .3s ease,border-color .3s ease;letter-spacing:.3px}.social-popup{background-color:#ffeb3b;border:4px solid #000;max-width:450px;width:100%;padding:2.5rem 2rem 2rem;position:relative;transition:background-color .3s ease,border-color .3s ease}.social-popup h2{font-size:2rem;font-weight:900;margin-bottom:1.8rem;color:#000;transition:color .3s ease}.close-popup-btn{position:absolute;top:0;right:0;width:40px;height:40px;background-color:#fff;border:none;border-left:3px solid #000;border-bottom:3px solid #000;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;z-index:10;padding:10px}.close-popup-btn i{color:#000;font-size:20px;transition:color .3s ease}.close-popup-btn:hover,.close-popup-btn:active{background-color:#ff6b6b}.close-popup-btn:hover i,.close-popup-btn:active i{color:#fff}.close-popup-btn:active{background-color:#e55555}.social-links{display:flex;flex-direction:column;gap:1rem}.social-link{display:block;font-size:1.3rem;font-weight:700;color:#000;text-decoration:none;padding:.8rem 1rem;background-color:#fff;border:3px solid #000;box-shadow:5px 5px 0 #000;transition:all .15s ease;letter-spacing:.5px}.social-link:hover{color:#000}body.dark-mode{background-color:#121212;color:#e0e0e0}body.dark-mode .overlay{background-color:rgb(0 0 0 / .85)}body.dark-mode .portfolio-card,body.dark-mode .social-popup{background-color:#1e1e1e}body.dark-mode .portfolio-card,body.dark-mode .social-popup{border:4px solid #444}body.dark-mode .portfolio-card{box-shadow:12px 12px 0 #333}body.dark-mode .theme-toggle-btn,body.dark-mode .close-popup-btn{background-color:#2a2a2a;border-left:3px solid #555;border-bottom:3px solid #555}body.dark-mode .theme-toggle-btn i{color:#e0e0e0}body.dark-mode .close-popup-btn i{color:#e0e0e0}body.dark-mode .theme-toggle-btn:hover{background-color:#3a3a3a}body.dark-mode .portfolio-card h1,body.dark-mode .social-popup h2{color:#e0e0e0}body.dark-mode .portfolio-card .description{color:#aaa}body.dark-mode .social-trigger-btn,body.dark-mode .social-link{background-color:#2a2a2a;border:3px solid #555;color:#e0e0e0}body.dark-mode .social-trigger-btn{box-shadow:6px 6px 0 #333}body.dark-mode .social-trigger-btn:hover{background-color:#3a3a3a;box-shadow:3px 3px 0 #444}body.dark-mode .copyright{color:#888;border-top:3px solid #444}body.dark-mode .close-popup-btn:hover{background-color:#3a3a3a}body.dark-mode .close-popup-btn:hover i{color:#fff}body.dark-mode .social-link{box-shadow:5px 5px 0 #333}body.dark-mode .social-link:hover{background-color:#3a3a3a;box-shadow:3px 3px 0 #444;color:#fff}@media (max-width:500px){.portfolio-card{padding:2rem 1.5rem 2rem}.portfolio-card h1{font-size:2.4rem;padding-right:3rem}.theme-toggle-btn,.close-popup-btn{width:40px;height:40px;padding:9px}.theme-toggle-btn i{font-size:17px}.close-popup-btn i{font-size:16px}.social-trigger-btn{font-size:1rem;padding:.7rem 1.4rem}.social-popup{max-width:85%;padding:2rem 1.3rem 1.8rem}.social-popup h2{font-size:1.5rem}.social-link{font-size:1rem;padding:.7rem .8rem}}