:root {
	--background: #000;
	--text: #f2f0e8;
	--line: rgba(255, 255, 255, 0.85);

	--page-width: 760px;
	--side-width: 90px;

	--font: "Courier New", Courier, monospace;
}

/* =========================================================
	RESET
	========================================================= */
* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}

html {
	background: var(--background);
	scroll-behavior: smooth;
}

body {
	margin: 0 auto;
	background: var(--background);
	color: var(--text);
	font-family: var(--font);
	overflow-x: hidden;
}

img {
	position: absolute;
	max-width: 100%;
	height: auto;
}

.img--fadein {
	max-width: 100%;
	height: auto;
}


.scroll-indicator {
	margin-top: 70px;
	opacity: 0.5;
	animation: bounce 2s infinite;
}

.progress {
	position: fixed;
	
	top: 0;
	left: 0;
	
	width: 100%;
	height: 4px;
	
	z-index: 100;
	background: rgba(255,255,255,0.05);
}

.progress_bar {
	width: 0%;
	height: 100%;
	
	background: rgba(236, 236, 236, 0.5);
}

.segment {
	position: relative;
	height: 300vh;
	background: var(--background);
}

.segment_stage {
	position: sticky;
	top: 0;
	
	width: 100%;
	max-width: 1566px;
	margin: 0 auto;
	height: 100vh;
	
	display: flex;
	justify-content: center;
	align-items: flex-start;
	
	overflow: hidden;
	background: var(--background);
}

/* SEGMENT 1 */
#seg1 {
	height: 100vh;

	display: flex;
	align-items: center;
	justify-content: center;

}


.parallax-layer {
	position: absolute;
	margin: 0 auto;
	align-content: center;
	
	will-change: transform;
}

.parallax-layer--background {
	z-index: 1;
}

.parallax-layer--midground {
	z-index: 2;
}

.parallax-layer--foreground {
	z-index: 3;
}