
body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow-x: hidden; font-family: 'Roboto', sans-serif; background: linear-gradient(135deg, #1a237e, #42a5f5); color: #ffffff; line-height: 1.6; font-size: 16px; }
header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
header h1 { font-size: 24px; color: #00ff00; text-transform: uppercase; letter-spacing: 2px; margin: 0; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
nav ul li a { color: #ffffff; text-decoration: none; font-size: 16px; transition: all 0.3s ease; position: relative; }
nav ul li a:hover { color: #00ff00; }
nav ul li a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: #00ff00; transform: scaleX(0); transition: transform 0.3s ease; }
nav ul li a:hover::after { transform: scaleX(1); }
main { padding-top: 80px; min-height: calc(100vh - 80px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
section { width: 90%; max-width: 1200px; margin: 20px auto; padding: 20px; background: rgba(0, 0, 0, 0.6); border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
h2 { font-size: 28px; margin-bottom: 20px; color: #ffeb3b; text-shadow: 0 0 10px #00ff00; }
p { font-size: 18px; line-height: 1.8; margin-bottom: 20px; }
pre { background: #1a237e; padding: 15px; border-radius: 5px; overflow-x: auto; font-size: 14px; color: #00ff00; }
button { background: #00ff00; color: #000000; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; transition: all 0.3s ease; position: relative; overflow: hidden; }
button:hover { background: #00cc00; }
button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); transform: scale(0); transition: transform 0.3s ease; }
button:hover::before { transform: scale(1); }
footer { background: rgba(0, 0, 0, 0.8); color: #ffffff; text-align: center; padding: 20px; margin-top: auto; }
@media (max-width: 768px) { nav ul { flex-direction: column; gap: 10px; } section { padding: 15px; } }
canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }

