html::before {
	content: '';
	display: block;
	width: 100%;
	height: 1rem;
}

html::before {
	background:	linear-gradient(90deg,#e22016, #e22016 16.667%,#f28917 16.667%, #f28917 33.333%,#efe524 33.333%, #efe524 50%,#78b82a 50%, #78b82a 66.667%,#2c58a4 66.667%, #2c58a4 83.333%,#6d2380 83.333%, #6d2380)
}


html.draft::before {
	background: hsl(from yellow h 50% 77%);
}

html.staging::before {
	background: hsl(from red h 50% 77%);
}

:root {
	color-scheme: light dark;
}

html {
	background-color: light-dark(#eee, #111);
	color: light-dark(#000, #fff);
	font-family: sans-serif;
}

body {
	margin: 0;
}

body > header {
	position: sticky;
	top: 0;
	border-bottom: 3px solid;
	border-color: #7f7f7f;
	/* border-image: linear-gradient(90deg, #5BCEFA, #5BCEFA 20%, #F5A9B8 20%, #F5A9B8 40%, white 40%, white 60%, #F5A9B8 60%, #F5A9B8 80%, #5BCEFA 80%) 1; */
	/* border-image: linear-gradient(90deg, hsl(0, 50%, 50%), hsl(30, 50%, 50%), hsl(60, 50%, 50%), hsl(90, 50%, 50%), hsl(120, 50%, 50%), hsl(150, 50%, 50%), hsl(180, 50%, 50%), hsl(210, 50%, 50%), hsl(240, 50%, 50%), hsl(270, 50%, 50%), hsl(300, 50%, 50%), hsl(330, 50%, 50%), hsl(360, 50%, 50%)) 1; */
	background-color: light-dark(#eee, #111);
}

body > header nav a:visited {
	color: inherit;
}

body > header nav a {
	text-decoration: none;
	color: inherit;
	font-weight: bold;
}

body > header nav a:hover {
	text-decoration: underline;
}

body > header > .container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1em;
	padding: 1em 0.5em 1em 0.5em;
}

#logo {
	margin: 0;
	display: block;
	font-weight: bold;
	font-size: 1.5rem;
	padding-right: 0.5rem;
}

#logo a {
	display: block;
	text-decoration: none;
	color: inherit;
}

#logo img {
	height: 2em;
	width: auto;
	vertical-align: middle;
	margin-right: 20px;
	aspect-ratio: 447/314;
}

body > header nav ul {
	column-gap: 1em;
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
}

body > header nav li {
	display: block;
}

body > header .active {
	background: light-dark(#ddd, #222);
	border-radius: 5px;
}

body > header nav li > a {
	display: block;
	padding: 0.5rem;
}

body > footer .container {
	border-top: 1px solid #7f7f7f;
	margin-top: 2em;
	padding-bottom: 1em;
	padding-top: 2em;
}

body > footer nav ul {
	display: flex;
	column-gap: 1em;
	list-style: none;
	margin: 0;
	padding: 0;
}

body > main {
	padding-left: 1rem;
	padding-right: 1rem;
}

body > footer {
	clear: both;
	padding-left: 1em;
	padding-right: 1em;
}

footer.aux {
	text-align: right;
	font-size: 0.7rem;
}

#menu-button {
	display: none;

	background: light-dark(#ddd, #222);
	cursor: pointer;
	border: none;
	height: 2.3rem;
	padding-bottom: 0.15rem;
	padding-top: 0.15rem;
	aspect-ratio: 1/1;
	font-size: 2rem;
}

.push {
	margin-left: auto;
}

body > main, .container {
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
}

body > main.wide, .container.wide {
	max-width: 96rem;
}

figure {
	max-width: 16rem;
	float: right;
}

iframe.calendar {
	width: 100%;
	border: 0;
	margin: auto;
	display: block;
	min-height: 1125px;
}

@media screen and (max-width: 48rem) {
	#menu-button {
		display: block;
	}

	body > header nav {
		display: none;
		width: 100%;
		height: 100%;
		margin-top: 0.5em;
	}

	body > header .container {
		padding: 0.5em;
	}

	body > header nav[data-open] {
		display: block;
	}

	body > header nav ul {
		display: block;
	}

	#logo {
		height: 1em;
	}

	#logo img {
		vertical-align: top;
		height: 1.3em;
	}

	#room-state {
		display: none;
	}
}

@media screen and (max-width: 32rem) {
	figure {
		max-width: unset;
		float: none;
	}
}