#tab-container {
	display: flex;
	align-items: flex-end;
	position: relative;
	max-width: 900px;
	margin-top: 60px;
	padding-left: 2%;
	font-weight: 500;
	--tab-height: 40px;
	--tab-slice-x: 40;
	--tab-slice-x-px: 40px;
	--tab-left-gap: 14px;
	--tab-selected-slice-y: 8;
	--tab-selected-height: 48px;
	--tab-selected-zindex: 100;
}

#tab-container a {
	text-decoration: none;
	color: black;
}

.tab {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: var(--tab-height);
	padding: 0px calc(var(--tab-slice-x-px) + 1%);
	border-image: url("../img/folder-tab.png");
	border-image-slice: 0% var(--tab-slice-x) var(--tab-selected-slice-y) fill;
	border-image-width: 0px var(--tab-slice-x-px);
	transition:
		height 0.1s ease,
		border-image-slice 0.1s ease;
}

.tab span {
	padding-top: calc((var(--tab-height) - 1em)/2);
}

.tab.selected {
	height: var(--tab-selected-height);
	border-image-slice: 0% var(--tab-slice-x) 0 fill;
	z-index: var(--tab-selected-zindex);
}

.tab:not(.tab.selected):hover {
	height: var(--tab-selected-height);
	border-image-slice: 0% var(--tab-slice-x) 0 fill;
}

.tab:first-child {
	margin-left: calc(-1 * var(--tab-left-gap));
}

.tab:not(.tab:first-child) {
	margin-left: calc(-1 * var(--tab-slice-x-px))
}

.tab:nth-child(1) { z-index: 11 }
.tab:nth-child(2) { z-index: 10 }
.tab:nth-child(3) { z-index: 9 }
.tab:nth-child(4) { z-index: 8 }
.tab:nth-child(5) { z-index: 7 }
.tab:nth-child(6) { z-index: 6 }
.tab:nth-child(7) { z-index: 5 }
.tab:nth-child(8) { z-index: 4 }
.tab:nth-child(9) { z-index: 3 }
.tab:nth-child(10) { z-index: 2 }