/* Adjust Topbar to Reduce Spacing and Center it */
.topbar {
    display: flex;
    justify-content: center;
    align-items: center;  /* Ensures items are centered properly */
    padding: 0px 0px;  /* Reduce padding to tighten spacing */
    position: fixed;
    width: 90%;  /* Reduce width to 80% */
    height: 50px;
    top: 0;
    left: 50%;  /* Position it in the center */
    transform: translateX(-50%);  /* Shift it back by 50% of its own width */
    z-index: 10;
    
    /* Full-width transparent background */
    background-color: rgba(0, 0, 0, 0.75); /* Dark transparent background covering full menu */
    
    color: white !important;
    font-size: 16px;
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
    text-align: center;
}
/* Reduce Spacing Between Menu Items */
.topbar .menu {
    position: relative;
    display: inline-block;
    z-index: 10;
    padding: 3px 8px;  /* Reduce padding to bring buttons closer */
    margin: 0px 5px;  /* Adjust margin to control horizontal spacing */
}

/* Reduce Button Padding */
.topbar a {
    text-decoration: auto;    
    padding: 15px 15px;  /* Reduce padding to bring buttons closer */
    display: inline-block;
    font-size: 14px;
    z-index: 10;
    color: white !important;
    background-color: transparent; /* Remove button background, let topbar handle it */
    box-shadow: none; /* Remove individual button shadow */
}

/* Hover Effect for Menu Buttons */
.topbar a:hover {
    background-color: #ff0000;
}

/* Submenu Styling */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.75);
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 5px 0;
}

/* Ensure submenu items expand fully */
.submenu a {
    display: block;
    padding: 12px 16px;
    color: white;
    text-align: left;
}

/* Show Submenu on Hover */
.menu:hover .submenu {
    display: block;
}

/* Prevent Submenu from Cutting Off */
.menu {
    overflow: visible;
}