/* Scrollbar styles */
.navigation::-webkit-scrollbar {
    width: 1px; /* Width of the scrollbar */
}

.navigation::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0); /* Transparent background for scrollbar track */
}

.navigation::-webkit-scrollbar-thumb {
    background-color: #00f6ff; /* Neon blue scrollbar color */
    border-radius: 10px; /* Rounded scrollbar */
    border: 2px solid rgba(0, 0, 0, 0); /* Transparent border to add space around the thumb */
}

.navigation::-webkit-scrollbar-thumb:hover {
    background-color: #00d4ff; /* Brighter neon blue on hover */
}

/* Scrollbar styles */
body::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

body::-webkit-scrollbar-track {
    background-color: #100914;
}

body::-webkit-scrollbar-thumb {
    background-color: #00f6ff; /* Neon blue scrollbar color */
    border-radius: 10px; /* Rounded scrollbar */
    border: 2px solid rgba(0, 0, 0, 0); /* Transparent border to add space around the thumb */
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #00d4ff; /* Brighter neon blue on hover */
}

.navigation {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center the items */
    margin-bottom: 1em; /* Margin below navigation */
    padding-bottom: 10px; /* Adds space above the border */
    border-bottom: 2px solid #00f6ff; /* Neon blue */
}

.nav-item {
    padding-bottom: 0.3125em; /* 5px padding */
    cursor: pointer;
    color: #777;
    margin-right: 1.25em; /* Add some spacing */
}

.nav-item.active {
    color: #00f6ff; /* Neon blue active */
    font-weight: bold;
}