/* Monokai Variable Definitions */
:root {
    --bg: #272822;
    --text: #F8F8F2;
    --accent: #A6E22E; /* Green */
    --header: #F92672; /* Pink */
    --link: #66D9EF;   /* Blue */
    --orange: #FD971F;
    --purple: #AE81FF;
}

/* Future Light Theme (to be toggled via JS) */
[data-theme="light"] {
    --bg: #F8F8F2;
    --text: #272822;
    --accent: #75715E;
    --header: #D33682;
    --link: #0077AA;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Ubuntu Mono', monospace;
    line-height: 1.5;
    margin: 0 auto;
    padding: 20px;
    max-width: 900px; /* Responsive limit */
    transition: background-color 0.3s, color 0.3s;
}

pre {
    color: var(--orange);
    font-size: 0.8rem;
    overflow-x: auto; /* Keeps ASCII art from breaking layout on small screens */
    white-space: pre-wrap;
}

h1, h2, h3, h4 {
    color: var(--header);
    border-bottom: 1px solid var(--accent);
    display: inline-block;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: var(--accent);
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Responsive wrap */
}

.bold { color: var(--accent); font-weight: bold; }
.center { text-align: center; }

/* Small Screen Adjustments */
@media (max-width: 600px) {
    body { padding: 10px; }
    pre { font-size: 0.5rem; }
}

#mastodon-feed::after {
    content: " _";
    animation: blink 1s step-end infinite;
    color: var(--accent);
}

@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}