:root {
	--nav-vert-big: 5%;
	--nav-vert-medium: 15%;
	--nav-vert-small: 25%;
}
@media (max-aspect-ratio: 3/4) {
	:root {
		--nav-vert-medium: 17%;
		--nav-vert-small: 29%;
	}
}
@media (max-aspect-ratio: 2/3) {
	:root {
		--nav-vert-medium: 18%;
		--nav-vert-small: 31%;
	}
}
@media (max-aspect-ratio: 1/2) {
	:root {
		font-size: 3.5vw;
	}	
}
@media (min-aspect-ratio: 1/1) {
	:root {
		--nav-far-left: 25%;
		--nav-middle-left: 37%;
		--nav-middle-right: calc(100% - var(--nav-middle-left));
		--nav-far-right: calc(100% - var(--nav-far-left));
		--nav-top: 16.25%;
		--nav-center: 50%;
		--nav-bottom: calc(100% - var(--nav-top));
		}
	@media (max-width: 1600px) {
		:root {
			--nav-far-left: 20%;
		}
	}
	@media (max-width: 1250px) {
		:root {
			font-size: 1.2vw;
		}
	}
	@media (max-width: 1000px) {
		:root {
			--nav-far-left: 15%;
		}
	}
}

body.home {
	div {
		position: absolute;
		transform: translate(-50%,-50%);
		font-family: var(--font-heading-family);
		text-transform: uppercase;
		font-size: 3.58rem;
		&.dead a {
			color: var(--color-text-dead);
			pointer-events: none;
		}
		a {
			color: var(--color-text-primary);
			text-decoration: none;
			&:hover, &:active {
				color: var(--color-text-link);
			}
		}
	}
	.the-logo {
		width: 40vmin;
		max-width: 400px;
		height: auto;
		left: 50%;
		top: 50%;
		img {
			width:100%;
		}
	}
	div:nth-child(2) {
		top: var(--nav-vert-big);
		left: 50%;
		@media (min-aspect-ratio: 1/1) {
			top: var(--nav-top);
			left: var(--nav-middle-left);
		}
	}
	div:nth-child(3) {
		top: var(--nav-vert-medium);
		left: 50%;
		@media (min-aspect-ratio: 1/1) {
			top: var(--nav-top);
			left: var(--nav-middle-right);
		}
	}
	div:nth-child(4) {
		top: var(--nav-vert-small);
		left: 50%;
		@media (min-aspect-ratio: 1/1) {
			top: var(--nav-center);
			left: var(--nav-far-left);
		}
	}
	div:nth-child(5) {
		top: calc(100% - var(--nav-vert-small));
		left: 50%;
		@media (min-aspect-ratio: 1/1) {
			top: var(--nav-center);
			left: var(--nav-far-right);
		}
	}
	div:nth-child(6) {
		top: calc(100% - var(--nav-vert-medium));
		left: 50%;
		@media (min-aspect-ratio: 1/1) {
			top: 83.75%;
			left: var(--nav-middle-left);
		}
	}
	div:nth-child(7) {
		top: calc(100% - var(--nav-vert-big));
		left: 50%;
		@media (min-aspect-ratio: 1/1) {
			top: 83.75%;
			left: var(--nav-middle-right);
		}
	}
}