:root {
	--pageWidth: 1200px;
	--slimWidth: 1200px;
	--bodyMargin: 10px;
	--top: 0px;
	--bottom: 0px;
}

* {
	box-sizing: border-box;
}

html {
	overflow-y: scroll;
	font-size: 16px;
}
body {
	display: grid;
	min-height: 100svh;
	margin: 0;
	grid-template-rows: auto auto 1fr auto;
	font-family: system-ui, sans-serif;
	padding-top: var(--top);
}
body.menu {
	position: fixed;
}

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100vw - var(--scrollbar-width));
	height: 100vh;
	z-index: 10000;
	pointer-events: none;
	transition: all 200ms linear;
}

.menu #overlay, .menu #mini-menu {
	display: unset;
	pointer-events: unset;
	transform: unset;
}
.menu #overlay {
	background-color: #0003;
}
#sub-menu {
	position: absolute;
	display: none;
}
#sub-menu ul {
	background-color: var(--ss-bg);
	list-style-type: none;
	padding: 0;
}

main {
	container-type: inline-size;
}

bread-crumbs {
	--icon-gap: 1px;
	--item-gap: 10px;
	max-width: min(calc(100vw - var(--scrollbar-width)), var(--pageWidth));
    margin: auto;
}
bread-crumbs::part(a) {
	text-decoration: none;
	color: #333;
}
bread-crumbs {
	margin: 6px auto;
	font-size: .8rem;
	color: #333;
}
.home bread-crumbs {
	display: none;
}

img {
	max-width: min(calc(100vw - var(--scrollbar-width)), 100%);
}