@media screen and (max-width: 800px) {
	body section:first-of-type {
		margin-top: 3rem;
	}

	nav {
		grid-area: nav;
	}

	nav ul {
		width: 100%;
		padding-top: 1rem;
		padding-bottom: 2rem;
		background-color: hsla(210, 12%, 10%, 0.95);
	}

	nav ul li {
		text-align: center;
	}

	nav ul li a {
		display: block;
		width: 100%;
		padding: 0.5rem;
	}

	nav a:hover {
		border: none;
	}

	header {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	header input[type="checkbox"] ~ nav {
		display: block;
		height: 0;
		overflow: hidden;
		transition: height 0.2s;
		pointer-events: auto;
	}

	header .menu-toggle {
		pointer-events:auto;
		grid-area: toggle;
		cursor: pointer;
		display: block;
		position: fixed;
		width: 3rem;
		height: 3rem;
		background-color: hsl(210, 12%, 10%);
		margin: 0.4rem 0;
	}

	header input[type="checkbox"]:checked ~ nav{
		height: 100%;
		background-color: hsla(210, 12%, 0%, 0.55);
	}

	header input[type="checkbox"] ~ .menu-toggle::after {
		content: '';
		display: block;
		width: 40%;
		height: 100%;
		background: linear-gradient(
			to bottom, 
			transparent 0%, transparent 30%, 
			white 30%, white 40%, 
			transparent 40%, transparent 45%, 
			white 45%, white 55%, 
			transparent 55%, transparent 60%, 
			white 60%, white 70%,
			transparent 70%, transparent 100%
		);
		margin: 0 auto;
		transition: transform 0.2s;
	}

	header input[type="checkbox"]:checked ~ .menu-toggle::after {
		background: linear-gradient(
			to bottom, 
			transparent 0%, transparent 40%, 
			white 40%, white 60%, 
			transparent 60%, transparent 100%
		), linear-gradient(
			to right, 
			transparent 0%, transparent 40%, 
			white 40%, white 60%, 
			transparent 60%, transparent 100%
		);
		background-size: 100% 1.3rem;
		background-position: center;
		background-repeat: no-repeat;
		transform: rotate(45deg);
	}

	header {
		margin-left: -10%;
		width: 100%;
	}

	header h1 {
		background-color: hsl(210, 12%, 10%);
		text-align: center;
		width: 100%;
		pointer-events:auto;
	}

	body {
		max-width: 80%;
		padding: 0 1rem;
		margin: 0 auto;
	}
}