body {
	width: 800px;
	max-width: 100%;
	margin: 0 auto;
	overflow-x:  hidden;
    background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
}


.github-link {
	fill: var(--bs-body-color);
}


#darkModeToggle {
	position: absolute;
	padding: 5px;
	cursor: pointer;
	right: 1rem;
	top: 0.5rem;
}
#darkModeToggle svg {
	height: 1.5rem;
	width: 1.5rem;
}


.btn-check:checked+.btn,
.btn.active, .btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
	border-color: var(--bs-btn-active-border-color) !important;
}
.btn-group label {
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
}


.dark-mode .btn-dark:not(.ignore) {
    --bs-btn-color: var(--bs-body-bg);
    --bs-btn-bg: var(--bs-gray-100);
    --bs-btn-border-color: var(--bs-gray-100);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--bs-gray-300);
    --bs-btn-hover-border-color: var(--bs-gray-300);
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: var(--bs-gray-300);
    --bs-btn-active-border-color: var(--bs-gray-300);
    --bs-btn-disabled-color: var(--bs-body-bg);
    --bs-btn-disabled-bg: var(--bs-gray-300);
    --bs-btn-disabled-border-color: var(--bs-gray-300);
}
.dark-mode .btn-outline-dark:not(.ignore) {
    --bs-btn-color: var(--bs-gray-100);
    --bs-btn-border-color: var(--bs-gray-100);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--bs-gray-100);
    --bs-btn-hover-border-color: var(--bs-gray-100);
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: var(--bs-gray-100);
    --bs-btn-active-border-color: var(--bs-gray-100);
    --bs-btn-disabled-color: var(--bs-gray-100);
    --bs-btn-disabled-border-color: var(--bs-gray-100);
}

.table tbody tr.active td {
    background-color: var(--bs-gray-200);
}

.dark-mode .table tbody tr.active td {
    background-color: var(--bs-gray-800);
}



.card canvas {
    /*background-image: url("https://i.imgur.com/pEoiiQP.png");*/
    background-image: url("/assets/img/watermark.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.anchor-link {
    opacity: 0;
    margin-left: 0.4em;
    font-size: 0.85em;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s;
}

h5:hover .anchor-link {
    opacity: 1;
}