/* #root-div {
	width: calc(
		  var(--item-size)    *  var(--item-count)
		+ var(--item-spacing) * (var(--item-count) - 1)
		+ var(--scroll-button-size) * 2
	);
} */

#top-bar-margin {
	margin: 0 var(--scroll-button-size) -2em;
}

#sections-container {
	margin: 0;

	width: 100%;
	max-width: none; 
	height: max-content;

	display: flex;
	justify-content: center;
	/* flex-direction: column; */
}

#sections-window {
	margin: 0;

	width: max-content;
	height: max-content;

	overflow: hidden;
}

.section {
	margin: 3em 0 2em 0;

	width: 100%;
	height: max-content;
}

.section-title {
	margin: 0 2.46em .75em;

	font-size: 1.5em;
	color: var(--primary-color);
}

.section-media {
	margin: 0;
	width: 100%;

	display: flex;
	flex-direction: row;
}

.media-arrow {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	flex-shrink: 0;

	width: var(--scroll-button-size);
	height: calc(var(--item-size) * var(--item-ratio));

	background-color: var(--primary-background-color);

	user-select: none;
}

.media-arrow:hover {
	background-color: var(--secondary-background-color);
}

.media-arrow-img {
	display: block;

	width: 30%;
}

.media-window {
	position: relative;

	width: var(--window-size);

	overflow: hidden;

	flex-shrink: 0;
}

.media-items {
	position: relative;
	left: 0em;

	display: flex;
	flex-direction: row;
	justify-content: flex-start;

	width: max-content;

	transition: left 0.6s;
}

.media-item {
	margin: 0;
	margin-right: var(--item-spacing);

	width: var(--item-size);
}

.media-frame {
	position: relative;

	width: var(--item-size);
	height: calc(var(--item-size) * var(--item-ratio));

	background-color: var(--secondary-background-color);
}

.media-embed {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--item-size);
	height: calc(var(--item-size) * var(--item-ratio));
	background-color: var(--primary-color);
}

.media-thumbnail {
	display: block;

	position: absolute;
	left: 0;
	top: 0;
	width: var(--item-size);
	height: calc(var(--item-size) * var(--item-ratio));

	background-color: var(--secondary-background-color);
	background-size: cover;
	background-position: center center;

	transition-property: opacity;
	transition-duration: 0.25s;
}

.media-play-frame {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--item-size);
	height: calc(var(--item-size) * var(--item-ratio));

	transition-property: opacity;
	transition-duration: 0.25s;
}

.media-play-button {
	position: absolute;
	left:  calc((var(--item-size)                     - var(--item-size) / 9.25) / 2);
	top:   calc((var(--item-size) * var(--item-ratio) - var(--item-size) / 9.25) / 1.78);
	width: calc(var(--item-size) / 9.25);
	display: block;
	pointer-events: none;

	transition-property: left, top, width;
	transition-duration: 0.1s;
}

.media-play-frame:hover > .media-play-button {
	filter: invert(100%);
}

.media-play-button-hover,
.media-loading {
	position: absolute;
	left:  calc((var(--item-size)                     - var(--item-size) / 16) / 2);
	top:   calc((var(--item-size) * var(--item-ratio) - var(--item-size) / 16) / 2);
	width: calc(var(--item-size) / 16);
	display: block;
	pointer-events: none;
}

.media-play-button-hover,
.media-loading {
	opacity: 0;
}

.media-play-button-hover {
	transition-property: opacity;
	transition-duration: 0.1s;
}


.media-play-frame:hover > .media-play-button-hover.active {
	opacity: 1;
}

@keyframes loading-rotation {
	from { transform: rotateZ(0deg  ); }
	to   { transform: rotateZ(360deg); }
}

.media-loading {
	animation-name: loading-rotation;
	animation-duration: 0.67s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.media-footing {
	margin-top: 0.9em;

	display: flex;
	flex-direction: row;
	justify-content: space-between;

	height: 1.25em;
}

.media-title {
	margin: 0;

	font-size: 1em;
	color: var(--primary-color);
}

.media-info {
	margin: 0;

	font-size: 1em;
	color: var(--secondary-color);

	cursor: default;
}

.media-info:hover {
	color: var(--hover-color);
}