html, body { margin: 0; padding: 0; background: #0a0a0a; color: #00ff41; font-family: 'Courier New', 'Cascadia Code', monospace; line-height: 1.4; overflow-x: hidden; } body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 2px ); opacity: 0.15; pointer-events: none; animation: staticMove 8s infinite linear; } @keyframes staticMove { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } a { color: #00ff41; text-decoration: none; position: relative; transition: text-shadow 0.2s ease; } a:hover { text-shadow: 0 0 6px #00ff41; animation: link-glitch 0.4s linear infinite; } @keyframes link-glitch { 0% { transform: translate(0, 0); } 20% { transform: translate(-1px, 1px); } 40% { transform: translate(1px, -1px); } 60% { transform: translate(-1px, -1px); } 80% { transform: translate(1px, 1px); } 100% { transform: translate(0, 0); } } h1, h2, h3, h4 { margin: 0 0 0.6em; font-weight: normal; color: #00ff41; position: relative; } h1.glitch, h2.glitch, h3.glitch { animation: headerGlitch 3s infinite; } @keyframes headerGlitch { 0%, 100% { text-shadow: 0 0 0 #00ff41; } 20% { text-shadow: 2px -2px 4px #00ff41; } 50% { text-shadow: -2px 2px 4px #00ff41; } 70% { text-shadow: 1px -1px 3px #00ff41; } } .alt-font { font-family: 'Times New Roman', serif; color: #ff0040; } .sys-log { background: #0a0a0a; border-left: 2px solid #00ff41; padding: 10px 14px; margin: 10px 0; color: #00ff41; font-size: 14px; box-shadow: inset 0 0 10px rgba(0,255,65,0.15); } .infected-alert { background: #5c0000; border-left: 2px solid #ff0040; color: #ff0040; padding: 10px 14px; margin: 10px 0; font-size: 14px; box-shadow: inset 0 0 10px rgba(255,0,64,0.25); animation: infectedPulse 4s infinite; } @keyframes infectedPulse { 0%, 100% { box-shadow: inset 0 0 10px rgba(255,0,64,0.25); } 50% { box-shadow: inset 0 0 20px rgba(255,0,64,0.45); } } .status-tag-root { display: inline-block; padding: 2px 6px; border: 1px solid #00ff41; color: #00ff41; font-size: 12px; text-transform: uppercase; background: linear-gradient( 145deg, rgba(0,255,65,0.05), rgba(0,255,65,0.15) ); } .sys-inline { color: #00ff41; } .nokt-inline { color: #ff0040; } .sys-btn { background: linear-gradient( 145deg, rgba(0,255,65,0.07), rgba(0,255,65,0) ); border: 1px solid #00ff41; color: #00ff41; padding: 6px 10px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 0 4px rgba(0,255,65,0.3), inset 0 0 0 rgba(0,0,0,0); } .sys-btn:hover { background: linear-gradient( 145deg, rgba(0,255,65,0.3), rgba(0,255,65,0.1) ); color: #0a0a0a; box-shadow: 0 0 8px rgba(0,255,65,0.5), inset 0 0 6px rgba(0,255,65,0.2); transform: translateY(-1px) scale(1.02); } .nokt-btn { background: linear-gradient( 145deg, rgba(255,0,64,0.2), rgba(92,0,0,0.1) ); border: 1px solid #ff0040; color: #ff0040; padding: 6px 10px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 0 4px rgba(255,0,64,0.3), inset 0 0 0 rgba(0,0,0,0); } .nokt-btn:hover { background: linear-gradient( 145deg, rgba(255,0,64,0.4), rgba(92,0,0,0.2) ); color: #0a0a0a; box-shadow: 0 0 8px rgba(255,0,64,0.6), inset 0 0 6px rgba(255,0,64,0.2); transform: translateY(-1px) scale(1.02); } .section { padding: 20px; } .sys-block { border: 1px solid #00ff41; padding: 15px; margin-bottom: 20px; background: rgba(0,255,65,0.03); backdrop-filter: blur(2px); } .infected-block { border: 1px solid #ff0040; background: rgba(92, 0, 0, 0.3); padding: 15px; margin-bottom: 20px; color: #ff0040; backdrop-filter: blur(2px); } .glitch { position: relative; color: #ff0040; font-family: 'Times New Roman', serif; animation: glitchFlick 2.4s infinite; } @keyframes glitchFlick { 0%, 100% { text-shadow: 0 0 0px #ff0040; } 20% { text-shadow: 2px -2px 3px #ff0040; } 50% { text-shadow: -2px 2px 3px #ff0040; } 70% { text-shadow: 1px -1px 2px #ff0040; } }