/* RESET & BASE */
:root {
    --bg-color: #f0f0f0;
    --card-bg: #ffffff;
    --text-color: #000000;
    --border-color: #000000;
    --link-color: #0000EE; /* Classic HTML Blue */
    --accent: #ffffcc; /* Post-it yellow */
    --spacing: 1.5rem;
}

body {
    background-color: var(--bg-color);
    /* 90s quirk: A subtle dot pattern via CSS */
    background-image: radial-gradient(#aaa 1px, transparent 1px);
    background-size: 20px 20px;
    font-family: "Courier New", Courier, monospace;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* LAYOUT CONTAINER */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* NAVIGATION */
nav {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    padding: 10px;
    margin-bottom: var(--spacing);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 4px 4px 0px var(--border-color);
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    display: inline-block;
    margin-left: 15px;
}

nav a {
    text-decoration: none;
    font-weight: bold;
    color: var(--text-color);
    text-transform: uppercase;
}

nav a:hover {
    background-color: var(--text-color);
    color: var(--card-bg);
}

/* HEADER & MARQUEE */
header {
    margin-bottom: var(--spacing);
    text-align: center;
}


.marquee-container {
    /* Ensure existing styles are compatible */
    overflow: hidden; 
    text-align: center; /* This forces the text to center when it stops */
    white-space: nowrap;
    position: relative;
}

.retro-slide {
    display: inline-block;
    /* Start completely off-screen to the right */
    transform: translateX(100vw); 
    /* Animate for 3 seconds, ease-out makes it slow down as it stops */
    animation: slide-center 3s ease-out forwards; 
}

/* The Animation Keyframes */
@keyframes slide-center {
    from {
        transform: translateX(100vw); /* Start far right */
    }
    to {
        transform: translateX(0); /* End at natural position (Center) */
    }
}

/* CONTENT FEED */
article {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    padding: var(--spacing);
    margin-bottom: var(--spacing);
    /* The 90s "Drop Shadow" */
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2); 
}

h1.site-title {
    font-size: 2.5rem;
    margin: 0;
    text-shadow: 2px 2px 0px #aaa;
}

h2.post-title a {
    text-decoration: none;
    color: var(--text-color);
}

h2.post-title a:hover {
    text-decoration: underline;
    color: var(--link-color);
}

/* META DATA (Date, etc) */
.meta {
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 0.8rem;
    color: #555;
    background-color: var(--accent); /* Highlight vibe */
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid var(--border-color);
}

/* IMAGES */
img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border-color);
    display: block;
    margin: 10px 0;
}

/* FOOTER */
footer {
    text-align: center;
    padding: 40px 0;
    font-size: 0.8rem;
    border-top: 2px solid var(--border-color);
    background: var(--card-bg);
    margin-top: 40px;
}


/* RETRO COUNTER STYLES */
.counter-wrapper {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.retro-counter {
    background-color: #000; /* Black background like old counters */
    color: #00FF00;         /* Neon Green text (or try Red #FF0000) */
    font-family: "Courier New", monospace;
    font-size: 1.5rem;
    padding: 5px 10px;
    border: 4px inset #666; /* The "inset" border creates the 3D depth */
    letter-spacing: 8px;    /* Space out the numbers */
    text-shadow: 0 0 5px #00FF00; /* Subtle neon glow */
    display: inline-block;
}

.tiny-text {
    font-size: 0.7rem;
    opacity: 0.6;
}