:root {
    /*--pastel-background-color: #88cdff;*/
    --pastel-background-color: #519cd3;
    --nav-link-color: white;
    --nav-link-hover-color: #ffdd00;
    --navbar-brand-color: white;
}

body {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header img {
    height: auto;
}

main {
    flex: 1;
    margin-top: 20px;
}

footer {
    /*background-color: var(--pastel-background-color);*/
    /*background-color: white;*/
    padding: 10px 0;
    margin-top: 20px;
}

.navbar {
    background-color: var(--pastel-background-color);
    color: #a52834;
}

.nav-link {
    color: var(--nav-link-color);
    margin-right: 20px; /* Adjust this value to add more or less space */
}

.nav-link:hover {
    color: var(--nav-link-hover-color);
}

.nav-item .nav-link.active {
    color: var(--nav-link-color);
    background-color: rgba(0, 0, 0, 0.075); /* adjust color and opacity as desired */
    height: calc(100% + 2*0.5rem);    /* replace with your navbar's padding size */
    padding: 0.5rem 0.5rem;                /* replace with your navbar's padding size */
    margin-top: -0.5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.navbar-brand {
    color: var(--navbar-brand-color) !important;
}

/* Apply custom link styles to all links except those in the navbar */
body a:not(.navbar a) {
    text-decoration: underline !important;
    color: inherit;
}

body a:not(.navbar a):hover {
    text-decoration: underline !important;
    color: #c8c8c8;
}

.accordion-button {
    background-color: #f8f9fa;
    font-size: 1.1rem;
}
.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
}
/*
.collapse.show {
    background-color: #f8f9fa;  !* this should match the color of table-light *!
}*/