: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: #d14b4b; /* Link color */
    --bs-link-color-rgb: 209, 75, 75; /* Link color */
    --bs-link-hover-color: #ff6b6b; /* Link color on hover */
    --bs-link-hover-color-rgb: 255, 107, 107;

    --bs-body-bg: #000000; /* Background color for the body */
    --bs-body-color: rgba(255, 255, 255, .92); /* 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: rgba(255, 255, 255, .12); /* Default border color */
    --bs-border-radius: 0.25rem; /* Global border radius for rounded elements */

    --bs-secondary-color: rgba(255, 255, 255, .62);
    --bs-tertiary-color: rgba(255, 255, 255, .45);
    --bs-emphasis-color: rgba(255, 255, 255, .96);

    --bs-success: #2fbf71;
    --bs-success-rgb: 47, 191, 113;

    --bs-info: #4da3ff;
    --bs-info-rgb: 77, 163, 255;

    --bs-warning: #f6c343;
    --bs-warning-rgb: 246, 195, 67;

    --bs-danger: #ff4d4d;
    --bs-danger-rgb: 255, 77, 77;

    --bs-light: #1a1a1a;
    --bs-light-rgb: 26, 26, 26;

    --bs-dark: #0b0b0b;
    --bs-dark-rgb: 11, 11, 11;
}


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);
            text-decoration: underline;
            text-decoration-thickness: .08em;
            text-underline-offset: .18em;
            text-decoration-color: rgba(209, 75, 75, .55);
        }

        a:hover {
            color: var(--bs-link-hover-color);
            text-decoration-color: rgba(255, 107, 107, .85);
        }

        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: none;
        &:focus-visible{
            box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .5);
        }
    }

    .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);

        &:focus-visible{
            box-shadow: 0 0 0 .2rem rgba(var(--bs-secondary-rgb), .5);
        }
    }

    .card {
        .card-img-wrapper {
            height: 200px;
            background-color: #dddddd;
            padding: 10px;
            text-align: center;
            overflow: hidden;

            img {
                width: 100%;
                height: 180px;
                object-fit: cover;
                object-position: center center;
                border-radius: 8px;
                display: block;
            }
        }
    }
}

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

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