:root {
    --bg-color: #0a0a0a;
    --grid-item-bg: #111;
    --grid-item-border: #222;
    --glow-color: rgba(255, 255, 255, 0.1);
    --text-color: #eee;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.container {
    text-align: center;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

h1 {
    font-weight: 500;
    margin-bottom: 3rem;
    font-size: 1.5rem;
    color: #ccc;
    letter-spacing: 0.5px;
}

.grid-container {
    display: grid;
    /* grid-template-columns set by JS */
    gap: 12px;
    padding: 0;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.grid-item {
    aspect-ratio: 1;
    background-color: var(--grid-item-bg);
    border: 1px solid var(--grid-item-border);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.grid-item svg {
    width: 50%;
    height: 50%;
    opacity: 0.7;
    transition: all 0.3s ease;
    filter: grayscale(100%);
}

.grid-item .icon {
    width: 50%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    /* size for font icons */
    opacity: 0.7;
    /* muted (mono) at rest so images & icon elements start grey */
    filter: grayscale(100%);
    transition: all 0.3s ease;
    color: #ddd;
    /* neutral/grayscale look until hover */
    text-align: center;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Vite external image: muted (grayscale) at rest, full-color on hover */
.grid-item.vite .icon,
.grid-item.vite .vite-img {
    /* muted / monochrome at rest so it matches other icons */
    filter: grayscale(100%) brightness(0.95) contrast(0.9);
    opacity: 0.7;
    width: 53%;
    height: auto;
    display: block;
    /* ensure proper layout */
    margin: 0 auto;
    /* center */
    transition: filter 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* Restore the full gradient + yellow bolt on hover */
.grid-item:hover .vite-img,
.grid-item:hover .icon.vite-img,
.grid-item.vite:hover .icon,
.grid-item.vite:hover .vite-img {
    filter: none;
    opacity: 1;
}

.grid-item.empty {
    opacity: 0.3;
    border-color: #1a1a1a;
}

.grid-item:hover {
    background-color: #1a1a1a;
    border-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.grid-item:hover .icon {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure external logos images match icon behavior */
.grid-item .logos-img {
    display: block;
    width: 50%;
    height: auto;
    margin: 0 auto;
    transition: filter 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* Make MongoDB icon a little smaller so it sits nicely in the square */
.grid-item.mongo .logos-img,
.grid-item.mongo .icon {
    width: 28%;
}

/* Make Figma a touch smaller so it sits slightly more balanced in the square */
.grid-item.figma .logos-img,
.grid-item.figma .icon {
    width: 35%;
}

/* Special case for Next: logo is black by default so we lighten it at rest so it appears muted
   and return to the black mark on hover (keeps the same transition/scale behavior) */
.grid-item.next .icon,
.grid-item.next .logos-img {
    filter: grayscale(100%) brightness(1.8) contrast(0.9);
    opacity: 0.6;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.grid-item.next:hover .icon,
.grid-item.next:hover .logos-img {
    filter: none;
    opacity: 1;
}

/* ----------------------------------------------------------------- */
/* GITHUB: Match other icons style                                   */
/* ----------------------------------------------------------------- */

.grid-item.github .logos-img {
    /* Muted at rest */
    filter: grayscale(100%) brightness(0.95) contrast(0.9);
    opacity: 0.7;
    width: 48%;
    display: block;
    margin: 0 auto;
    transition: filter 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* Full color on hover - invert to make white cat on black circle */
.grid-item.github:hover .logos-img {
    filter: invert(1);
    opacity: 1;
    transform: scale(1.1);
}

.grid-item.gitlab .logos-img {
    width: 45%;
}

/* Specific Glow Colors */
.vite:hover {
    box-shadow: 0 0 20px rgba(189, 52, 254, 0.3);
    border-color: rgba(189, 52, 254, 0.5);
}

.react:hover {
    box-shadow: 0 0 20px rgba(97, 218, 251, 0.3);
    border-color: rgba(97, 218, 251, 0.5);
}

.angular:hover {
    box-shadow: 0 0 20px rgba(221, 0, 49, 0.3);
    border-color: rgba(221, 0, 49, 0.5);
}

.vue:hover {
    box-shadow: 0 0 20px rgba(65, 184, 131, 0.3);
    border-color: rgba(65, 184, 131, 0.5);
}

.solid:hover {
    box-shadow: 0 0 20px rgba(68, 107, 158, 0.3);
    border-color: rgba(68, 107, 158, 0.5);
}

.svelte:hover {
    box-shadow: 0 0 20px rgba(255, 62, 0, 0.3);
    border-color: rgba(255, 62, 0, 0.5);
}

.qwik:hover {
    box-shadow: 0 0 20px rgba(172, 126, 244, 0.3);
    border-color: rgba(172, 126, 244, 0.5);
}

.astro:hover {
    box-shadow: 0 0 20px rgba(255, 93, 1, 0.3);
    border-color: rgba(255, 93, 1, 0.5);
}

.remix:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.nuxt:hover {
    box-shadow: 0 0 20px rgba(0, 197, 142, 0.3);
    border-color: rgba(0, 197, 142, 0.5);
}

.next:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.gatsby:hover {
    box-shadow: 0 0 20px rgba(102, 51, 153, 0.3);
    border-color: rgba(102, 51, 153, 0.5);
}

/* New icon hover glow colors (keeps the same style) */
.html:hover {
    box-shadow: 0 0 20px rgba(228, 79, 38, 0.25);
    border-color: rgba(228, 79, 38, 0.45);
}

.css:hover {
    box-shadow: 0 0 20px rgba(41, 109, 241, 0.25);
    border-color: rgba(41, 109, 241, 0.45);
}

.javascript:hover {
    box-shadow: 0 0 20px rgba(247, 223, 30, 0.25);
    border-color: rgba(247, 223, 30, 0.35);
}

.typescript:hover {
    box-shadow: 0 0 20px rgba(0, 122, 204, 0.25);
    border-color: rgba(0, 122, 204, 0.45);
}

.next:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
    border-color: rgba(0, 0, 0, 0.55);
}

.node:hover {
    box-shadow: 0 0 20px rgba(60, 135, 58, 0.25);
    border-color: rgba(60, 135, 58, 0.45);
}

.npm:hover {
    box-shadow: 0 0 20px rgba(197, 49, 41, 0.25);
    border-color: rgba(197, 49, 41, 0.45);
}

.mongo:hover {
    box-shadow: 0 0 20px rgba(63, 160, 55, 0.25);
    border-color: rgba(63, 160, 55, 0.45);
}

.postgres:hover {
    box-shadow: 0 0 20px rgba(49, 100, 138, 0.25);
    border-color: rgba(49, 100, 138, 0.45);
}

.docker:hover {
    box-shadow: 0 0 20px rgba(13, 183, 237, 0.25);
    border-color: rgba(13, 183, 237, 0.45);
}

.figma:hover {
    box-shadow: 0 0 20px rgba(162, 89, 255, 0.18);
    border-color: rgba(162, 89, 255, 0.32);
}

.git:hover {
    box-shadow: 0 0 20px rgba(240, 79, 35, 0.25);
    border-color: rgba(240, 79, 35, 0.45);
}

/* Updated GitHub Hover Glow: White glow (since black shadow on black bg is invisible) */
.github:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.gitlab:hover {
    box-shadow: 0 0 20px rgba(252, 109, 38, 0.25);
    border-color: rgba(252, 109, 38, 0.45);
}

.terminal:hover {
    box-shadow: 0 0 20px rgba(139, 233, 253, 0.18);
    border-color: rgba(139, 233, 253, 0.32);
}

.mysql:hover {
    box-shadow: 0 0 20px rgba(0, 117, 143, 0.22);
    border-color: rgba(0, 117, 143, 0.4);
}

/* Color the icon on hover to match brand color */
.html:hover .icon {
    color: #e44f26;
}

.css:hover .icon {
    color: #2965f1;
}

.javascript:hover .icon {
    color: #f7df1e;
}

.typescript:hover .icon {
    color: #007acc;
}

.react:hover .icon {
    color: #61dafb;
}

.next:hover .icon {
    color: #000;
}

.node:hover .icon {
    color: #3C873A;
}

.npm:hover .icon {
    color: #c53129;
}

.mongo:hover .icon {
    color: #47A248;
}

.postgres:hover .icon {
    color: #336791;
}

.docker:hover .icon {
    color: #0db7ed;
}

.figma:hover .icon {
    color: #F24E1E;
}

.git:hover .icon {
    color: #f04f23;
}

.github:hover .icon {
    color: #ffffff;
}

/* CHANGED: Force White on hover */
.gitlab:hover .icon {
    color: #fc6d26;
}

.terminal:hover .icon {
    color: #8be9fd;
}

.vite:hover .icon {
    color: #646cff;
}

.mysql:hover .icon {
    color: #00758f;
}