body {
	font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell, helvetica neue, sans-serif;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
	padding: 0;
/*    background-color: #f8f8f8;*/
}

main {
	flex-grow: 1
}

img {
	max-width: 100%;
	border-radius: .2rem
}

table {
	border-collapse: collapse;
	margin: auto
}

td,
th {
	border: .1rem solid gray;
	padding: .3rem .5rem
}

pre {
	overflow-x: auto;
	border: .1rem solid #d3d3d3;
	padding: 1rem
}

code {
	font-family: SFMono-Regular, Consolas, liberation mono, Menlo, Courier, monospace
}

kbd {
	border: .1rem solid #a9a9a9;
	border-radius: .2rem;
	margin: .1rem;
	padding: .15rem
}

kbd:has(kbd) {
	padding: .3rem 0
}
/* .Banner {
	list-style: none;
	display: flex;
	flex-flow: row-reverse wrap-reverse;
	justify-content: space-between;
	margin: 0;
	padding: 0
} */

.Banner {
	list-style: none;
	display: flex;
	flex-flow: row-reverse wrap-reverse;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

.Banner-item--title {
	flex-grow: 1;
}

.Banner-item:nth-child(1) {
	order: 5
}

.Banner-item:nth-child(2) {
	order: 4
}

.Banner-item:nth-child(3) {
	order: 3
}

.Banner-item:nth-child(4) {
	order: 2
}

.Banner-item:nth-child(5) {
	order: 1
}

.Banner-heading {
	display: flex;
    align-items: center;
    margin: 0;
}

.Banner-link {
	font-size: 1rem;
	color: #fff;
	padding: .7rem 1rem
}

.Heading {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline
}

.Heading-title {
	margin: 1.5rem .5rem 0 0
}

.Heading-link {
	color: inherit
}

.Heading-link::after {
	content: "\1f517";
	font-size: .7rem;
	vertical-align: middle;
	margin-left: .5rem;
	visibility: hidden
}

.Heading-link:hover::after {
	visibility: visible
}

.Tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 1.5rem 0;
	padding: 0
}

.Tags-item {
	border-radius: .2rem;
	margin: .2rem;
	padding: 0 .3rem
}

.Tags-link {
	color: #fff
}

.Divider {
	display: flex;
	justify-content: center
}

.Divider::after {
	content: "\2500\2500\2500"
}

.Pagination {
	font-size: 1.25rem;
	color: inherit
}

.Pagination--right {
	float: right
}

.Footer {
	text-align: center;
	margin: 1rem 0
}

.u-wrapper {
	max-width: 55rem;
	margin: auto
}

.u-padding {
	padding: 0 1rem
}

.u-background {
	background: #262A39
}

.u-clickable {
	font-weight: 700;
	text-decoration: none;
	display: inline-block
}

.u-noboosting {
	max-height: 1000000px
}

.canon {
	background: #fff;
	width: 100%;
	height: auto
}

.center {
	display: block;
	margin: auto
}

.emojify {
	font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
	font-size: 2rem;
	vertical-align: middle
}

@media screen and (max-width:650px) {
	.nowrap {
		display: block;
		margin: 25px 0
	}
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: white;
	list-style: none;
	position: absolute;
	top: 0px;
	right: 15px;
}

.Banner-menu {
	display: flex;
}

@media (max-width: 768px) {
	.menu-toggle {
		display: list-item;
	}

	.Banner-menu {
		display: none;
		/* Completely hide by default */
		flex-direction: column;
		background: white;
		position: absolute;
		top: 47px;
		left: 0;
		width: 100%;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
		background-color: #262A39;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease-in-out;
		padding-bottom: 10px;
	}

	.Banner-menu.active {
		display: flex;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.Banner-menu li {
		padding: 2px;
		margin: 0px;
		line-height: 1;
	}
}