:root{
    --bg: #0d0208;
    --pink: #ff00bd;
    --green: #39ff14;
    --text: #f0f0f0;
}
body{ 
    background-color:var(--bg); /*background color*/

    background-image: linear-gradient(rgba(13, 2, 8, 0.9), rgba(13, 2, 8, 0.9)),
    url('../Assets/bunnyhead.png');

    background-repeat:repeat; /*this will tile the bunny head asset */
    background-size: 80px; /*size of the bunny head*/
    background-attachment: fixed; /*makes sure the heads stay in place */

    color:var(--text); /* Light text color */
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 20px;
}

h1{
    font-family:'Rubik Spray Paint', system-ui;
    color: #df64be
}


main {
    max-width: 900px; 
    margin: 0 auto;   
    padding: 40px 20px;
}


.skill-tag {
    color: #39ff14; 
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid #39ff14;
    padding: 4px 10px;
    font-size: 0.8rem;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 10px;
}
.logo{
    font-family: 'Rubik Spray Paint', cursive;
    color: #ff00bd; /* Base Pink */
    cursor: pointer;
    transition: all 0.3s ease; /* Makes the glow fade in smoothly */
}

.logo:hover {
    color: #39ff14; /* Swaps to Green on hover */
    text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14; /* Adds the neon glow */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
    gap: 20px; /* Space between the boxes */
    margin-top: 20px;
}

.project-card {
    background: #1a1a1a;
    border: 1px solid #ff00ff; /* That neon pink/purple vibe */
    padding: 15px;
    text-decoration: none; /* Removes the blue underline from links */
    color: white;
    transition: transform 0.3s;
}

.project-card:hover {
    transform: scale(1.05); /* Makes it pop when you hover over it */
    box-shadow: 0 0 15px #ff00ff;
}

/* This targets the 'parent' container */
.grid-container {
    display: grid;
    /* This creates 3 equal columns that take up 1 fraction of space each */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; /* This creates the gutters/spacing between your boxes */
    padding: 20px 0;
}

/* This styles the individual project cards */
.project-card {
    background-color: #1a1a1a;
    border: 2px solid #ff00ff; /* Neon border to match your vibe */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none; /* Keeps the link from turning blue/underlined */
    color: white;
    transition: 0.3s; /* Makes the hover effect smooth */
}

/* This makes the card 'pop' when you mouse over it */
.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(255, 0, 255, 0.4);
}