.top_img_carousel
{
	position: relative;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	/* Tutorial: https://developer.mozilla.org/en-US/docs/Web/CSS/length */
	overflow: hidden;
}

.carousel_track
{
	display: flex;
	width: 700vw;
	height: 100%;
	animation: slideShow 21s infinite;
	animation-timing-function: cubic-bezier(0.5, 0.2, 0.4, 1);
}

.carousel_slide
{
	position: relative;
	flex: 0 0 100vw;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/*
	Remarks:
		7 Slides * 3 Secs: 21s Total
		Each Slide: 3s (2.5s show + 0.5s transition)
		Each Segment = 100 / 7 ~= 14.2857%
*/
@keyframes slideShow
{
	0%       { transform: translateX(0); }
	11.904%  { transform: translateX(0); }

	14.285%  { transform: translateX(-100vw); }
	26.190%  { transform: translateX(-100vw); }

	28.571%  { transform: translateX(-200vw); }
	40.476%  { transform: translateX(-200vw); }

	42.857%  { transform: translateX(-300vw); }
	54.762%  { transform: translateX(-300vw); }

	57.142%  { transform: translateX(-400vw); }
	69.047%  { transform: translateX(-400vw); }

	71.428%  { transform: translateX(-500vw); }
	83.333%  { transform: translateX(-500vw); }

	85.714%  { transform: translateX(-600vw); }
	97.619%  { transform: translateX(-600vw); }

	100%     { transform: translateX(0); }
}

.on_carousel_img_desc
{
	position: absolute;
	top: 6rem;
	right: 2rem;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	max-width: 30vw;
	border-radius: 0.3rem;
	text-align: right;
}

.on_carousel_img_desc .fa-solid
{
	margin-left: 0.35rem;
}

.carousel_nav
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3rem;
	color: white;
	opacity: 0.7;
	z-index: 10;
	pointer-events: none;
}

.carousel_nav.left
{
	left: 1rem;
}

.carousel_nav.right
{
	right: 1rem;
}

.on_carousel_main_content
{
	position: absolute;
	bottom: 4rem;
	left: 5rem;
	color: #FFFFFF;
	font-size: 2rem;
	font-weight: bold;
	z-index: 10;
	text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.on_carousel_main_content span
{
	display: block;
}

#ocmc_text_line1
{
	font-size: 3rem;
}

#ocmc_text_line2
{
	font-size: 2rem;
	margin-bottom: 1rem;
}

/* Original: 1280px */
@media (max-width: 80em)
{
	.on_carousel_main_content
	{
		bottom: 1rem;
		left: 2rem;
	}
}