/* ===================== RESET ===================== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-dark: #0b0b0b; --panel-dark: #121212; --accent: #00ff66; --text-main: #cfcfcf; --text-muted: #9a9a9a; --border-dark: #1f1f1f; } body { font-family: monospace; background-size: cover; background-position: center; background-attachment: fixed; background-color: var(--bg-dark); color: var(--text-main); animation: fadeIn 1.2s ease forwards; } .header { background: rgba(10, 10, 10, 0.9); padding: 16px; text-align: center; border-bottom: 1px solid var(--border-dark); } .nav a { color: var(--text-muted); text-decoration: none; margin: 0 14px; font-weight: bold; letter-spacing: 1px; transition: color 0.25s ease, text-shadow 0.25s ease; } .nav a:hover { color: var(--accent); text-shadow: 0 0 6px rgba(0, 255, 102, 0.6); } .hero { text-align: center; padding: 120px 20px 90px; background: linear-gradient( rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.92) ); } .hero-logo { width: 520px; max-width: 90%; margin-bottom: 35px; animation: floatIn 1.4s ease forwards; image-rendering: pixelated; filter: drop-shadow(0 0 18px rgba(0, 255, 102, 0.15)); } .hero h1 { font-size: 58px; color: var(--accent); margin-bottom: 10px; letter-spacing: 4px; animation: slideUp 1s ease forwards; } .subtitle { font-size: 20px; color: var(--text-muted); margin-bottom: 26px; animation: slideUp 1.2s ease forwards; } .ip-box { margin-top: 12px; padding: 16px 34px; border: 2px solid var(--accent); display: inline-block; font-size: 20px; color: var(--accent); letter-spacing: 1px; animation: glowPulse 2.5s infinite ease-in-out; } .carousel { display: flex; gap: 14px; padding: 26px; background: var(--panel-dark); justify-content: center; border-top: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark); } .carousel img { width: 100%; max-width: 30%; border: 2px solid var(--border-dark); transition: transform 0.35s ease, box-shadow 0.35s ease; } .carousel img:hover { transform: scale(1.04); box-shadow: 0 0 20px rgba(0, 255, 102, 0.2); } .content { padding: 60px 20px; background: var(--bg-dark); } .post { max-width: 820px; margin: 0 auto 36px; padding: 26px; background: var(--panel-dark); border-left: 4px solid var(--accent); animation: fadeInUp 1s ease forwards; } .post h2 { color: var(--accent); margin-bottom: 12px; letter-spacing: 1px; } .post p { color: var(--text-main); line-height: 1.7; } .footer { background: #000; color: var(--text-muted); text-align: center; padding: 22px; font-size: 12px; border-top: 1px solid var(--border-dark); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(25px); } to  { opacity: 1; transform: translateY(0); } } @keyframes floatIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes glowPulse { 0% { box-shadow: 0 0 6px rgba(0, 255, 102, 0.3); } 50% { box-shadow: 0 0 18px rgba(0, 255, 102, 0.7); } 100% { box-shadow: 0 0 6px rgba(0, 255, 102, 0.3); } }