Помогите найти ошибку. Почему "бургер" не работает?

HTML

Hi, BRO
<body>
	<header>
		<div class="title">
			<h1>WOMBAT COFFEE ROASTERS</h1>
		</div>
		<div class="slogan">We love coffee</div>
	</header>
	<nav class="menu" id="main-menu">
		<button class="menu-toggle" id="toggle-menu">close</button>
		<div class="menu-dropdown">
			<ul class="nav-menu">
				<li><a href="/about.html">About</a></li>
				<li><a href="/shop.html">Shop</a></li>
				<li><a href="/menu.html">Menu</a></li>
				<li><a href="/brew.html">Brew</a></li>
			</ul>
		</div>
	</nav>
	<aside class="hero" id="hero">
		Welcome to Wombat Coffee Roasters! We are passionate about our craft, striving to bring you the best hand-crafted coffee in the city.
	</aside>

	<main id="main">
		<div class="row">
			<section class="column">
				<h2 class="subtitle">Signal-origin</h2>
				<p>We have built partnerships with small farms around the world to hand-select beans at the peak of season. We then carefully roast in <a href="batch">small batches</a> to maximize their potential</p>
			</section>
			<section class="column">
				<h2 class="subtitle">Blends</h2>
				<p>Our tasters have put together a selection of carefully balanced blends. Our famous <a href="house">house blend</a> is available years round</p>
			</section>
			<section class="column">
				<h2 class="subtitle">Brewing Equipment</h2>
				<p>We offer our favorite kettles, French presses, and pour-over cones. Come to one of our <a href="house">brewing classes</a> to learn how to brew the perfect pour-over cup.</p>
			</section>
		</div>
	</main>
<script type="text/javascript">
	(function() {
		var button = document.getElementById('toggle-menu');
		button.addEventListener('click', function(event) {
			event.preventDefault();
			var menu = document.getElementById('main-menu');
			menu.classList.toggle('is-open');
		});
	})();
</script>

</body>
CSS
:root{
	box-sizing: border-box;
	font-size: calc(1vw + 0.6em);
}

body{
	margin: 0;
	font-family: Helvetica, Arial, sans-serif;
}
/*********Ссылки*****************/
a:link{
	color: #1476bb;
	font-weight: bold;
	text-decoration: none;
}

a:visited{
	color: #141414bb;
}
a:hover{
	text-decoration: underline;
}
a:active{
	color: #b45514;
}
/********Шапка*************/
header{
	padding: 0.5em 1em;
	background: #fff;
}
.title > h1{
	color: #333;
	text-transform: uppercase;
	font-size: 1.5em;
	margin: .25em 0;
}
.slogan{
	color: #888;
	font-size: .8em;
	margin: 0;
}
/********ASIDE*************/
.hero{
	padding: 2em 1.5em;
	text-align: center;
	background: url(img_2077.1800x1200w.jpg);
	background-size: 100%;
	color: #fff;
	text-shadow: .1em .1em .3em #000;
}
/********MAIN*************/
main{
	padding: 1.2em;
}
.subtitle{
	margin-top: 1.2em;
	margin-bottom: 1.2em;
	font-size: .8em;
	text-transform: uppercase;
}
/********MENU*************/
.menu{
	position: relative;
}
.menu-toggle{
	position: absolute;
	top: -1.4em;
	right: .1em;
	border: 0;
	background-color: transparent;
	font-size: 3.1em;
	width: 1em;
	height: 1em;
	line-height: .3em;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 5em;
}
.menu-toggle::after{
	position: absolute;
	top: .5em;
	left: .1em;
	display: block;
	content: "\2261";
	text-indent: 0;
}
.menu-dropdown{
	display: none;
	position: absolute;
	right: 0;
	left: 0;
	margin: 0;
}
.menu .is-open .menu-dropdown{
	display: block;
}
.nav-menu{
	margin: 0;
	padding: 0;
	border: 1px solid #ccc;
	background: #000;
	color: #fff;
}

.nav-menu > li + li{
	border-top: 1px solid #ccc;

}
.nav-menu > li > a{
	display: block;
	padding: .7em 1em;
	color: #fff;
	font-weight: normal;
}

@media (min-width: 560px){
	.title > h1{
		font-size: 2.2rem;
	}
	.hero{
		padding: 5em 3em;
		font-size: 1.3rem;
	}
	.menu-toggle{
		display: none;
	}
	.menu-dropdown{
		display: block;
		position: static;
	}
	.nav-menu{
		display: flex;
		border: 0;
		padding: 0 1em;
		list-style-type: none;
	}
	.nav-menu > li{
		flex: 1;
	}
	.nav-menu > li +li{
		border: 0;
	}
	.nav-menu > li >a{
		padding: .3em;
		text-align: center;
	}
	.row{
		display: flex;
		margin-left: -.75em;
		margin-right: -.75em;
	}
	.column{
		flex: 1;
		margin-left: .75em;
		margin-right: .75em;
	}
}`*`Текст "как есть" (без применения форматирования)`*`