:root {
	--home-page-title-size: 6.25;
	--home-page-paragraph-size: 1.85;
	--home-page-gap: 1.5;
	
	--home-page-button-gap: 1.5;
	--home-page-button-width: 3.5;
	--home-page-button-height: 5.75;
	--home-page-button-radius: 1.75;
	--home-page-button-size: 1.5;
	
	--home-page-letter-spacing: 0.125;
}

#landing {
	display: block !important;
	background: rgb(0, 0, 0);

	position: relative;
	overflow: hidden;
	
	height: calc(100vh - var(--header-size, 0vh));
}

#landing::before {
	content: "";

	background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%);

	position: absolute;

	width: 200vw;
	height: 200vh;

	top: 0;
	left: 0;

	z-index: 1;
}

#landing > .backgrounds {
    opacity: 0.75;
    position: absolute;
    
    left: 0;
    bottom: 0;
    
    width: 100%;
	height: 100%;
}

#landing > .backgrounds > .background {
    --local-position: center;
    
    opacity: 0;
    position: absolute;
    
    -o-object-fit: cover;
	object-fit: cover;
	
	-o-object-position: center var(--local-position);
	object-position: center var(--local-position);
	
	left: 0;
	bottom: 0;
	
	width: 100%;
	height: 100%;
	
	z-index: 4;
	transition: opacity 1500ms ease-in-out;
}

#landing > .backgrounds.parallax > .background {
    -o-object-position: center calc(var(--local-position) + var(--parallax-offset, 0vh));
	object-position: center calc(var(--local-position) + var(--parallax-offset, 0vh));
	will-change: -o-object-position, object-position;
}

#landing > .backgrounds > .background.active {
    opacity: 1;
    z-index: 2;
}

#landing > .content {
    display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	
	position: absolute;
	
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	padding: 0 var(--page-content-padding);
	gap: calc(var(--base-page-size) * var(--home-page-gap));

	opacity: 1;
	transform: translateY(0);
	
    animation: pop-up-animation 1s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    z-index: 8;
}

#landing > .content > h1,
#landing > .content > h2,
#landing > .content > h3,
#landing > .content span,
#landing > .content > p {
	text-shadow: 0 0 calc(var(--base-page-size) * var(--home-page-title-size)) rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	z-index: 5;
}

#landing > .content > h1,
#landing > .content > h1 > span {
	color: rgb(var(--active-color));
	font-weight: var(--font-weight-black);
	font-size: calc(var(--base-page-size) * var(--home-page-title-size));
	letter-spacing: calc(var(--base-page-size) * var(--home-page-title-size) * var(--home-page-letter-spacing));
	line-height: 100%;
}

#landing > .content > h3 {
	color: rgb(255, 255, 255);
	font-weight: var(--font-weight-regular);
	font-size: calc(var(--base-page-size) * var(--home-page-title-size) / 4);
	letter-spacing: calc(var(--base-page-size) * var(--home-page-title-size) * var(--home-page-letter-spacing) / 2);
	opacity: 0.75;
}

#landing > .content > h2 {
	color: rgb(255, 255, 255);
	font-weight: var(--font-weight-bold);
	font-size: calc(var(--base-page-size) * var(--home-page-title-size));
	letter-spacing: calc(var(--base-page-size) * var(--home-page-title-size) * var(--home-page-letter-spacing) / 2);
	line-height: 75%;
}

#landing > .content > h2 span {
	color: rgb(var(--active-color));
	font-weight: var(--font-weight-bold);
	font-size: calc(var(--base-page-size) * var(--home-page-title-size));
	letter-spacing: calc(var(--base-page-size) * var(--home-page-title-size) * var(--home-page-letter-spacing) / 2);
	line-height: 75%;
}

#landing > .content > p {
	color: rgba(255, 255, 255, 0.75);
	font-weight: var(--font-weight-light);
	font-size: calc(var(--base-page-size) * var(--home-page-paragraph-size));
	letter-spacing: calc(var(--base-page-size) * var(--home-page-paragraph-size) * var(--home-page-letter-spacing));
	line-height: 125%;
}

#landing > .content > p span {
	color: rgb(var(--active-color));
	font-weight: var(--font-weight-medium);
	font-size: calc(var(--base-page-size) * var(--home-page-paragraph-size));
	letter-spacing: calc(var(--base-page-size) * var(--home-page-paragraph-size) * var(--home-page-letter-spacing));
}

#landing > .content > .row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	
	gap: calc(var(--base-page-size) * var(--home-page-button-gap));
	margin-top: calc(var(--base-page-size) * var(--home-page-gap) / 2);
}

#landing > .content a {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 0.05);

	border: calc(1px / var(--zoom-multiplier)) solid rgba(255, 255, 255, 0.25);
	border-radius: calc(var(--base-page-size) * var(--home-page-button-radius));
	
	font-weight: var(--font-weight-medium);
	font-size: calc(var(--base-page-size) * var(--home-page-button-size));
	
	text-align: center;
	text-transform: uppercase;
	letter-spacing: calc(var(--base-page-size) * var(--home-page-button-size) * var(--home-page-letter-spacing));
	white-space: nowrap;

	height: calc(var(--base-page-size) * var(--home-page-button-height));
	padding: 0 calc(var(--base-page-size) * var(--home-page-button-width));

	z-index: 5;
	transition: color var(--transition-medium),
		background-color var(--transition-medium),
		border-color var(--transition-medium),
		box-shadow var(--transition-medium);
}

#landing > .content a.active {
	color: rgb(0, 0, 0);
	border-color: rgb(255, 255, 255);
	background-color: rgb(255, 255, 255);
}

#landing > .content a:hover {
	color: rgb(0, 0, 0);
	border-color: rgb(var(--active-color));
	background-color: rgb(var(--active-color));
	box-shadow: 0 0 calc(var(--base-page-size) * 2.5) rgba(var(--active-color), 0.25);
}

@media (max-width: 100vh) {
	:root {
    	--home-page-title-size: 11.5;
    	--home-page-paragraph-size: 3.75;
    	--home-page-gap: 2.5;
    	
    	--home-page-button-gap: 2.5;
    	--home-page-button-width: 9.5;
    	--home-page-button-height: 13.5;
    	--home-page-button-radius: 5;
    	--home-page-button-size: 3.5;
    	
    	--home-page-letter-spacing: 0.125;
	}
	
	#landing > .content {
	    align-items: center;
	    padding: 0;
	}
	
	#landing > .backgrounds {
        --parallax-offset: 66.66% !important;
        opacity: 0.25;
    }

	#landing > .content > h1,
	#landing > .content > p {
		text-align: center;
		min-width: 100%;
		max-width: 100%;
		width: 100%;
    }

	#landing > .content > .row {
		justify-content: center;
		width: 100%;
	}
}