@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

.menu-item {
    font-family: 'Marcellus', serif !important; /* Marcellus font */
    font-size: 15px !important; /* Appropriate size for menu items */
    font-weight: bold !important;
    color: #ffd700 !important; /* Gold color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    padding: 5px 15px !important; /* Adjust spacing between menu items */
    border-radius: 5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.menu-item:hover {
    background-color: #ffd700 !important; /* Make background gold on hover */
    color: #8b0000 !important; /* Make font color red on hover */
    border-color: #8b0000 !important; /* Make border red on hover */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) !important;
    transform: scale(1.1) !important; /* Enlarge menu item on hover */
    box-shadow: 0 0 15px #ffd700 !important; /* Add glow effect */
}

/* To center the menu container */
.ui.menu.secondary.inverted.radiusless .ui.container {
    display: flex;
    justify-content: center; /* Centers the menu items */
}

/* If you want to align the menu to the left instead, remove the rule above and uncomment the one below. */
/*
.ui.menu.secondary.inverted.radiusless .ui.container {
    display: flex;
    justify-content: flex-start;
}
*/