body {

font-family: Arial, sans-serif;

margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
background-color:black;
color: #7CFC00;
}
/* Update CSS for filter buttons */
.filter-buttons {
text-align: center; /* Center-align the buttons */
margin: 20px 0; /* Add some margin for spacing */
}

.filter-button {
cursor: pointer;
margin: 0 10px; /* Add margin between buttons */
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #000; /* Black background color */
color: #00ff00; /* Green text color */
transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

/* Hover effect: Change button background to green and text to black on hover */
.filter-button:hover {
background-color: #00ff00; /* Green background color on hover */
color: #000; /* Black text color on hover */
}

h1 {
color: white;
margin-left: 20px;
}

/* For arranging the programms in grids*/

.skills-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns */
gap: 16px;
}

.skill-item {
display: flex;
flex-direction: column; /* stack children vertically */
align-items: center; /* center the items */
text-align: center; /* center the text */
}