:root {
	--top-color: #000;
	--bottom-color: #fff;
	--font: 'Jost', sans-serif;
	font-size: 16px;
}


html, body {
	margin: 0;
	padding: 0;
	font-family: var(--font);
	height: 100%;
	width: 100%;
}

body {
	background-color: var(--bottom-color);
	display: flex;
	flex-direction: column;
	transition: .2s;
}

header {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--top-color);
	color: #fff;
	clip-path: polygon(0 0, 0% 100%, 100% 0);
	top: 0;
	left: 0;
}

.header__content {
	margin-top: 10vh;
	margin-left: 3vw;;
	opacity: 0;
	animation: reveal 0.7s 0.3s forwards;
}

.middle {
	color: rgb(255, 255, 255);
	mix-blend-mode: difference;
	position: absolute;
	font-size: calc(100vw / 30);
	letter-spacing: calc(100vw / 90);
	white-space: nowrap;
	font-weight: 700;
	transform-origin: right;
	top: 14%;
	transition: .3s;
	animation: reveal 0.5s 0.7s forwards;
	opacity: 0;

}
@media (max-width: 1600px) {
	.middle {
		top: 15%
	}
}
@media (max-width: 900px) {
	.middle {
		top: 16%
	}
}

@keyframes reveal {
	100% {
		opacity: 1;
	}
}

nav {
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
	animation: reveal 0.7s 1.3s forwards;
	opacity: 0;
}

ul {
	list-style: none;
	margin-right: 3vw;
	margin-bottom: 10vh;
	text-align: right;
}

li {
	margin-bottom: 7vh;
	font-size: 1.4rem;
}

a {
	color: var(--top-color);
	text-decoration: none;
}

a:hover {
	text-decoration-line: underline;
	text-decoration-color: #f28500;
	text-decoration-style: solid;
	text-decoration-thickness: 2px;
}

h1 {
	max-width: 50vw;
}