body {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 1rem;
	/* overflow: hidden; */
	color: #ccc;
	background-color: #222;
	height: 100dvh;
}

	nav {
		display: flex;
		flex-direction: row;
		/* background-color: #222;*/
		z-index: 1;
		min-height: 3rem;
		align-items: center;
		justify-content: center; /*space-between;*/
		padding: 0 1rem;
		flex-basis: 3rem;

		background: linear-gradient(to bottom, #1116, #000f), repeating-linear-gradient(
			-45deg,
			#000 0,
			#000 4px,
			#111 4px,
			#111 8px
		);

	}

		h1 {
			display: flex;
			flex-direction: row;
			margin: 0;
			padding: 0;
		}

			h1 a {
				display: flex;
				flex-direction: row;
				gap: .5em;
				align-items: center;
				text-decoration: none;
			}

			h1 a img[src*=flowers] {
				height: 2.5rem;
			}

			h1 a img[src*=veganguide] {
				height: 2rem;
			}

			h1 a span {
				display: none;
			}

		nav search {
			display: flex;
			flex-direction: row;
			align-items: baseline;
			gap: 1em;
		}

		nav search button {
			border: 1px solid #333;
			background-color: #3b0c;
			color: #fff;
			padding: .5rem 1rem;
			font-size: 1rem;
			border-radius: 1rem;
			cursor: pointer;
		}

		nav form {}

			nav form input {
				border: 1px solid #333;
				background-color: #222c;
				color: #fff;
				padding: .5rem 1rem;
				font-size: 1rem;
				border-radius: 1rem;
				width: 8rem;
			}

	main {
		display: flex;
		flex-grow: 1;
		min-height: calc(100dvh - 3rem);
		height: 100dvh;
		background-color: #222;
		flex-direction: column;
	}

	@media (orientation: landscape) {
		main {
			flex-direction: row;
		}
		#map {
			height: 100%;
			width: 100vw;
			min-height: calc(100vh - 3rem);
			order: 2;
		}
		panel {
			order: 1;
			min-height: calc(100vh - 3rem);
			width: 35vw;
		}

		content {
			height: 100vh;
		}
	}

	@media (orientation: portrait) {
		main { flex-direction: column; }

		#map {
			height: min(100vw, calc(50vh - 3rem));
			flex: 0 0 auto;
		}

		panel {
			flex: 0 0 auto;
			height: max(calc(100vh - (100vw + 3rem)), calc(50vh - 3rem));
		}

		content {
			height: max(calc(100vh - (100vw + 3rem)), calc(50vh - 3rem));
		}

	}

	#map {
		display: block;
	}

	panel {
		display: flex;
		flex-direction: column;
		background-color: #222;
		color: #ccc;
		padding: 0;
	}

	content {
		display: flex;
		flex-direction: column;
		padding: 2rem 1rem;
		gap: 1rem;
		overflow-y: auto;
		line-height: 1.4em;
	}

	content a {
		text-decoration: none;
		color: #0d0;
	}

	legal {
		margin-top: auto;
		display: flex;
		flex-direction: column;
		gap: .2em;
		padding: .5rem;
		background-color: #191919;
		font-size: .7rem;
		border-radius: .25rem;
	}

	legal p {
		color: #555;
		margin: 0 0;
	}

	legal p a {
		color: #777;
	}

	h2, h3 {
		margin: 0;
		padding: 0;
		line-height: 1.4em;
		color: #ddd;
	}

	p {
		margin: .5em 0;
		padding: 0;
		line-height: 1.4em;
		color: #bbb;
	}

	p[label] {}

	img[icon] {
		display: inline-block;
		color: #fff;
		height: .7em;
		margin-bottom: -.1em;
		padding: .15em;
		background-color: #2c0;
		border-radius: .2em;
		/* filter: invert(1);*/
	}

	h2[closed] span {
		color: #f12;
		text-decoration: line-through;
	}

	h2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: .5em;
	}

	section {
		display: flex;
		flex-direction: column;
		margin: .5em 0;
	}

	table[openingHours] {
		min-width: 300px;
		margin: .5em 0;
		padding: 0;
		background-color: #333;
		border-radius: .5rem;
		border-width: 0;
	}

	table[openingHours] tbody {
		margin: 0;
		padding: 0;
	}

	table[openingHours] tr:nth-child(even) {
		background-color: #222;
		padding: 0;
		margin: 0;
	}

	table[openingHours] td {
		line-height: 1.6em;
		padding: .2em .3em;
	}

	action {
		margin: 1rem 0;
		padding: 1rem;
		background-color: #333;
		border-radius: 1rem;
	}

	action p {
		margin: .5em 0 0;
	}

	tag {
		display: inline-block;
		font-size: 1rem;
		min-height: 1.2em;
		line-height: 1.2em;
		color: #333;
		padding: .2em .5em;
		margin: .15em 0;
		border-radius: .3em;
		text-align: center;
	}

	tag[only] {
		background-color: #0e3;
	}

	tag[yes] {
		background-color: #0d7;
	}

	tag[limited] {
		background-color: #bd8;
	}

	tag[no] {
		background-color: #f38;
	}
