/*********************************************************************************************
COLOUR SCHEME
*********************************************************************************************/
/* Main background colour */
body {
    background-color: var(--body-bg-color);
    color: var(--body-text-color);
}

/* Headers and bold text have a slightly greenish colour */
h1, h2, h3, h4, strong {
    color: var(--title-text-color);
}

.card, .modal-content, .list-group-item {
    background-color: var(--body-alt-bg-color);
}

.card-header {
    background-color: var(--body-alt-dark-bg-color);
}

/* Tables (e.g. boardgames, systems) */
.table {
    color: var(--body-text-color);
}
    .table-hover tbody tr:hover {
        color: var(--body-text-color);
    }

.form-control, select option, .form-control:focus {
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
}

    .input-group-prepend .input-group-text {
        background-color: var(--input-prepend-bg-color);
        color: var(--body-alt-text-color);
    }


/***************************************
Greenified Items
***************************************/
/* General theme colours */
.greenify {
    background-color: var(--greenify-bg-color);
    color: var(--greenify-text-color);
}
.greenify-dark {
    background-color: var(--greenify-dark-bg-color);
    color: var(--greenify-dark-text-color);
}
.greenify-light {
    background-color: var(--greenify-light-bg-color);
    color: var(--greenify-light-text-color);
}

/* Greenified Dropdowns */
.greenify-dropdown .dropdown-item, .greenify-dropdown {
    background-color: var(--greenify-dropdown-bg-color);
    color: var(--greenify-dropdown-text-color);
}
    .greenify-dropdown .dropdown-divider {
        border-top-color: var(--greenify-dropdown-text-color);
    }
    .greenify-dropdown .dropdown-item.hover, .greenify-dropdown .dropdown-item:hover {
        background-color: var(--greenify-dropdown-hover-bg-color);
        color: var(--greenify-dropdown-hover-text-color);
    }
    .greenify-dropdown .dropdown-item.active, .greenify-dropdown .dropdown-item:active {
        background-color: var(--greenify-dropdown-active-bg-color);
        color: var(--greenify-dropdown-active-text-color);
    }

/*********************************************************************************************
FORMATTING
*********************************************************************************************/
/* Ensure elements can be aligned to the bottom of the page
    when the page does not fill the entire viewport */
html {
    height: 100%;
}

body {
    min-height: 100%;
}

footer {
    /* Align footer to the bottom of the page (non-sticky) */
    margin-top: auto;

    /* Footer is centered */
    text-align: center;
    width: 100%;
    padding: 5px;
    padding-bottom: 10px;
}

/* Add a margin around the page content
    so it's not too close to the navigation and footer */
    #mainContent {
        margin-top: 10px;
    }

/* Main content is centered and cannot exceed a certain width */
.contentFrame {
    max-width: 800px;
    margin: 0 auto;
}

.wideContentFrame {
    max-width: 1200px;
    margin: 0 auto;
}

/* Vertically align the navbar brand with the navbar items*/
.navbar-brand {
    align-items: center;
    display: flex;
    padding: 0px;
}
    /* Properly space the brand icon and brand name */
    .navbar-brand .brand-text {
        margin-left: 10px;
    }

.heightener {
    min-height: 64px;
}

/* Card images that move to the top when the screen gets small
    If the image is very thin and high, this prevents the image from covering the entire screen
*/
.card.card-responsive .card-img-wrapper {
    min-height: 100px;
}

.card.card-responsive .card-img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    margin: auto;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/*********************************************************************************************
MARKDOWN
*********************************************************************************************/

.rendered-md {
    border-radius: 3px;
}

/* Block code */
.rendered-md pre {
    white-space: pre;
    border: 1px solid #f0f0f0;
    background-color: #f6f8fa;
    font-size: 80%;
}
    .rendered-md pre > code {
        border: initial;
        background-color: initial;
    }

/* Inline code */
.rendered-md code {
    padding: 0 5px;
    border: 1px solid #eaeaea;
    background-color: #f8f8f8;
    border-radius: 3px;
    font-size: 80%;
}

/* Quotes */
.rendered-md blockquote {
    border-left: 4px solid rgb(199, 199, 199);
    padding: 5px 15px;
    color: #777;
    background-color: #fff;
}
    .rendered-md blockquote:last-child {
        margin-bottom: 0px;
    }

/* Tables */
.rendered-md table {
    border-collapse: collapse;
}
    .rendered-md table td, .rendered-md table th {
        border: 1px solid #ccc;
        padding: 6px 13px;
    }

    .rendered-md table thead tr, .rendered-md table tbody tr:nth-child(even) {
        background-color: #fff;
    }

    .rendered-md table tbody tr:nth-child(odd) {
        background-color: #f8f8f8;
    }