html {
    position: relative;
    min-height: 100%;

    body {
        font-family: 'Open Sans', sans-serif;

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Titillium Web', 'Open Sans', sans-serif;
        }

        nav#topNav {
            a.navbar-brand {
                font-family: 'Titillium Web', 'Open Sans', sans-serif;
                font-weight: 700;
                font-size: 1.5rem;

                svg {
                    fill: currentColor;
                    width: 2.5rem;
                }
            }
        }

        nav.list-group {
            a.list-group-item {
                svg.nav-icon {
                    fill: currentColor;
                    width: 1.1rem;
                    max-height: 1.1rem;
                    margin-inline-end: .5rem;
                }
            }
        }

        /* footer height + desired space */
        margin-bottom: 4rem;

        #footer {
            position: absolute;
            bottom: 0;
            width: 100%;

            /* fixed height of the footer */
            height: 3rem;
        }

        overflow-x: hidden;
    }

    &[data-turbo-preview] body {
        opacity: .8;
    }

    > .turbo-progress-bar {
        background-color: var(--bs-warning);
    }
}