/* ===== BASE STYLES: FOREST THEME ===== */
body {
    background-color: #0a1a0a; /* Deep forest green-black */
    color: #e8e8d0; /* Soft moonlight */
    font-family: "Courier New", monospace;
    margin: 0;
    padding: 20px;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%230a1a0a"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%231a2a1a" stroke-width="0.5" opacity="0.3"/></svg>');
    /* Subtle crosshatch texture for a forest feel */
}

/* Text and links */
a {
    color: #2e8b57; /* Sea green (moss/leaves) */
    text-decoration: none;
}
a:hover {
    color: #8b7d6b; /* Muted brown-gold */
    text-decoration: underline;
}
h1, h2, h3 {
    color: #8b7d6b; /* Tree bark/aged parchment */
}
h1 {
    font-size: 2em;
    text-align: center;
    border-bottom: 1px dashed #3a3a2a; /* Olive green border */
    padding-bottom: 10px;
    margin-bottom: 10px;
}
h2 {
    border-bottom: 1px dashed #3a3a2a;
    padding-bottom: 5px;
    margin-top: 20px;
}
h3 {
    color: #2e8b57; /* Sea green for emphasis */
    margin-top: 15px;
}

/* Blinking cursor (like a campfire) */
.blink {
    animation: blink 1.5s infinite;
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

/* Tagline */
.tagline {
    text-align: center;
    font-style: italic;
    color: #888;
    margin-bottom: 20px;
}

/* Navigation: Twig-like borders */
nav {
    text-align: center;
    margin: 15px 0;
    padding: 10px;
    background-color: #1a2a1a; /* Forest layer */
    border: 1px solid #3a3a2a; /* Olive green */
}
nav a {
    margin: 0 10px;
    padding: 5px 10px;
}

/* Sections: Like pages in a journal */
.section {
    background-color: #1a2a1a;
    border: 1px solid #3a3a2a;
    padding: 15px;
    margin: 15px 0;
}

/* Footer: Trail marker */
footer {
    text-align: center;
    margin-top: 30px;
    color: #888;
    font-size: 0.9em;
}
footer hr {
    border: none;
    border-top: 1px solid #3a3a2a;
    margin: 10px 0;
}

/* ===== MOBILE-FRIENDLY STYLES ===== */
@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    nav a {
        display: block;
        margin: 5px 0;
    }
    .section {
        padding: 10px;
    }
}