/* ==== MATRIX STYLE MENU BAR ==== */
body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #0f0;
    font-family: 'Courier New', monospace;
    overflow-x: hidden;
    min-height: 100vh;
}
canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
/* Navigation Menu */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #0f0;
    box-shadow: 0 0 15px #0f0;
    z-index: 100;
    padding: 10px 0;
    text-align: center;
}
nav a {
    color: #0f0;
    text-decoration: none;
    margin: 0 20px;
    font-size: 1.2em;
    text-shadow: 0 0 8px #0f0;
    transition: all 0.3s;
}
nav a:hover {
    color: #0ff;
    text-shadow: 0 0 15px #0ff;
    letter-spacing: 2px;
}
.container {
    max-width: 800px;
    margin: 100px auto 40px; /* Platz für fixed nav */
    padding: 30px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #0f0;
    box-shadow: 0 0 25px #0f0;
    text-align: center;
}
h1 {
    font-size: 3em;
    text-shadow: 0 0 10px #0f0;
    animation: glitch 2.5s infinite;
    margin-top: 0;
}
@keyframes glitch {
    0% { text-shadow: 0 0 10px #0f0; }
    2% { text-shadow: 5px 0 10px #f00, -5px 0 10px #0ff; }
    4% { text-shadow: none; }
    100% { text-shadow: 0 0 10px #0f0; }
}
form {
    margin: 30px 0;
}
input, textarea {
    background: #000;
    color: #0f0;
    border: 1px solid #0f0;
    padding: 10px;
    width: 80%;
    margin: 10px 0;
    font-family: inherit;
}
button {
    background: #000;
    color: #0f0;
    border: 1px solid #0f0;
    padding: 10px 25px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.1em;
}
button:hover {
    background: #0f0;
    color: #000;
    box-shadow: 0 0 20px #0f0;
}
.entries {
    text-align: left;
    margin-top: 50px;
}
.entry {
    border-bottom: 1px dashed #0f0;
    padding: 15px 0;
    opacity: 0;
    animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
    to { opacity: 1; }
}
.entry strong {
    color: #0ff;
}
footer {
    margin-top: 60px;
    font-size: 0.9em;
    opacity: 0.7;
}

/* Optional: Glow for */
h1, h2, h3 {
    text-shadow: 0 0 20px #00ff41;
}

/* Divider in Matrix-Style */
.glow-separator {
    width: 60%;                     /* Or 100% for full width */
    max-width: 800px;               /* Limits the length on big screens */
    height: 1px;                    /* Thickness of hr */
    background: #00ff41;          /* Basic Green */
    margin: 40px auto;              /* above-below centered */
    border-radius: 2px;
    
    /* Mega Glow Effect */
    box-shadow: 
        0 0 10px #00ff41,
        0 0 20px #00ff41,
        0 0 40px #00ff41,
        0 0 80px rgba(0, 255, 65, 0.6);
    
    /* Optional: Light Puls Effect */
    animation: pulse-glow 4s infinite alternate;
}

@keyframes pulse-glow {
    from {
        box-shadow: 
            0 0 10px #00ff41,
            0 0 20px #00ff41,
            0 0 40px #00ff41,
            0 0 60px rgba(0, 255, 65, 0.4);
    }
    to {
        box-shadow: 
            0 0 15px #00ff41,
            0 0 30px #00ff41,
            0 0 60px #00ff41,
            0 0 100px rgba(0, 255, 65, 0.8);
    }
}

.visitor-counter {
    text-align: center;
    margin: 60px 0 20px;
    font-family: 'Courier New', monospace;
    color: #00ff41;
    text-shadow: 0 0 10px #00ff41;
    font-size: 18px;
    opacity: 0.9;
}

.counter-digits {
    font-size: 36px;
    letter-spacing: 8px;
    margin-top: 10px;
    color: #00ff41;
    text-shadow: 
        0 0 10px #00ff41,
        0 0 20px #00ff41,
        0 0 30px #00ff41;
    animation: flicker 4s infinite alternate;
}

@keyframes flicker {
    0%, 100% { opacity: 0.9; text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41; }
    50% { opacity: 1; text-shadow: 0 0 20px #00ff41, 0 0 40px #00ff41, 0 0 60px #00ff41; }
}

hr.gradient {
    height: 1px;
    border: none;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 255, 65, 0.3) 20%,
        #00ff41 50%,
        rgba(0, 255, 65, 0.3) 80%,
        transparent 100%
    );
    box-shadow: 0 0 8px #00ff41, 0 0 16px rgba(0, 255, 65, 0.6);
    margin: 40px auto;
    width: 60%;
    max-width: 800px;
    animation: pulse-hr 6s infinite alternate ease-in-out;
}

@keyframes pulse-hr {
    from {
        box-shadow: 0 0 6px #00ff41, 0 0 12px rgba(0, 255, 65, 0.5);
    }
    to {
        box-shadow: 0 0 10px #00ff41, 0 0 20px rgba(0, 255, 65, 0.8);
    }
}