:root {
    /*  
        #0052cc
        https://coolors.co/palette/000000-0052cc-0066ff-cce0ff-d2fbd0-228000-646369-f7f7f8-ed1245-d8d8da


        https://mycolor.space/?hex=%2315616D&sub=1
    */
    --primary-color: #000000;               /* black: rgb(0, 0, 0) */
    --secondary-color: #0052cc;             /* blue:  rgb(0, 82, 204) */
    --tertiary-color: #CCE0FF;              /* light grey-blue:  rgb(204, 224, 255) BEHIND CONTAINER */
    --quaternary-color: #D8D8DA;            /* light grey:  rgb(216, 216, 218) FOOTER */
    --quinary-color: #6878d6;               /* purple:  rgb(111, 66, 193) */
    --content-background-color: #ffffff;    /* white:  rgb(255, 255, 255) */
    --success-color: #228000;               /* green:  rgb(34, 128, 0) */
    --info-color: #CCE0FF;                  /* light grey-blue:  rgb(204, 224, 255) */
    --warning-color: #ED1245;               /* red:  rgb(237, 18, 69) */
}

.color-primary {
    background-color: var(--primary-color);
    color: #fff;
}

.color-secondary {
    background-color: var(--secondary-color);
    color: #fff;
}

.color-background-content {
    background-color: var(--content-background-color);
    color: var(--primary-color);
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative; 
}

body {
    background-color: var(--tertiary-color);
}

.navbar {
    background-color: var(--primary-color);
    color: #fff;
}
.navbar-container-padding {
    padding-right: calc(100vw - 100%);
}
.navbar-toggler {
    align-self: center;
    padding: 0px 8px;
}

.full-height-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.partial-height {
    min-height: 70vh;
}

.content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background-color: var(--content-background-color);
}

footer {
    position: absolute;
    bottom: 0;
    margin-left: -15px;
    margin-right: -15px;
    width: 100%;
}

.footer-content {
    position: relative;
    background-color: var(--quaternary-color);
}

.page-header {
    padding: 10px 0;
}

.banner-container {
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
     /* Set width to desired size */
    height: 700px; /* Set height to desired size */
    background-image: url('/webp/images/ld2.webp');
    background-size: cover;
    background-position: center;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(var(--quinary-color), 0.5); */
    background-color: rgba(104, 120, 214, 0.9);  /* Red tint with 50% opacity */
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* width: 40%; */ /* using bootstrap cols */
    height: 100%;
}

.home-banner {
    background-color: var(--quaternary-color);
}

.home-icon {
    fill: var(--quinary-color);
    color: var(--quinary-color);
}

.pending {
    background-color: var(--quinary-color);
}

.unpublished {
    background-color: var(--quaternary-color);
}

.youtube-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.youtube-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.bold-numbers ol {
    list-style-type: none; /* Remove default numbering */
    counter-reset: my-counter; /* Reset the counter */
}
.bold-numbers > ol > li {
    counter-increment: my-counter; /* Increment the counter for each list item */
}
.bold-numbers > ol > li::before {
    content: counter(my-counter); /* Display the counter number */
    font-weight: bold; /* Make the number bold */
    font-size: 1em; /* Match the font size of h6 */
    margin-right: 5px; /* Add some space between the number and the content */
    display: inline-block; /* Ensure the number and heading are on the same line */
    width: 1em; /* Set the width to maintain alignment */
    text-align: right;
}
.bold-numbers h6 {
    display: inline; /* Ensure h6 elements are displayed inline */
    margin: 0; /* Remove any default margin */
    font-size: 1em; /* Set font size to match the ordered list numbers */
}