@font-face{font-family:'Orbitron';src:url('fonts/orbitron-400.ttf') format('truetype');font-weight:400;font-style:normal;} @font-face{font-family:'Orbitron';src:url('fonts/orbitron-700.ttf') format('truetype');font-weight:700;font-style:normal;} @font-face{font-family:'Orbitron';src:url('fonts/orbitron-900.ttf') format('truetype');font-weight:900;font-style:normal;} @font-face{font-family:'Press Start 2P';src:url('fonts/press-start-2p-400.ttf') format('truetype');font-weight:400;font-style:normal;}body{background:#000;color:#00ff00;font-family:'Courier New',monospace;margin:0;padding:0;overflow-x:hidden;position:relative;min-height:100vh;}body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse 1000px 500px at 50% 20%,rgba(0,255,0,0.15) 0%,rgba(0,255,0,0.08) 30%,rgba(0,255,0,0.04) 60%,transparent 80%),radial-gradient(circle at 25% 25%,transparent 8px,rgba(0,255,0,0.03) 9px,rgba(0,255,0,0.03) 10px,transparent 11px),radial-gradient(circle at 75% 75%,transparent 8px,rgba(0,255,0,0.03) 9px,rgba(0,255,0,0.03) 10px,transparent 11px),repeating-linear-gradient(30deg,transparent 0px,transparent 40px,rgba(0,255,0,0.02) 40px,rgba(0,255,0,0.02) 42px,transparent 42px,transparent 80px),repeating-linear-gradient(-30deg,transparent 0px,transparent 40px,rgba(0,255,0,0.02) 40px,rgba(0,255,0,0.02) 42px,transparent 42px,transparent 80px),repeating-linear-gradient(90deg,transparent 0px,transparent 60px,rgba(0,255,0,0.01) 60px,rgba(0,255,0,0.01) 61px,transparent 61px,transparent 120px),linear-gradient(45deg,#000 25%,#001100 25%,#001100 50%,#000 50%,#000 75%,#001100 75%);background-size:100% 100%,50px 50px,50px 50px,80px 80px,80px 80px,120px 120px,20px 20px;pointer-events:none;z-index:1;opacity:0.7;} @keyframes wireframeFloat{0%,100%{transform:perspective(800px) rotateX(60deg) translateY(0px);opacity:0.8;}50%{transform:perspective(800px) rotateX(65deg) translateY(-5px);opacity:1;}} @keyframes wireframePulse{0%,100%{opacity:0.6;transform:scale(1);}25%{opacity:0.4;transform:scale(1.01);}50%{opacity:0.7;transform:scale(0.99);}75%{opacity:0.5;transform:scale(1.005);}}.container{padding:20px;position:relative;z-index:5;}h1{font-size:3rem;text-shadow:0 0 5px lime;}.intro{background:#111;padding:10px;border:2px dashed magenta;margin-bottom:20px;font-size:1.2rem;}nav a{display:inline-block;margin:10px 0;color:yellow;text-decoration:none;font-weight:bold;font-size:1.2rem;}nav a:hover{color:cyan;background:#222;} @keyframes flicker{from{opacity:0.8;}to{opacity:1;}}.title-box{font-size:4rem;font-weight:bold;text-align:center;margin-top:40px;padding:20px;color:#fff;background:linear-gradient(to right,magenta,cyan);border:4px double yellow;box-shadow:0 0 10px magenta;text-shadow:2px 2px #000;}.nav-buttons{text-align:center;margin-top:30px;}.nav-buttons a{display:block;margin:35px auto;padding:15px 30px;width:fit-content;background:linear-gradient(145deg,#444,#222);color:#00ff00;font-size:1.6rem;font-weight:900;font-family:'Press Start 2P','Orbitron','Courier New','Consolas','Monaco','Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono',monospace;text-decoration:none;text-shadow:0 0 4px #00ff00,1px 0px 0px #003300,0px 1px 0px #003300,-1px 0px 0px #003300,0px -1px 0px #003300,2px 2px 0px #002200;border:3px outset #666;border-radius:8px;box-shadow:0 6px 12px rgba(0,0,0,0.8),inset 0 1px 0 rgba(255,255,255,0.2);position:relative;transform:perspective(500px) rotateX(5deg);transition:all 0.2s ease;cursor:pointer;z-index:10;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;filter:contrast(1.4) brightness(1.2) saturate(1.3);letter-spacing:3px;}.nav-buttons a::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 1px,rgba(0,255,0,0.05) 1px,rgba(0,255,0,0.05) 2px),repeating-linear-gradient(90deg,transparent 0px,transparent 1px,rgba(255,0,255,0.05) 1px,rgba(255,0,255,0.05) 2px);border-radius:8px;pointer-events:none;z-index:1;}.nav-buttons a:hover{background:linear-gradient(145deg,#555,#333);color:#ff00ff;text-shadow:0 0 8px #ff00ff;border-color:#ff00ff;transform:perspective(500px) rotateX(0deg) translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,0.9),inset 0 1px 0 rgba(255,255,255,0.3),0 0 20px rgba(255,0,255,0.8);}.nav-buttons a:active{transform:perspective(500px) rotateX(10deg) translateY(1px);border-style:inset;box-shadow:0 2px 4px rgba(0,0,0,0.8),inset 0 -1px 0 rgba(255,255,255,0.1),0 0 10px rgba(255,0,255,0.6);}.logo-image{text-align:center;margin-top:40px;}.logo-image img{width:300px;height:auto;image-rendering:pixelated;}/*Komputer 3D*/.computer-3d{position:relative;margin:30px auto;perspective:1000px;z-index:10;transform-style:preserve-3d;animation:computerFloat 4s ease-in-out infinite;width:120px;text-align:center;}.monitor{width:120px;height:80px;background:#333;border:3px solid #00ff00;border-radius:5px;position:relative;transform-style:preserve-3d;transform:rotateX(-10deg) rotateY(15deg);box-shadow:0 0 10px #00ff00,inset 0 0 5px rgba(0,255,0,0.3);}.monitor::before{content:'';position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:linear-gradient(45deg,#00ff00,#ff00ff,#00ffff);border-radius:8px;z-index:-1;opacity:0.7;}.screen{width:100px;height:60px;background:#000;margin:10px;border:2px solid #00ff00;border-radius:3px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}.screen::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,0,0.4),transparent);animation:screenScan 3s linear infinite;}.screen-content{color:#00ff00;font-family:'Courier New',monospace;font-size:8px;font-weight:bold;text-shadow:0 0 3px #00ff00;animation:textFlicker 2s infinite;z-index:2;}.keyboard{width:100px;height:20px;background:#444;border:2px solid #00ff00;border-radius:3px;margin:5px 10px;position:relative;transform:rotateX(70deg) translateZ(-10px);box-shadow:0 0 5px rgba(0,255,0,0.5);}.keyboard::before{content:'';position:absolute;top:2px;left:2px;right:2px;bottom:2px;background:repeating-linear-gradient(90deg,#555 0px,#555 8px,#333 8px,#333 9px);border-radius:2px;}.base{width:40px;height:15px;background:#333;border:2px solid #00ff00;border-radius:5px;margin:0 auto;transform:translateZ(-20px);box-shadow:0 0 5px rgba(0,255,0,0.5);} @keyframes computerFloat{0%,100%{transform:translateY(0px) rotateY(0deg);}50%{transform:translateY(-10px) rotateY(5deg);}} @keyframes screenScan{0%{left:-100%;}100%{left:100%;}} @keyframes textFlicker{0%,100%{opacity:1;}50%{opacity:0.7;}}#threejs-container{position:fixed;bottom:20px;right:20px;z-index:15;border:3px solid #00ff00;border-radius:10px;box-shadow:0 0 20px rgba(0,255,0,0.8),inset 0 0 10px rgba(0,255,0,0.2);background:rgba(0,50,0,0.7);padding:8px;width:416px;height:316px;}#threejs-container canvas{border-radius:8px;display:block;border:1px solid rgba(0,255,0,0.3);}/*Memory Card Section*/.memory-card-section{text-align:center;margin:40px auto 20px;padding:20px;position:relative;z-index:10;}.memory-card-image{max-width:150px;height:auto;transition:all 0.3s ease;cursor:pointer;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;filter:contrast(1.2) brightness(1.1);}.memory-card-image:hover{transform:scale(1.05);filter:contrast(1.4) brightness(1.3) saturate(1.2);}.memory-card-section a{display:inline-block;position:relative;}.carousel-container{position:relative;width:1425px;margin:auto;}.carousel-viewport{width:100%;overflow:hidden;}.portfolio-grid{display:flex;position:relative;left:0;transition:left 0.5s ease-in-out;}.portfolio-grid.expanded-view{display:flex;justify-content:center;left:0!important;}.portfolio-item-wrapper{flex:0 0 auto;width:225px;padding:20px;margin:0 10px;box-sizing:content-box;}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);background-color:transparent;border:none;cursor:pointer;z-index:100;width:40px;height:40px;}.carousel-button::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00ff00;box-shadow:0 0 5px #00ff00,0 0 10px #00ff00;}.carousel-button.prev::before{clip-path:polygon(100% 0,40% 50%,100% 100%,80% 100%,20% 50%,80% 0);}.carousel-button.next::before{clip-path:polygon(0 0,20% 0,80% 50%,20% 100%,0 100%,60% 50%);}.carousel-button:hover::before{background-color:#fff;box-shadow:0 0 10px #fff,0 0 15px #fff;}.carousel-button.prev{left:-60px;}.carousel-button.next{right:-60px;}.portfolio-thumbnail-container{position:relative;cursor:pointer;width:225px;height:400px;display:flex;justify-content:center;align-items:center;background-color:#000;border:2px solid #00ff00;box-shadow:5px 5px 0px #00ff00;}.video-thumbnail{width:100%;height:100%;object-fit:cover;}.play-button{position:absolute;font-size:4rem;color:#00ff00;text-shadow:0 0 10px lime;pointer-events:none;}.video-and-description-container{display:flex;justify-content:center;align-items:flex-start;gap:20px;width:100%;}.portfolio-item{border:2px solid #00ff00;padding:10px;background:#111;}.portfolio-item video{width:100%;height:auto;}.video-title{color:#00ff00;font-family:'Press Start 2P',sans-serif;text-shadow:0 0 5px lime;margin-top:10px;text-align:center;}.portfolio-item.portfolio-item-small{width:422px;flex-shrink:0;padding:10px;border:2px solid #00ff00;background:#111;}.portfolio-item-small video{width:100%;height:auto;}.portfolio-item{border:2px solid #00ff00;padding:10px;background:#111;width:100%;}.portfolio-entry{display:flex;align-items:center;justify-content:center;gap:20px;}.windows-window{border:2px solid #00ff00;background:#000;box-shadow:5px 5px 0px #00ff00;width:300px;flex-shrink:0;}.title-bar{background:#00ff00;color:#000;padding:5px;font-family:'Press Start 2P',sans-serif;font-size:1rem;}.window-content{padding:15px;font-family:'Courier New',monospace;color:#00ff00;font-size:1rem;line-height:1.5;border-top:2px solid #00ff00;}.discord-text{color:#00ff00;font-family:'Press Start 2P',sans-serif;text-shadow:0 0 5px lime;margin-top:10px;display:flex;flex-direction:column;align-items:center;}.discord-text span{font-size:2rem;line-height:1;transform:rotate(180deg);}.discord-text p{margin-top:10px;font-size:1.5rem;}
@media (min-width:769px){.carousel-title{font-family:'Press Start 2P',sans-serif;}}
@media (max-width:768px){.carousel-title{font-family:'Press Start 2P',sans-serif;font-size:1.5rem}.nav-buttons.back-link a{text-shadow:none;font-size:0.8rem;padding:8px 15px;white-space:nowrap}.logo-image img{width:150px}.nav-buttons a{font-size:1.12rem;padding:10px 21px}}