* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	border: none;
}
html,
body {
	overscroll-behavior: none;
}
body {
	height: 100svh;
	max-height: 100svh;
	display: grid;
	grid-template-rows: 1fr 9fr;
}
header {
	width: 100%;
	height: 100%;
	background-color: #333;
	display: flex;
	justify-content: center;
	align-items: center;

	nav {
		margin-right: auto;
		height: 100%;
		display: flex;
		gap: 1rem;
		padding-inline: 1rem;

		button {
			background-color: #333;
			color: #fff;
			height: 100%;
		}
	}
	i {
		color: #fff;
		margin-block: auto;
		padding-right: 0.5rem;
	}
}
main {
	display: grid;
	height: 100%;
	width: 100%;
	max-height: 100%;
	grid-template-columns: 3fr 1fr;
}
canvas {
	width: 100%;
	height: 100%;
	max-height: 100%;
}
menu {
	width: 100%;
	height: fit-content;
	overflow-y: scroll;
	background-color: #fff;
	display: grid;
	gap: 0.5rem;
	padding: 0.5rem;
	grid-template-columns: repeat(2, 1fr);
	max-height: calc(100svh * 0.9);

	button {
		width: 100%;
		aspect-ratio: 1/1;
		height: fit-content;

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			mix-blend-mode: multiply;
		}
	}
}