/* This part controls the page title look.
   It keeps the background white and text black so it’s easy to read. */
#title {
    margin-top: 12px;
    background-color: #fff;
    color: #000;
}

/* This is for the side menu area.
   It gives it a white background and a black line at the top. */
#menu {
    border-top: solid 6px #000;
    background-color: #fff;
    color: #fff;
    height: 400px;
}

/* This changes how the menu links look.
   They are red with white text and no underline. */
#menu a {
    background-color: #f00;
    color: #fff;
    text-decoration: none;
    display: block;
}

/* When the mouse goes over a link, it turns lighter and gets an underline. */
#menu a:hover {
    background-color: #f00;
    color: #ddd;
    text-decoration: underline;
    display: block;
}

/* This part controls the main page area.
   It adds a red line at the top to make it stand out. */
#content {
    background-color: #fff;
    border-top: solid 6px #f00;
}

/* This is the footer at the bottom of the page.
   It has a black background and white text. */
#footer {
    margin-top: 20px;
    text-align: center;
    background-color: #000;
    color: #fff;
}

/* This makes page titles bold and adds a bit of space below them. */
.page-title {
    font-weight: 700;
    margin-bottom: .75rem;
}

/* This adds a short red line under each title. */
.page-title-underline {
    width: 120px;
    height: 4px;
    background: #d62d20;
    border-radius: 2px;
    margin-bottom: 2rem;
}

/* This keeps the logo and text in the navbar next to each other. */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* This makes sure there’s enough height on pages with less content. */
.min-vh-60 {
    min-height: 60vh;
}

/* This changes how the dark navbar looks.
   It makes it dark gray with no borders showing. */
.navbar-inverse {
    background-color: #1b1f22 !important;
    border-color: #1b1f22 !important;
}

/* This makes the navbar text and links light so they are clear to see. */
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-text {
    color: #f8f9fa !important;
}

/* This adds an underline when hovering over a navbar link or when it’s active. */
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > .active > a {
    color: #fff !important;
    background-color: transparent !important;
    text-decoration: underline;
}

/* This keeps the logo and text in the navbar lined up nicely. */
.navbar-inverse .navbar-brand {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* This makes page titles bold and sets them to black. */
.page-title {
    font-weight: 700;
    margin-bottom: 6px;
    color: #000;
}

/* This adds a full red line under the page title. */
.page-title-underline {
    width: 100%;
    height: 4px;
    background-color: #f00;
    border-radius: 2px;
    margin-bottom: 20px;
}

/* This helps to center blocks in the middle of the page. */
.center-h {
    float: none;
    margin: 0 auto;
}

/* This adds some space above and below parts of the page. */
.vspace-60 {
    margin-top: 60px;
    margin-bottom: 60px;
}