@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

:root {
    --bg: #282828;
    --fg: #ebdbb2;
    --red: #fb4934;
    --yellow: #fabd2f;
    --green: #b8bb26;
    --tan: #d5c4a1;
    --border: #7c6f64;
}

body.light-mode {
    --bg: #fbf1c7;
    --fg: #3c3836;
}

* { font-family: 'Fira Code' !important;}

body {
    background-color: var(--bg);
    color: var(--fg);
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.5;
}

/* Header & Red Box */
.header-top { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 20px; }
.github-link { position: absolute; left: 0; color: var(--fg); }



/* The "Random Article" section styling */
#random-article-container {
    margin-top: 25px;
}

.random-snippet .article-title {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.random-snippet .article-title a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.random-snippet .article-excerpt {
    color: var(--text-color);
    font-size: 1.1rem;
    margin-top: 15px;
    line-height: 1.4;
}

/* Big Navigation Buttons from your screenshot */
.button-grid {
    display: flex;
    gap: 20px;
    margin: 40px 0;
}

.big-button {
    background-color: #d5c4a1; /* Gruvbox Tan */
    color: #282828;            /* Dark background text */
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.8rem;
    border-radius: 8px;
    font-weight: bold;
}

.big-button:hover {
    background-color: #ebdbb2;
}