* {
	box-sizing: border-box;
}

body {
	--activeColor: white;
}

.d-grid {
	display: grid;
}

.row1-col1 {
	display: grid;
	grid-column: 1;
	grid-row: 1;
}

.bg-mid-brown {
	background-color: #ff9900;
}

.bg-red {
	background-color: red;
}

.bg-lime {
	background-color: #aee43d;
}

.nav__list .nav__link span {
	position: absolute;
	top: 0;
	height: 123%;
	width: 2px;
	background: rgba(255, 255, 255, .6);
	color: rgba(255, 255, 255, 0);
}

	.nav__list .nav__link span:hover {
		width: 5px;
	}

	.nav__list .nav__link span.active {
		height: 200%;
		width: 5px;
		background: rgb(255, 255, 255);
	}

.container {
	width: 100%;
	max-width: 80rem;
	padding: 0 max(5vw, 1rem);
	transform-style: perspective-3d;
	perspective: 900px;
}

.background p {
	color: white;
	font-weight: bold;
	margin: auto;
	font-size: clamp(10px, 10px + 1vw, 23px);
}

.background > div {
	display: grid;
}

#marker-parent, .background {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 50;
	height: 3.5rem;
}

.marker {
	position: absolute;
	top: 1rem;
	width: 1.5rem;
	height: 1.5rem;
	transform: translate3d(-50%, -50%, 0);
	background: var(--activeColor);
	border-radius: 100%;
	z-index: 2000;
	margin-top: -1rem;
}

.nav__track {
	position: relative;
	min-width: max(200rem, 200%);
	padding: .5rem max(100rem, 100%) 0 0;
	/*padding: 1.5rem max(100rem, 100%) 0 0;*/
	height: 6rem;
}

.nav__list {
	list-style: none;
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

	.nav__list > li {
		position: absolute;
	}

.nav__link {
	position: relative;
	display: grid;
	padding: 1.5rem 0rem 0.5rem;
	text-align: center;
	color: inherit;
	text-decoration: none;
	z-index: 1;
	transition: color 150ms;
}
/*#iframe-holder {
	animation: transitionIn 0.75s;
}*/
@keyframes transitionIn {
	from{
		opacity: 0;
		transform: rotateX(-10deg);
	}
	to{
		opacity: 1;
		transform: rotateX(0);
	}

}