#navigation-menu {
    background-color: #fff;
    color: black;
    padding: 0.5rem; /* Adjust padding */
    border-radius: 5px;
    position: fixed;
    top: 2%; /* Adjust position from top */
    right: 2%; /* Adjust position from right */
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent line breaks */
    max-width: 95%; /* Set maximum width */
}

#navigation-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; /* Center-align menu items */
    display: flex; /* Use flexbox for horizontal alignment */
    justify-content: center; /* Center-align items */
}

#navigation-menu ul li {
    margin-left: 10px; /* Adjust margin between items */
}

#navigation-menu ul li:first-child {
    margin-left: 0; /* Remove margin for the first item */
}

#navigation-menu ul li a {
    color: #070505;
    text-decoration: none;
    padding: 0.3rem 0.7rem; /* Adjust padding */
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease-in-out;
    font-size: 0.8rem; /* Adjust font size */
}

#navigation-menu ul li a:hover {
    background-color: #0d6efd;
    color: white;
}

/* Media Query for very small screens */
@media screen and (max-width: 280px), (max-height: 653px) {
    #navigation-menu {
        padding: 0.3rem; /* Further adjust padding for very small screens */
        top: 3%; /* Adjust position from top for very small screens */
        right: 3%; /* Adjust position from right for very small screens */
    }

    #navigation-menu ul li {
        margin-left: 5px; /* Further adjust margin for very small screens */
    }

    #navigation-menu ul li a {
        padding: 0.2rem 0.6rem; /* Further adjust padding for very small screens */
        font-size: 0.7rem; /* Further adjust font size for very small screens */
    }
}