#indexOff {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 9;
	display: none; /* make visible when index is open */
}

#index {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	right: -50%; /* start off-screen */
	width: 50%;
	height: 100vh;
	z-index: 9;
	padding: 50px 0 50px 0;
	background-color: var(--background);
	border-left: 1px dashed var(--highlight);
	color: var(--text);
	transition: right 0.5s;
}

.indexOpen {
	right: 0%!important;
}

#indexBack {
	width: 50%;
	height: 50px;
	font-size: var(--standardText);
	line-height: 50px;
	font-weight: 400;
	margin-left: 21px;
}

#indexBack:hover {
	color: var(--highlight);
}

#indexList {
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	
}

.indexElement {
	display: flex;
	border-bottom: solid 1px var(--highlight);
	margin: 0 50px 0 50px;
	font-weight: 400;
	font-size: var(--tinyText);
	line-height: 50px;
	justify-content: space-between;
	padding: 0;
	transition: padding 0.5s, color 0.5s;
}

.indexElement:hover,
.indexElementHighlight {
	padding-left: 10px;
	color: var(--highlight);
}

.indexElementTitle,
.indexElementType {
	width: calc((100% / 2) - (50px / 2));
	padding-right: 5px;
}

.indexElementYear {
	text-align: right;
	width: 50px;
}