@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400..800&display=swap');

:root {
	--primary: #f17f29;
	--background: #000000;
	--text: #ffffff;
	--logo: url('Bento Logo Dark.svg');
}

@media (prefers-color-scheme: light) {
	:root {
		--background: #ffffff;
		--text: #000000;
		--logo: url('Bento Logo Light.svg');
	}
}

body {
	padding: 1rem;
	margin: 0;

	background: var(--light);
	background: var(--background);
	font-family: Avenir, Sen, sans-serif;
	font-size: 1.25rem;

	line-height: 1rem;
}

p {
	max-width: 60rem;
	margin: 1rem auto;
	color: var(--text);
	line-height: 1.5;
	opacity: 0.8;
}

a {
	color: var(--primary);
}

pre {
	overflow: auto;
	width: min(100%, 60rem);
	margin: 0 auto;
	background: var(--background);
	color: var(--text);
	font-family: 'Courier New', Courier, monospace;
	font-size: 1rem;
	line-height: 1.25;
}

code {
	border-radius: 0.5rem;
}

.logo {
	display: block;
	height: 30vh;
	margin: 0 auto;
	margin-top: 10vh;
	background: var(--logo) no-repeat center;
}

.container {
	position: relative;
	overflow: auto;
	width: min(100%, 60rem);
	height: min(60dvh, 32rem);
	margin: 3rem auto;
	resize: both;
}

container:active {
	width: 0;
	height: 0;
}

.resize {
	position: absolute;
	right: 1.25rem;
	bottom: 1.75rem;
	color: var(--text);
	fill: var(--text);
	line-height: 1.25;
	text-align: right;
}

.resize svg {
	margin-bottom: -0.5rem;
	margin-left: 1rem;
	transform: rotate(60deg) scale(1.5);
}

#grid {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid var(--primary);
	color: var(--text);
}

#grid::after {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1rem;
	height: 1rem;

	background: var(--primary);
	content: '';
}

#grid .item {
	padding: 1rem;
	border: 1px solid var(--primary);
	font-size: 0.8rem;
	/* background: var(--primary); */
}