:root{
	--color-1: #474747;
	--color-2: #f9f9f9;
}

*{
	box-sizing: border-box;
}

body{
	height: 100vh;
	background-image: linear-gradient(90deg, var(--color-1), var(--color-2));
}

aside {
	position: fixed;
	width: 10%;
	top: 0;
	left: 0;
	height: 100%;
	background-color: #fff;
}

aside p {
	font-family: sans-serif;
	font-size: 1.875rem;
	text-align: right;
}

nav {
	position: absolute;
	top: 30%;
	left: 9%;
	width: 3.125rem;
	height: 55%;
	background: #000;
	font-family: sans-serif;
	transition: 300ms ease;
}

.toggle-btn {
	position: absolute;
	width: 3.125rem;
	height: 100%;
	cursor: pointer;
	text-align: left;
	background-color: #000;
}

nav .toggle-btn span {
	position: absolute;
	width: 60%;
	height: 0.125rem;
	left: 0.625rem;
	background: #fff;
	transform: translateY(-50%);
	transition: 300ms ease;
}

nav .toggle-btn span:nth-child(1) {
	top: 2%;
}

nav .toggle-btn span:nth-child(2) {
	top: 4%;
}

nav .toggle-btn span:nth-child(3) {
	top: 6%;
}

nav .links a {
	display: none;
	margin-top: 3.125rem;
}

nav.active .toggle-btn span:nth-child(1) {
	top: 5%;
	transform: translateY(-50%) rotate(45deg);
}

nav.active .toggle-btn span:nth-child(2) {
	display: none;
}

nav.active .toggle-btn span:nth-child(3) {
	top: 5%;
	transform: translateY(-50%) rotate(-45deg);
}

nav.active {
	background: #000;
	height: 50%;
	width: 21.875rem;
}

nav .links li {
	margin-bottom: 1.875rem;
	font-size: 1.25rem;
}

nav.active .links li a {
	display: block;
	position: absolute;
	text-decoration: none;
	color: #fff;
	right: 1.25rem;
	width: 100%;
	height: 3.125rem;
	padding: 0.75rem;
	left: 0;
	text-align: right;
}

nav.active .links li a:hover {
	background: #cdcdcd;
}

h1 {
	position: absolute;
	top: 13%;
	left: 38%;
	font-family: Times New Roman;
	font-size: 25vw;
	font-weight: 100;
	text-align: center;
	width: min-content;
	margin: auto;
	color: transparent;
	text-shadow: 0 0 0 #33333333;
}

main p {
	position: absolute;
	top: 65%;
	left: 50%;
	width: 49%;
	height: 13.125rem;
	padding: 0.625rem;
	font-size: 1.375rem;
	background-color: #000;
	color: #fff;
	font-family: sans-serif;
	text-align: left;
}

footer {
	position: fixed;
	width: 9.375rem;
	height: 1.875rem;
	top: 93%;
	left: 8%;
	background-color: #999999;
	text-align: center;
}