@font-face{font-family:Coffee;src:url(/assets/fonts/Coffee.otf)}:root{--primary-color: #1a202c;--secondary-color: snow;--third-color: #9c7641}.light-mode{--primary-color: #f3f4f6;--secondary-color: #1f2937;--third-color: #9c7641}.coffee-font{font-family:Coffee,sans-serif}.hero-section{background-size:cover;background:url(/assets/images/hero.png) fixed top}.project-card{transition:all .3s ease;background-size:cover;background-position:center;filter:grayscale(100%)}.project-card:hover{filter:grayscale(0%);transform:translateY(-10px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.project-overlay{background:#000000b3;opacity:0;transition:all .3s ease}.project-card:hover .project-overlay{opacity:1}.scroll-container{scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--third-color)}.scroll-container::-webkit-scrollbar{height:8px}.scroll-container::-webkit-scrollbar-track{background:var(--primary-color);border-radius:10px}.scroll-container::-webkit-scrollbar-thumb{background-color:var(--third-color);border-radius:10px}.nav-link{position:relative}.nav-link:after{content:"";position:absolute;width:0;height:2px;bottom:-2px;left:0;background-color:var(--third-color);transition:width .3s ease}.nav-link:hover:after{width:100%}.skill-card{position:relative;overflow:hidden;transition:all .3s ease;transform-style:preserve-3d}.skill-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,var(--third-color),transparent);opacity:0;transition:all .3s ease;z-index:-1}.skill-card:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 10px 20px #0003}.skill-card:hover:before{opacity:.3}.skill-icon{transition:all .3s ease}.skill-card:hover .skill-icon{transform:scale(1.2)}body{transition:background-color .5s ease,color .5s ease;background-color:var(--primary-color);color:var(--secondary-color)}*{margin:0;padding:0;box-sizing:border-box}.project-card-grid{transition:all .3s ease;position:relative;overflow:hidden}.project-card-grid:hover{transform:translateY(-5px);box-shadow:0 10px 25px -5px #0003}.project-status{position:absolute;bottom:10px;right:10px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase;z-index:10;box-shadow:0 2px 5px #0003}.status-public{background-color:#10b981;color:#fff}.status-private{background-color:#ef4444;color:#fff}.status-archive{background-color:#6b7280;color:#fff}.status-soon{background-color:#f59e0b;color:#fff}.tech-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;margin-right:5px;margin-bottom:5px}.project-modal{position:fixed;inset:0;background-color:#000c;z-index:1000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:all .3s ease;padding:20px;overflow-y:auto}.project-modal.active{opacity:1;visibility:visible}.modal-content{background-color:var(--primary-color);border-radius:8px;max-width:900px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 25px #0000004d;border:1px solid var(--third-color);position:relative;scrollbar-width:none}.modal-content::-webkit-scrollbar{display:none}.close-modal{position:absolute;top:15px;right:15px;font-size:24px;cursor:pointer;color:var(--secondary-color);background-color:#0000004d;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease;z-index:10}.close-modal:hover{background-color:var(--third-color);color:#fff}.modal-image{width:100%;height:400px;object-fit:cover;border-radius:8px 8px 0 0;position:relative}.modal-video{width:100%;height:400px;border-radius:8px 8px 0 0;background-color:#000}.modal-status{position:absolute;bottom:20px;right:20px;padding:6px 16px;border-radius:20px;font-size:14px;font-weight:700;text-transform:uppercase;z-index:10;box-shadow:0 2px 5px #0003}.gallery-modal{position:fixed;inset:0;background-color:#000000e6;z-index:2000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:all .3s ease}.gallery-modal.active{opacity:1;visibility:visible}.gallery-modal-content{position:relative;max-width:90%;max-height:90%;text-align:center}.gallery-media{max-width:100%;max-height:80vh;border-radius:8px;box-shadow:0 5px 15px #00000080}.gallery-image{object-fit:contain}.gallery-video{background-color:#000;width:800px;height:450px}.close-gallery-modal{position:absolute;top:20px;right:20px;font-size:30px;color:#fff;cursor:pointer;background-color:#00000080;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease;z-index:10}.close-gallery-modal:hover{background-color:var(--third-color)}.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 20px;z-index:5;pointer-events:none}.gallery-nav-btn{background-color:#00000080;color:#fff;border:none;width:50px;height:50px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;pointer-events:all}.gallery-nav-btn:hover{background-color:var(--third-color)}.gallery-thumbnail{cursor:pointer;transition:transform .3s ease;position:relative}.gallery-thumbnail:hover{transform:scale(1.02);box-shadow:0 5px 15px #0000004d}.video-thumbnail:after{content:"";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:2rem;text-shadow:0 0 10px rgba(0,0,0,.5);opacity:.8;pointer-events:none}.gallery-caption{color:#fff;margin-top:10px;font-size:18px;text-align:center}@media(max-width:768px){.modal-content{max-height:95vh}.modal-image,.modal-video{height:250px}.gallery-modal-content{max-width:95%}.gallery-nav-btn{width:40px;height:40px;font-size:16px}.close-gallery-modal{width:40px;height:40px;font-size:24px}.gallery-video{width:100%;height:auto;max-height:60vh}}:root{--error-color: #ef4444;--flame-color: #ff5722}.light-mode{--error-color: #dc2626;--flame-color: #ff7043}.broken-cup{position:relative;width:150px;height:180px;margin:0 auto}.cup{position:absolute;width:120px;height:120px;left:15px;background:linear-gradient(to right,#f3f3f3,#ddd);border-radius:0 0 60px 60px;box-shadow:0 0 0 10px var(--third-color),0 20px 35px #00000080;overflow:hidden}.cup:before{content:"";position:absolute;width:40px;height:70px;border:10px solid var(--third-color);right:-30px;top:10px;border-radius:0 20px 50px 0;border-left:none}.coffee{position:absolute;width:100%;height:50px;bottom:0;background-color:#6f4e37;border-radius:0 0 60px 60px}.crack-line{position:absolute;background-color:var(--error-color);z-index:2}.crack-line-1{width:80px;height:3px;top:40px;left:20px;transform:rotate(20deg);animation:crackGlow 2s ease-in-out infinite}.crack-line-2{width:60px;height:3px;top:70px;left:30px;transform:rotate(-15deg);animation:crackGlow 2s ease-in-out infinite .5s}.piece{position:absolute;background:linear-gradient(to right,#f3f3f3,#ddd);border:2px solid var(--third-color);z-index:1;animation:pieceFall 3s ease-in forwards}.piece-1{width:40px;height:30px;top:30px;left:10px;border-radius:0 0 20px;transform:rotate(10deg)}.piece-2{width:30px;height:25px;top:80px;left:70px;border-radius:0 0 0 15px;transform:rotate(-5deg);animation-delay:.3s}.spill{position:absolute;width:100px;height:20px;background-color:#6f4e37;top:140px;left:25px;border-radius:50%;filter:blur(5px);transform-origin:top center;animation:spillFlow 3s ease-out forwards}.spill-drop{position:absolute;width:15px;height:15px;background-color:#6f4e37;border-radius:50%;filter:blur(3px);animation:dropFall 2s ease-out forwards}.drop-1{top:150px;left:40px;animation-delay:.5s}.drop-2{top:155px;left:70px;animation-delay:.8s}.drop-3{top:160px;left:90px;animation-delay:1.1s}.flame{position:absolute;border-radius:50% 50% 20% 20%;filter:blur(5px);z-index:3;transform-origin:center bottom;mix-blend-mode:screen}.flame-main{width:30px;height:60px;left:45px;top:-50px;background:linear-gradient(to top,var(--flame-color),#ffeb3b);animation:flicker 1.5s ease-in-out infinite alternate,glow 2s ease-in-out infinite}.flame-small-1{width:20px;height:40px;left:35px;top:-30px;background:linear-gradient(to top,#ff9800,#ffeb3b);animation:flickerSmall 1.2s ease-in-out infinite alternate .3s,glow 1.5s ease-in-out infinite .3s}.flame-small-2{width:15px;height:30px;left:60px;top:-20px;background:linear-gradient(to top,#ff9800,#ffeb3b);animation:flickerSmall 1s ease-in-out infinite alternate .6s,glow 1.2s ease-in-out infinite .6s}.smoke{position:absolute;width:8px;height:8px;border-radius:50%;background-color:#ffffff4d;filter:blur(3px);animation:smokeRise 4s ease-out forwards;z-index:2}.smoke-1{left:50px;top:-60px;animation-delay:.2s}.smoke-2{left:45px;top:-65px;animation-delay:.5s}.smoke-3{left:55px;top:-70px;animation-delay:.8s}@keyframes flicker{0%,to{transform:scaleY(1) skew(0);height:60px}25%{transform:scaleY(1.1) skew(5deg);height:65px}50%{transform:scaleY(.9) skew(-3deg);height:55px}75%{transform:scaleY(1.05) skew(2deg);height:62px}}@keyframes flickerSmall{0%,to{transform:scaleY(1) skew(0)}25%{transform:scaleY(1.2) skew(8deg)}50%{transform:scaleY(.8) skew(-5deg)}75%{transform:scaleY(1.1) skew(4deg)}}@keyframes glow{0%,to{box-shadow:0 0 10px var(--flame-color)}50%{box-shadow:0 0 20px var(--flame-color)}}@keyframes smokeRise{0%{transform:translateY(0) scale(1);opacity:.5}50%{transform:translateY(-30px) scale(1.5);opacity:.3}to{transform:translateY(-60px) scale(2);opacity:0}}@keyframes crackGlow{0%,to{opacity:.7;box-shadow:0 0 5px var(--error-color)}50%{opacity:1;box-shadow:0 0 15px var(--error-color)}}@keyframes pieceFall{0%{transform:translateY(0) rotate(0)}to{transform:translateY(30px) rotate(5deg)}}@keyframes spillFlow{0%{transform:scaleY(0);opacity:0}30%{transform:scaleY(1);opacity:1}to{transform:scaleY(1.2) scaleX(1.5);opacity:.8}}@keyframes dropFall{0%{transform:translateY(0);opacity:0}30%{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}.error-code{font-size:8rem;font-weight:700;background:linear-gradient(45deg,var(--error-color),var(--third-color));-webkit-background-clip:text;background-clip:text;color:transparent;animation:errorPulse 2s ease-in-out infinite}@keyframes errorPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}.error-content{animation:fadeIn 1.5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.error-box{border-left:5px solid var(--error-color);background-color:#ef44441a;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}