:root {
    --bg-color: rgb(58, 74, 85);
    --about-bg-color: rgba(40, 52, 59, 0.8);
    --text-color: #f0f0f0;
    --font-main: 'Inconsolata', monospace;
}

body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    font-family: var(--font-main) !important;
    margin: 0;
    padding: 0;
}

/* This is your star container style, now global */
#star-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100vh;
    z-index: -1; /* Place it behind all content */
    pointer-events: none; 
}

.star {
    position: absolute;
    background: var(--text-color) !important;
    border-radius: 50%;
    opacity: 0.7;
}

.navbar {
    background-color: var(--bg-color) !important;
    font-family: var(--font-main);
}

/* This styles the "O.G." brand/title */
.navbar .navbar-brand .navbar-title {
    color: var(--text-color);
    font-size: 2rem;
    font-weight: 700;
}

/* This styles the nav links on the right */
.navbar .nav-link {
    color: var(--text-color);
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: text-decoration 0.2s ease;
}

.navbar .nav-link:hover {
    color: var(--text-color);
    text-decoration: underline;
}

/* Style the mobile "hamburger" toggler button */
.navbar-toggler {
    /* Changes the border of the button itself */
    border-color: var(--text-color-faded) !important; 
}

/* Style the "hamburger" icon inside the button */
.navbar-toggler-icon {
    /* This replaces the default dark SVG with one that uses your text color */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(240, 240, 240, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Style the Search icon */
.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon {
    color: var(--text-color);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon:hover {
    opacity: 1;
}

/* Card List Styling */
/* Use the #quarto-content ID to ensure these override Bootstrap */
#listing-recipes-list .quarto-grid-item.card {
    background-color: #2c3841ad !important; 
    border: 1px solid #333 !important;
    border-radius: 8px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Hover effect */
#quarto-content .quarto-grid-item.card:hover {
    transform: translateY(-5px);
    border-color: #637c8e !important; 
}

/* Ensure text is visible on the dark background */
#quarto-content .card-title, 
#quarto-content .card-text, 
#quarto-content .listing-reading-time {
    font-family: 'Inconsolata', monospace !important;
    color: #d8d5d5 !important;
}

/* Style the body area specifically if background is still white */
#quarto-content .card-body {
    background-color: transparent !important;
}