/* static/css/custom-navbar.css */

.custom-navbar {
    background-color: #333; /* Example background, change as needed */
    padding: 10px 15px;    /* Padding around the links */
    border-radius: 5px;    /* Optional: for slightly rounded corners */

    position: fixed;       /* This makes it stay in place when scrolling */
    bottom: 20px;          /* Distance from the bottom of the viewport */
    right: 20px;           /* Distance from the right of the viewport */
    z-index: 1000;         /* Ensures it stays on top of other content */

}

/* Remove any width constraints if you had them to make it full width before */
.custom-navbar .custom-navbar-container {
    /* No specific styles needed here for a small corner navbar unless you want to constrain it further */
}


.custom-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* Links will stack vertically by default if li is display: block */
}

.custom-navbar ul li {
    display: block; /* Makes each link take its own line, stacking them vertically */
    margin-bottom: 5px; /* Adds a little space between the links */
}

.custom-navbar ul li:last-child {
    margin-bottom: 0; /* No margin below the last link */
}

.custom-navbar ul li a {
    color: #fff;
    text-decoration: none;
    display: block; /* Makes the entire block clickable */
    padding: 5px 10px; 
}

.custom-navbar ul li a:hover {
    background-color: #555;
    border-radius: 4px;
}