* {
	box-sizing: border-box;
}

body {
	margin: 1rem;
	font-family: sans-serif;
	font-size: 1rem;
}

/* Nav Button */
nav > button[aria-controls="menu"] {
	width: 3rem;
	height: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid currentColor;
	border-radius: 0.25rem;
	background-color: white;
	box-shadow: 0 2px 0 black;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.1s ease-out;
}

/* Hover */
@media (hover: hover) {
	nav > button:hover {
		background-color: #eee;
	}
	nav > button[aria-expanded="true"]:hover {
		background-color: #22f;
	}
}

/* Active */
nav > button:active {
	box-shadow: 0 0 0 black;
	transform: translateY(2px);
}

/* Expanded */
nav > button[aria-expanded="true"] {
	color: white;
	background-color: #00f;
	border-color: black;
}

/* Transforming ☰ to × */
nav > button[aria-expanded="true"] path:nth-child(1) {
	d: path("M4 20L20 4");
}
nav > button[aria-expanded="true"] path:nth-child(2) {
	display: none;
}
nav > button[aria-expanded="true"] path:nth-child(3) {
	d: path("M4 4L20 20");
}

/* Nav Menu */
nav > #menu {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	line-height: 1.5;
}

/* Show menu */
nav > button[aria-expanded="true"] + #menu {
	display: flex;
}

/* Hide an element visually without hiding it from screen readers */
.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}