.content-page .flex-container {
    display: flex;
    gap: 20px;
}

.content-page .item:nth-child(1),
.content-page .item:nth-child(2),
.content-page .item:nth-child(3)
{
    flex-grow: 1;
    width: 33%;
}



a
{
    text-decoration: none;
}


/*
* No indent on bullet lists
*/
ul.reset
{
    padding-left: 0px;
}
ul.reset li
{
    margin-left: 18px;
}


/*
* Add some more space
*/

li
{
    margin-bottom: 5px;
}



/*
* Sidebar nav
*/
.page-index .sidebar ul
{
    list-style-type: none;
}
.page-index .sidebar li
{
    margin-left: 0;
    font-weight: 600;
}



/*
* Let's just turn off bullet icons for all lists.
*/
.content-page ul
{
    list-style-type: none;
}
.content-page li
{
    margin-left: 0;
    margin-bottom: 8px;
}




.blog-post-page .container .by-line
{
    border-bottom: 1px solid #cccccc;
    margin-bottom: 40px;
}






.page-blog-index h1,
.blog-post-page h1
{
    margin-bottom: 20px;
}





.hidden
{
    display: none;
    visibility: hidden;
}
.fade-out {
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    visibility: visible;
}
.fade-out.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}











.alert-dismissible .btn-close
{
    padding-top: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;

    margin-top: .25rem;
}


/*
Thanks ChatGPT.

Prompt> 
    Using just CSS, I want to create a "toast" style message DIV that adheres to the following:

    * Appears at the top of the visible window, regardless of scroll position of the page.
    * Content can scroll below it.
    * Has a width of 500px;
    * Is horizontally centred.
*/
.custom-toast 
{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    z-index: 000;

    /* background: #333;
    color: white;
    padding: 1em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px; */
}