@font-face{
	font-display:block;
	font-family:bootstrap-icons;
	src:
		url("assets/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),
		url("assets/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff");
}

@view-transition {
  navigation: auto;
}

/* utility */

.icon {
	font-family: bootstrap-icons;
}

.btn.icon {
	font-size: 150%;
	width: 1.5em;
	height: 1.5em;
	padding: 0px;
}

.large-only {
	display: none;
}

.v-stretch {
	display: flex;
	flex-direction: column;
}
.stretch {
	flex-grow: 1;
}

.row.gap {
	gap: var(--std-gap);
}

ul.row {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	margin-right: -.75rem;
}

ul.row > li {
	padding-left: 0px;
}

.row {
	row-gap: var(--std-gap);
}

.fill {
	height: 100%;
	width: 100%;
}

.marquee {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

.mq-inner {
	animation: marqueeLeft 10s linear infinite;
	display: inline-block;
}

@keyframes marqueeLeft {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100.5%);
	}
}

/* shared layout */

body {
	min-height: 100vh;
	display:flex;
	flex-direction: column;
	--std-gap: calc(var(--bs-gutter-x, 1.5rem) / 2);
}

#main-content {
	flex-grow: 1;
	view-transition-name: page-default;
}

.topnav {
	display: flex;
	position: sticky;
	top: 0px;
	background: var(--bs-secondary-bg);
	z-index: 1;
	flex-direction: column;
}

.topnav nav {
	background: var(--bs-secondary-bg);
	position: absolute;
	top: 100%;
	left: 0px;
	right: 0px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-3em);
	transition: transform .5s, opacity .5s;
	z-index: -1;
	padding: 0px;
}

footer {
	background: var(--bs-secondary-bg);
	font-size: .75em;
	padding: .25em;
}

footer p {
	margin:0px;
}

#mobile_toggle {
	display:none;
}

#mobile_toggle:checked ~ nav {
	opacity: 1;
	pointer-events: unset;
	transform: translateY(0em);
}

.topnav nav p {
	margin: 0px;
	transition: background .25s, border-color .25s;
}

.topnav nav p:hover {
	background: var(--bs-primary-border-subtle);
	border-color: var(--bs-primary-text-emphasis);
}

.topnav nav a {
	text-decoration: none;
	color: inherit;
	padding: .5em 1em;
	display:inline-block;
}

main {
	background: var(--bs-secondary-bg);
	border-radius: 1em;
	padding: .5em;
}

.overflow {
	position: absolute;
	top: var(--ovf-margin, 0px);
	right: var(--ovf-margin, 0px);
	left: var(--ovf-margin, 0px);
	bottom: var(--ovf-margin, 0px);
}
	
@keyframes page-in {
	from {
		opacity: 0;
		transform: translateX(10rem);
	}
}

@keyframes page-out {
	to {
		opacity: 0;
		transform: translateX(-10rem);
	}
}

::view-transition-old(page-default) {
	animation: .5s both page-out;
}

::view-transition-new(page-default) {
	animation: .5s both page-in;
}

@media (min-width: 768px) {
	.small-only {
		display: none !important;
	}
	
	.large-only {
		display: block;
	}
	
	.topnav {
		flex-direction: row;
	}
	
	.topnav nav {
		opacity: 1;
		pointer-events: unset;
		transform: translateY(0em);
		position: unset;
		z-index: 0;
		display: flex;
	}
	
	.topnav nav p {
		border-bottom: .25em solid transparent;
	}
}

@media print {
	.no-print {
		display: none !important;
	}
}

@media (prefers-color-scheme: dark) {
	.flat-img {
		filter: invert(100%);
	}
}