body
{
    position: relative;
    padding-top: 100px;
}

li
{
    margin-top: 10px;
    margin-bottom: 10px;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5
{
}

h1, .h1
{
    padding-top: 100px;
    margin-top: -80px;
    margin-bottom: 20px;
    font-size: 32px;
}

h2, .h2
{
    padding-top: 100px;
    margin-top: -80px;
    margin-bottom: 10px;
    font-size: 24px;
}

h3, .h3
{
    padding-top: 100px;
    margin-top: -80px;
    margin-bottom: 10px;
    font-size: 18px;
}

h4, .h4
{
    font-size: 16px;
}

h5, .h5
{
    font-size: 14px;
}

th, td
{
    padding: 10px;
}

blockquote
{
    font-size: 14px;
}

a
{
    color: var(--bs-primary);
    text-decoration: none;
}

    a:hover
    {
        color: var(--bs-primary);
        text-decoration: underline;
    }

    a.navbar-followus
    {
        color: var(--bs-body-color);
        text-decoration: none;
    }

        a.navbar-followus:hover
        {
            color: var(--bs-primary);
            text-decoration: none;
        }

nav
{
    font-size: 0.875rem;
}

    nav ul
    {
        list-style-type: none;
    }

        nav ul li
        {
            margin: 0;
        }

.nav-pills .nav-link.active
{
    background-color: var(--bs-primary);
}

.nav-link
{
    color: var(--bs-primary);
}

.btn-primary
{
    color: var(--bs-body-bg);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .btn-primary:hover,
    .btn-primary:active
    {
        color: var(--bs-body);
        background-color: var(--bs-secondary);
        border-color: var(--bs-light);
    }

.btn-success
{
    background-color: hsl(var(--green-hue), var(--green-saturation), calc(var(--green-lightness) - 15%));
    border-color: hsl(var(--green-hue), var(--green-saturation), calc(var(--green-lightness) - 30%));
}

    .btn-success:hover,
    .btn-success:active
    {
        background-color: hsl(var(--green-hue), var(--green-saturation), calc(var(--green-lightness) - 30%));
        border-color: hsl(var(--green-hue), var(--green-saturation), calc(var(--green-lightness) - 45%));
    }

.btn-info
{
    background-color: hsl(var(--blue-hue), var(--blue-saturation), var(--blue-lightness));
    border-color: hsl(var(--blue-hue), var(--blue-saturation), calc(var(--blue-lightness) - 15%));
}

    .btn-info:hover,
    .btn-info:active
    {
        background-color: hsl(var(--blue-hue), var(--blue-saturation), calc(var(--blue-lightness) - 15%));
        border-color: hsl(var(--blue-hue), var(--blue-saturation), calc(var(--blue-lightness)));
    }

.btn-light
{
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-body-color);
}

    .btn-light:hover
    {
        color: var(--bs-body-bg);
        background-color: var(--bs-primary);
        border-color: var(--bs-body-bg);
    }

.alert-primary
{
    color: var(--bs-primary);
    background-color: var(--bs-light);
    border-color: var(--bs-secondary);    
}

.alert-danger
{
    color: hsl(var(--red-hue), var(--red-saturation), calc(var(--red-lightness) - 60%));
    background-color: hsl(var(--red-hue), var(--red-saturation), var(--red-lightness));
    border-color: hsl(var(--red-hue), var(--red-saturation), calc(var(--red-lightness) - 15%));
}

.alert-info
{
    color: hsl(var(--blue-hue), var(--blue-saturation), calc(var(--blue-lightness) - 45%));
    background-color: hsl(var(--blue-hue), var(--blue-saturation), var(--blue-lightness));
    border-color: hsl(var(--blue-hue), var(--blue-saturation), calc(var(--blue-lightness) - 15%));
}

.alert-success
{
    color: hsl(var(--green-hue), var(--green-saturation), calc(var(--green-lightness) - 45%));
    background-color: hsl(var(--green-hue), var(--green-saturation), var(--green-lightness));
    border-color: hsl(var(--green-hue), var(--green-saturation), calc(var(--green-lightness) - 15%));
}

.alert-warning
{
    color: hsl(var(--orange-hue), var(--orange-saturation), calc(var(--orange-lightness) - 45%));
    background-color: hsl(var(--orange-hue), var(--orange-saturation), var(--orange-lightness));
    border-color: hsl(var(--orange-hue), var(--orange-saturation), calc(var(--orange-lightness) - 15%));
}

.form-control
{
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

dark-mode-toggle
{
    position: absolute;
    height: 32px;
    top: -5px;
    left: 130px;
}
