:root {
    --bg: #121212;
    --text: #e0e0e0;
    --accent: #00CC00;
    --nav-bg: #1a1a1a;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, sans-serif;
    margin: 0;
}

/* Nav Styles */
nav { background: var(--nav-bg); padding: 1rem 0; border-bottom: 1px solid #333; position: sticky; top: 0; z-index: 1000; }
.nav-content { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; }
.logo { margin-right: 0px;font-weight: bold; color: var(--accent); text-decoration: none; }
nav ul { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }
nav a { color: var(--text); text-decoration: none; font-size: 0.9rem; }

/* Grid Styles */
.wrapper { max-width: 1100px; margin: 0 auto; padding: 2rem; }
/* Update the grid in styleNew.css */
.grid {
    display: grid;
    /* We're dropping the min-width to 100px so 2-3 cards fit on any phone */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    gap: 1rem; /* Tighter gap for mobile */
    margin-top: 1.5rem;
}

/* Make sure images stay inside the cards */
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Adjust text size for small screens */
@media (max-width: 480px) {
    .card-title {
        font-size: 0.8rem;
        margin-top: 0.5rem;
    }
    
    .badge {
        font-size: 0.5rem;
        padding: 2px 5px;
        top: 5px;
        right: 5px;
    }

    .wrapper {
        padding: 10px; /* Less wasted space on the sides */
    }
}
.card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.card-image { position: relative; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; background: #1a1a1a; transition: transform 0.2s; }
.card:hover .card-image { transform: translateY(-5px); }
.card-image img { width: 100%; height: 100%; object-fit: cover; }
.card-title { margin-top: 0.8rem; font-size: 0.9rem; font-weight: 500; }