/* styles.css */

/* General body styling for demonstration */
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

/* The navigation bar container */
.navbar {
    overflow: hidden;
    background-color: #FFFFFF;
    position: fixed; /* Fixes the bar to the viewport */
    top: 0; /* Positions the bar at the top of the page */
    width: 100%; /* Ensures the bar spans the full width */
    z-index: 100; /* Ensures the navbar is above other content */
}

/* Links inside the navbar */
.navbar a {
    float: left; /* Aligns links horizontally */
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 7px 12px;
    text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
    background: #FFFFFF;
    color: black;
}

/* To prevent content from being hidden behind the fixed menu, add a top margin to the main content */
.main-content {
    margin-top: 50px; /* This margin should be equal to or larger than the navbar's height */
    padding: 16px;
    height: 200vh; /* Adds enough height to the page for scrolling demonstration */
}