/* Chris Jones Player Card */
.card-content .chrisName{    
    background: linear-gradient(90deg, rgb(255,0,187), rgb(147,15,112));
    -webkit-background-clip: text;        
}

.card-content .chrisNickName{    
    background: linear-gradient(90deg, rgb(255,0,187), rgb(147,15,112));
    -webkit-background-clip: text;        
}

/* Search bar */
    .search-container {
        position: relative;
        width: 300px;
    }

    .search-input {
        width: 100%;
        padding: 10px 15px;
        font-size: 1rem;
        border-radius: 10px;
        border: none;
        outline: none;
        background: var(--card-bg);
        color: var(--text);
    }

    /* Modal popup */
    .search-results {
        position: absolute;
        top: 110%;
        width: 100%;
        max-height: 250px; /* limit height */
        overflow-y: auto;
        background: var(--card-bg);
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
        z-index: 100;
        display: none;
    }

    .search-results.active {
        display: block;
    }

    .search-item {
        padding: 10px 15px;
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: red 0.2s;
    }

    .search-item:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Scrollbar styling */
    .search-results::-webkit-scrollbar {
        width: 8px;
    }

    .search-results::-webkit-scrollbar-thumb {
        background-color: var(--primary);
        border-radius: 4px;
    }

    .search-results::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }

    .project-card img
    {
        width: 10%;
        height: 20%;
    }

    .playerListContainer
    {
        width:30vh;
        position: relative;
        top: 1vh;
    }
    
    #genius-cards{
        margin-bottom: 0vh;
    }

    .tech-dive-grid{
        display: flex;
        justify-content: center;
        align-content: center;
        text-align: center;
    }

    #tech-dive-section, #genius-cards,
    #about, #projects{
        margin: 5vh;
    }

    #genius-cards{
        margin-bottom: 20vh;
    }

   
    .about-container {
        display: grid;
        place-items: 0; /* centers both horizontally + vertically */
        flex-direction: column;
        padding: 4rem 0;
    }



       

    
    @media only screen and (min-width: 769px) and (max-width: 1024px){
        .player-card{
            transform: scale(.8);
            position: relative;
            right: 20vh;
        }

        
    }
        /* Extra small devices (phones, 600px and down) 
    @media only screen and (max-width: 600px) {...}

    /* Small devices (portrait tablets and large phones, 600px and up) 
    @media only screen and (min-width: 600px) {...}

    /* Medium devices (landscape tablets, 768px and up) 
    @media only screen and (min-width: 768px) {...}

    /* Large devices (laptops/desktops, 992px and up) 
    @media only screen and (min-width: 992px) {...}

    /* Extra large devices (large laptops and desktops, 1200px and up) 
    @media only screen and (min-width: 1200px) {...}
    */