body {
	background: white;
}

.track {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 10px;
	width: 100vw;
	height: 100vh;
	padding: 0;
	overflow-x: scroll;
	overflow-y: hidden;
	overscroll-behavior: none;
}

.slip {
	min-width: 90vh;
	height: 100vh;
	overflow: hidden;
	position: relative;
	background-size: cover;
}

.cover {
	width: 200vh;
	height: 100vh;
	position: absolute;
	transform: rotate(15deg);
	left: -30px;
	transition: 0.4s ease-in-out;
}

.top {
	bottom: 150vh;
}

.bot {
	top: 150vh;
}

.title {
	font-family: Avenir;
	font-weight: 900;
	font-size: 1.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 90vh;
	height: 100vh;
	color: white;
	position: absolute;
	z-index: 4;
	transition: 0.4s ease-in-out;
	top: 100vh;
	position: absolute;
	text-decoration: underline;
}

.slip:hover .top {
	bottom: 50vh;
}

.slip:hover .bot {
	top: 50vh;
}

.slip:hover .title {
	top: 0vh;
}

.slip:active .title {
	transition: 0s;
	transform: scale(0.9);
}

/* === HANDLE === */
::-webkit-scrollbar-thumb {
	background: var(--Active);
}

/* === HANDLE HOVERSTATE === */
::-webkit-scrollbar-thumb:hover {
	background: #ffd69c;
}

/* === HANDLE ACTIVE === */
::-webkit-scrollbar-thumb:active {
	background: white;
}