@import url('https://fonts.googleapis.com/css2?family=Space+Mono&family=Roboto&display=swap');
body {font-family: 'Roboto', sans-serif;background-color: #000;color: #fff;margin: 0;padding: 0;overflow-x: hidden;}
h1, h2, h3 {font-family: 'Space Mono', monospace;}
.container {display: grid;grid-template-columns: repeat(auto - fit, minmax(300px, 1fr));gap: 20px;padding: 20px;box - sizing: border - box;}
.header {position: fixed;top: 0;left: 0;width: 100%;background: linear - gradient(to right, #ff4d00, #000);padding: 10px 20px;z - index: 1000;display: flex;justify - content: space - between;align - items: center;}
.nav - btn {background: none;border: none;color: #fff;font - size: 24px;cursor: pointer;}
.sidebar {position: fixed;top: 60px;left: - 300px;width: 300px;height: calc(100 % - 60px);background: #111;transition: left 0.3s ease;}
.sidebar.open {left: 0;}
.content {margin - top: 80px;}
.button {background: #ff4d00;color: #fff;padding: 10px 20px;border: none;border - radius: 5px;cursor: pointer;transition: all 0.3s ease;}
.button:hover {animation: neon - glow 1s infinite alternate;}
@keyframes neon - glow {from {box - shadow: 0 0 10px #ff4d00, 0 0 20px #ff4d00, 0 0 30px #ff4d00;}to {box - shadow: 0 0 20px #ff4d00, 0 0 40px #ff4d00, 0 0 60px #ff4d00;}}
.star - particles {position: absolute;top: 0;left: 0;width: 100 % ;height: 100 % ;pointer - events: none;}
.grid - system {display: grid;grid - template - columns: repeat(3, 1fr);gap: 20px;}
@media (max - width: 768px) {.container {grid - template - columns: 1fr;}}
.footer {text - align: center;padding: 20px;background: #111;margin - top: 20px;}
img {width: 100 % ;height: auto;object - fit: cover;}
.article {background: rgba(0, 0, 0, 0.8);padding: 20px;border - radius: 10px;box - shadow: 0 0 20px #ff4d00;}
pre {background: #222;color: #fff;padding: 10px;border - radius: 5px;}
canvas {position: absolute;top: 0;left: 0;z - index: - 1;}