:root {
	--color-1: #d3d3d3;
	--color-2: #f9f9f9;
	--color-3: #292929;
	--color-4: #b6b6b6;
}

* {
	box-sizing: border-box;
}

body {
	height: 100vh;
	background: linear-gradient(
		to right,
		var(--color-2) 0%,
		var(--color-2) 50%,
		var(--color-1) 50%,
		var(--color-1) 100%
	);
}

h1 {
	position: absolute;
	top: 20%;
	left: 38.9%;
	font-family: Times New Roman;
	font-size: 25vw;
	font-weight: 100;
	text-align: center;
	width: min-content;
	margin: auto;
	color: transparent;
	background: linear-gradient(
		90deg,
		var(--color-1) 50%,
		transparent 50%, transparent 50%,
		var(--color-2) 50%, var(--color-2) 100%,
		transparent 50%, transparent 50%
	);
	-webkit-background-clip: text;
}

nav {
	display: flex;
	flex-direction: row-reverse;
}

nav button {
	border-radius: 1.5rem;
	background: var(--color-1);
	border: 0.125rem solid var(--color-2);
	color: var(--color-2);
	width: 5rem;
	height: 3.125rem;
	margin: 20px;
}

main p {
	position: absolute;
	top: 10%;
	left: 15%;
	width: 15%;
	line-height: 1.5;
	font-size: 1.5rem;
	font-family: sans-serif;
	text-align: center;
}

.content1 {
	top: 10%;
	left: 15%;
	width: 15%;
	color: var(--color-4);
}

.content2 {
	top: 70%;
	left: 65%;
	width: 25%;
	color: var(--color-3);
}