---
---

/// Variables
// Main contents
$main-bg: #fff;
$main-color: #222;
$header-color: #222;
$borders: #bbb;
$light-borders: #dee2e6;
$blockquote-color: #666;
$code-bg: #ccc6;
$code-color: #333;
$code-light: #999;
$a-color: #0366d6;
$small-color: gray;
$carousel-caption-bg: #fffb;
$table-alt-bg: #f3f3f3;
$kbd-bg: #fafafa;
$kbd-border: #ddd;
$alert-secondary-bg: #e9e9e9;
$alert-secondary-border: #bbb;
$details-bg: #f9f9f9;
$active-accordian-bg-color: #fcfcfc;
$active-accordian-header-color: #0c63e4;
$active-accordian-header-bg-color: #e7f1ff;

// Cards
$card-background: var(--main-bg);
$card-edges-background: rgba(0,0,0,.03);

// Modal
$modal-borders: 1px solid #dee2e6;

// Nav
$nav-link-color: rgba(255, 255, 255, 0.7);
$nav-link-color-hover: rgba(255, 255, 255, 0.5);
$nav-link-color-active: rgba(255, 255, 255, 1);
$dropdown-item-bg-hover: rgba(0, 0, 0, 0.3);
$primary: {{ page.color | default: site.color }};
$dark: #343a40;
$light: #f8f9fa;
$light-border: #ced4da;
$light-placeholder: darkgray;

/// Import base style
@import "base";

/// CSS Overrides
.carousel-dark-when-light .carousel-control-next-icon, .carousel-dark-when-light .carousel-control-prev-icon {
	filter: invert(1) grayscale(100);
}

.carousel-dark-when-light .carousel-indicators li {
	background-color: #000;
}