:root {
    /* Global color variables for the theme */
    --bs-primary: #8b0000; /* Primary color used for buttons, highlights, etc. */
    --bs-primary-rgb: 139, 0, 0; /* RGB value for primary color */
    --bs-primary-text: #ffffff; /* Text color when on primary background */

    --bs-secondary: #4e5d6c; /* Secondary color used for less prominent elements */
    --bs-secondary-rgb: 78, 93, 108; /* RGB value for secondary color */
    --bs-secondary-text: #ffffff; /* Text color when on secondary background */

    --bs-link-color: #8b0000; /* Link color */
    --bs-link-color-rgb: var(--bs-link-color); /* Link color */
    --bs-link-hover-color: #a52a2a; /* Link color on hover */
    --bs-link-hover-color-rgb: var(--bs-link-hover-color);

    --bs-body-bg: #f8f9fa; /* Background color for the body */
    --bs-body-color: #212529; /* Text color for the body */

    --bs-primary-hover-bg: #a52a2a; /* Background color for primary elements on hover */
    --bs-secondary-hover-bg: #5a6d7a; /* Background color for secondary elements on hover */

    --bs-border-color: #dee2e6; /* Default border color */
    --bs-border-radius: 0.25rem; /* Global border radius for rounded elements */
}


body {
    background-color: black;
    font-family: "Almendra", serif;
    font-weight: 400;

    > header {
        h1 {
            font-size: 20px;
            font-family: "Cinzel Decorative", serif;
            font-weight: 700;
            font-style: normal;

            small {
                font-size: 10px;
                display: block;
            }
        }

        .navbar {
            .navbar-brand {
                img {
                    height: 55px;
                    margin-right: 15px;
                }
            }

            li {
                a {
                    font-weight: 400;
                }
            }
        }
    }

    > main {
        background-color: rgb(16, 16, 16);
        color: white;
        margin-top: 80px;

        h1, h2, h3, h4, h5, h6 {
            font-family: "Almendra", serif;
            font-weight: 400;
        }

        h2 {
            margin-top: 30px;
        }

        a {
            color: var(--bs-link-color);
        }

        a:hover {
            color: var(--bs-link-hover-color);
        }

        small {
            font-size: 70%;
        }

        input::placeholder, .form-control::placeholder {
            color: var(--bs-secondary);
        }

        .form-text {
            color: var(--bs-secondary-text) !important;
        }
    }

    > footer {
        padding-top: 60px;
        color: #bdc2c6;

        a {
            color: white;
        }
    }

    .table {
        /* Table-specific variables for customizing the appearance */
        --bs-table-color: #ffffff; /* Text color inside the table */
        --bs-table-bg: #25252b; /* Background color for the table */
        --bs-table-border-color: #3e3e47; /* Border color for table elements */

        --bs-table-striped-color: #ffffff; /* Text color for striped rows */
        --bs-table-striped-bg: rgba(255, 255, 255, 0.05); /* Background color for striped rows */

        --bs-table-active-color: #ffffff; /* Text color for active rows */
        --bs-table-active-bg: rgba(255, 255, 255, 0.1); /* Background color for active rows */

        --bs-table-hover-color: #ffffff; /* Text color for rows on hover */
        --bs-table-hover-bg: rgba(255, 255, 255, 0.075); /* Background color for rows on hover */

        > caption {
            color: var(--bs-table-color);
            font-size: small;
        }

        .table-primary {
            --bs-table-color: var(--bs-primary-text); /* Text color for the primary table */
            --bs-table-bg: var(--bs-primary); /* Background color for the primary table */
            --bs-table-border-color: #a6b5cc; /* Border color slightly lighter than the primary bg */
            --bs-table-striped-bg: rgba(var(--bs-primary-rgb), 0.1); /* Striped rows background with transparency */
            --bs-table-striped-color: var(--bs-primary-text); /* Text color for striped rows */
            --bs-table-active-bg: rgba(var(--bs-primary-rgb), 0.15); /* Active row background with more transparency */
            --bs-table-active-color: var(--bs-primary-text); /* Text color for active rows */
            --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.2); /* Hovered row background with even more transparency */
            --bs-table-hover-color: var(--bs-primary-text); /* Text color for hovered rows */

            color: var(--bs-table-color);
            border-color: var(--bs-table-border-color);
        }

        .table-secondary {
            --bs-table-color: var(--bs-secondary-text); /* Text color for the secondary table */
            --bs-table-bg: var(--bs-secondary); /* Background color for the secondary table */
            --bs-table-border-color: #6c7a88; /* Border color slightly lighter than the secondary bg */
            --bs-table-striped-bg: rgba(var(--bs-secondary-rgb), 0.1); /* Striped rows background with transparency */
            --bs-table-striped-color: var(--bs-secondary-text); /* Text color for striped rows */
            --bs-table-active-bg: rgba(var(--bs-secondary-rgb), 0.15); /* Active row background with more transparency */
            --bs-table-active-color: var(--bs-secondary-text); /* Text color for active rows */
            --bs-table-hover-bg: rgba(var(--bs-secondary-rgb), 0.2); /* Hovered row background with even more transparency */
            --bs-table-hover-color: var(--bs-secondary-text); /* Text color for hovered rows */

            color: var(--bs-table-color);
            border-color: var(--bs-table-border-color);
        }
    }

    .btn-primary {
        --bs-btn-color: var(--bs-primary-text); /* Text color for the primary button */
        --bs-btn-bg: var(--bs-primary); /* Background color for the primary button */
        --bs-btn-border-color: var(--bs-primary); /* Border color matching the background */
        --bs-btn-hover-bg: var(--bs-primary-hover-bg); /* Background color on hover */
        --bs-btn-hover-color: var(--bs-primary-text); /* Text color on hover */
        --bs-btn-active-bg: var(--bs-primary-hover-bg); /* Background color when active */
        --bs-btn-active-color: var(--bs-primary-text); /* Text color when active */
        --bs-btn-focus-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.5); /* Focus shadow for accessibility */

        color: var(--bs-btn-color);
        background-color: var(--bs-btn-bg);
        border-color: var(--bs-btn-border-color);
        box-shadow: var(--bs-btn-focus-shadow); /* Box shadow for focus state */
    }

    .btn-secondary {
        --bs-btn-color: var(--bs-secondary-text); /* Text color for the secondary button */
        --bs-btn-bg: var(--bs-secondary); /* Background color for the secondary button */
        --bs-btn-border-color: var(--bs-secondary); /* Border color matching the background */
        --bs-btn-hover-bg: var(--bs-secondary-hover-bg); /* Background color on hover */
        --bs-btn-hover-color: var(--bs-secondary-text); /* Text color on hover */
        --bs-btn-active-bg: var(--bs-secondary-hover-bg); /* Background color when active */
        --bs-btn-active-color: var(--bs-secondary-text); /* Text color when active */
        --bs-btn-focus-shadow: 0 0 0 0.2rem rgba(var(--bs-secondary-rgb), 0.5); /* Focus shadow for accessibility */

        color: var(--bs-btn-color);
        background-color: var(--bs-btn-bg);
        border-color: var(--bs-btn-border-color);
    }
}

@media (min-width: 576px) {
    body {
        > header {
            h1 {
                font-size: 30px;

                small {
                    font-size: 15px;
                }
            }
        }
    }
}