.series {
	background-color: var(--foreground);
	padding: 10px;
	margin-top: 10px;
	border-radius: 5px;
}

.series>a {
	font-size: 1.2em;
	text-decoration: none;
	color: var(--text);
}

.series-authors {
	color: var(--text-alternative);
}

.series-videos {
	display: flex;
	flex-direction: row;
	overflow-x: scroll;
	gap: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.video {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	border: 1px solid var(gray);
	border-radius: 5px;
	max-width: min-content;
}

.video>img {
	width: 300px;
	/* height: 168.75px; */
	aspect-ratio: 16/9;
	background-color: var(--background);
	height: auto;
	border-radius: 5px;
}

.video>span {
	color: var(--text-alternative);
}

.player {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 5px;

	background-color: var(--foreground);
	max-width: max-content;
	padding: 10px;
	border-radius: 5px;
}

.player>video {
	max-width: 100%;
}

.player-title {
	font-size: 1.2em;
	font-weight: bold;
}

.player-author {
	color: var(--text-alternative);
}

.video-metadata {
	width: 100%;

}

.video-metadata>:first-child {
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 10px;
}

.video-metadata-table {
	display: grid;
	grid-template-columns: max-content auto;
	gap: 5px;
	width: 100%;
	margin-top: 5px;
}

.video-metadata-table>* {
	align-self: center;
}

.video-metadata-table>span {
	font-weight: bold;
}

.video-metadata>button {
	margin-top: 5px;
}