// Your variable overrides can go here, e.g.:
// $h1-font-size: 3rem;
$white: white;
$gray-500: #999;
$gray-900: #272b30;

$body-bg: $white;

$old-body-bg:                   $gray-900;
$dropdown-link-hover-bg:            $old-body-bg;
$card-bg:                           lighten($old-body-bg, 5%);
$popover-bg:                        lighten($old-body-bg, 5%);
$toast-background-color:            lighten($old-body-bg, 5%);
$modal-content-bg:                  lighten($old-body-bg, 5%);
$list-group-bg:                     lighten($old-body-bg, 5%);
$list-group-hover-bg:               lighten($old-body-bg, 10%);

$list-group-border-color:           rgba($gray-500, .6);

$enable-print-styles: false;

@import "bootswatch/dist/slate/_variables";
@import "bootstrap/scss/bootstrap";
@import "bootswatch/dist/slate/_bootswatch";

p img {
    margin: auto;
    max-width: 100%;
    max-height: 100vh;
}
p:has(img) {
    text-align: center;
}

.level .level-item {
    text-align: center;
}
.level .level-item .heading {
    font-variant: small-caps;
    text-transform: lowercase;
}
.level .level-item .value {
    font-size: 1.3rem;
    font-weight: bolder;
}
