/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
    --bg-color: #0d0d0d;
    --text-color: #e0e0e0;
    --accent-color: #39FF14;
    --dim-green: #1a5c1a;
    --code-font: 'Courier New', Courier, monospace;
    --body-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--body-font);
    line-height: 1.6;
    margin: 0;
    padding: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

h1, h2, h3 {
    font-family: var(--code-font);
    text-transform: uppercase;
    letter-spacing: -1px;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
    margin-top: 2rem;
    color: var(--accent-color);
}

/* Smaller H1 for Contact/Logs pages */
body.contact-page h1, 
body.logs-page h1, 
body.progress-page h1 {
    font-size: 2rem;
}

p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.highlight {
    background-color: var(--accent-color);
    color: var(--bg-color);
    padding: 0 4px;
    font-weight: bold;
    box-shadow: 0 0 5px var(--accent-color);
    display: inline-block;
}

.manifesto-box {
    border: 1px dashed var(--accent-color);
    padding: 1.5rem;
    margin: 2rem 0;
    background: #111;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.1);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-color);
    transition: all 0.2s ease;
}

a:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
    box-shadow: 0 0 10px var(--accent-color);
}

footer {
    margin-top: 4rem;
    font-family: var(--code-font);
    font-size: 0.8rem;
    opacity: 0.7;
    border-top: 1px solid var(--dim-green);
    padding-top: 1rem;
    color: var(--accent-color);
}

/* Glitch effect on hover for the title */
h1:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: #fff;
    text-shadow: 2px 0 var(--accent-color), -2px 0 #ff00ff;
}

@keyframes glitch {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}

/* Rare mystical glow animation */
@keyframes mystic-glow {
    0% { 
        text-shadow: 0 0 10px #7b2cbf, 0 0 20px #7b2cbf, 0 0 30px #7b2cbf;
    }
    50% { 
        text-shadow: 0 0 20px #ffffff, 0 0 40px #ffffff, 0 0 60px #ffffff;
    }
    100% { 
        text-shadow: 0 0 10px #7b2cbf, 0 0 20px #7b2cbf, 0 0 30px #7b2cbf;
    }
}

/* Applied when the glow is active */
h1.glowing {
    animation: mystic-glow 4s ease-in-out;

/* --- LOG PAGE SPECIFIC STYLES --- */
.log-feed {
    margin-top: 2rem;
}

.log-entry {
    border-left: 3px solid var(--dim-green);
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    background: #111;
    position: relative;
}

.log-entry::before {
    content: ">";
    position: absolute;
    top: -10px;
    left: 10px;
    background: var(--bg-color);
    color: var(--accent-color);
    font-family: var(--code-font);
    padding: 0 5px;
    font-size: 1.2rem;
}

.log-title {
    font-family: var(--code-font);
    color: var(--accent-color);
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    border-bottom: none;
}

.log-date {
    font-family: var(--code-font);
    color: var(--dim-green);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    display: block;
}

.back-link {
    display: inline-block;
    margin-top: 2rem;
    font-family: var(--code-font);
    font-size: 0.9rem;
    border: 1px solid var(--dim-green);
    padding: 5px 10px;
}

/* --- HOME PAGE LIST STYLES --- */
.latest-logs-list {
    list-style-type: none;
    padding-left: 0;
}

.latest-logs-list li {
    border-bottom: 1px dashed var(--dim-green);
    padding: 0.5rem 0;
}

.latest-logs-list li:last-child {
    border-bottom: none;
}

.latest-logs-list a:hover {
    background-color: rgba(57, 255, 20, 0.1);
    padding-left: 5px;
}
/* PATH HEADER STYLING */
.current-path {
    color: var(--accent-color);
    text-shadow: 0 0 10px var(--accent-color);
}

/* Make H2 look like page titles */
main h2 {
    font-family: var(--code-font);
    color: var(--accent-color);
    border-bottom: 2px solid var(--dim-green);
    padding-bottom: 0.5rem;
    margin-top: 1rem;
}
/* CRT SCANLINE OVERLAY */
.crt-overlay {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
}