ハンバーガーメニューをクリックしても反応しない

#似たような質問が何件かあったので試してみたんですけどうまくいかなかったので教えてください
##質問内容は題名と同じでサイトの画面を小さくした際にハンバーガーメニューのアイコン（横線三本）は表示されるんですけどクリックしても反応しないのはなぜなんでしょうか？　エラーはありません

html
1<!DOCTYPE html>
2<html lang="js">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7	<img src="img.jpg" alt="画像">
8<link rel="stylesheet" href="style.css">
9</head>
10<body>
11	<header>
12		<h1>
13			<a href="">題名</a>
14		</h1>
15		<nav class="pc-nav">
16			<ul>
17				<li><a href="#">A</a></li>
18				<li><a href="#">B</a></li>
19				<li><a href="#">C</a></li>
20				<li><a href="#">D</a></li>
21			</ul>
22		</nav>
23		<nav class="sp-nav">
24			<ul>
25				<li><a href="#">A</a></li>
26				<li><a href="#">B</a></li>
27				<li><a href="#">C</a></li>
28				<li><a href="#">D</a></li>
29				<li class="close"><span>閉じる</span></li>
30			</ul>
31		</nav>
32		<div id="hamburger">
33			<span></span>
34		</div>
35	</header>
36	</div>
37</body>
38</html>

css
1@charset "utf-8";
2* {
3	box-sizing: border-box;
4}
5body {
6	margin: 0;
7	padding: 0;
8	height: 100%;
9	background-color: #e6e6e6;
10	letter-spacing : 0.2em;
11}
12header {
13	padding: 30px 4% 10px;
14	position: fixed;
15	top: 0;
16	width: 100%;
17	background-color: transparent;
18	display: flex;
19	align-items: center;
20}
21h1 {
22	margin: 0; padding: 0;
23	font-size: 40px;
24}
25a {	
26	text-decoration: none;
27	color: #fff;
28}
29nav {
30	margin: 0 0 0 auto;
31}
32ul {
33	list-style: none;
34	margin: 0;
35	display: flex;
36}
37li {
38	margin: 0 15px 0 15px;
39	font-size: 40px;
40}
41
42.sp-nav {
43	display: none;
44}
45@media screen and (Max-width: 900px) {
46	/*ハンバーガーメニュー*/
47	.pc-nav {
48		display: none;
49	}
50	.sp-nav {
51		z-index: 1;
52		position: fixed;
53		top: 0;
54		left: 0;
55		width: 100%;
56		height: 100vh;
57		display: block;
58		width: 100%;
59		background: rgba(0, 0, 0, .8);
60		opacity: 0;
61		transform: translateY(-100%);
62		transition: all .2s ease-in-out;
63	}
64	#hamburger {
65		position: relative;
66		display: block;
67		width: 30px;
68		height: 25px;
69		margin: 0 0 0 auto;
70	}
71	#hamburger span {
72		position: absolute;
73		top: 50%;
74		left: 0;
75		display: block;
76		width: 100%;
77		height: 2px;
78		background-color: #fff;
79		transform: translateY(-50%);
80	}
81	#hamburger::before {
82		content: '';
83		display: block;
84		position: absolute;
85		top: 0;
86		left: 0;
87		width: 100%;
88		height: 2px;
89		background-color: rgb(255, 251, 251);
90	}
91	#hamburger::after {
92		content: '';
93		display: block;
94		position: absolute;
95		bottom: 0;
96		left: 0;
97		width: 70%;
98		height: 2px;
99		background-color: #fff;
100	}
101	
102	.sp-nav ul {
103		padding: 0;
104		display: flex;
105		flex-direction: column;
106		justify-content: center;
107		align-items: center;
108		height: 100%;
109	}
110	.sp-nav li {
111		margin: 0;
112		padding: 0;
113	}
114	.sp-nav li span {
115		font-size: 15px;
116		color: #fff;
117	}
118	.sp-nav li a, .sp-nav li span {
119		display: block;
120		padding: 20px 0;
121	}