#main-container /*holds the bg image which is set in js*/
{
	position: absolute;
	transition: var(--fade-in);
	/* display: flex; justify-content: center; align-items: center; */
}

@font-face 
{
	font-family: "Verzierte_Favorite";
	src: url("../../fonts/Verzierte_Favorite.ttf");
}

#credits-container
{
	position: absolute; z-index: 11;
	width: 100vw; height: 100vh; font-family: var(--mono-font);
	display: flex; justify-content: center; align-items: center;
	flex-direction: column;
	overflow-y: scroll;
}

#title 
{
	font-family: "Verzierte_Favorite", "Courier New", monospace;
	font-size: 90px;
	padding: 7%;
	margin-top: 3%;
	text-shadow: var(--text-glow-shadow);
	transition: var(--fade-in);
	user-select: none;
}

/*mobile / portrait display*/
@media (max-aspect-ratio: 4/3) 
{
	#credits {font-size: 12px; width: 85%;}
}

/*desktop / landscape display*/
@media (min-aspect-ratio: 4/3) 
{
	#credits {font-size: 14px; width: 39%;}
}

#credits 
{
	position: absolute; top: 2%;
	display: flex; justify-content: center; align-items: center; flex-direction: column;
}
/* 
#navi-logo-container img 
{
	width: 100%; height: 100%;
	mix-blend-mode: screen;
} */

#artist-list
{
	width: 100%;
	list-style-type: none; 
	margin: 0; padding: 0;
	text-align: left;
}

#artist-list li {padding: 1%;}

#artist-list li:hover
{
	background-color: var(--purple-highlight-color) !important;
	box-shadow: 3px 2px 2px black;
}

#artist-list li:hover, #artist-list li:hover a{
	color: white;
	text-shadow: var(--text-glow-shadow);
}

#artist-list li span, .float-right {float: right;}

#credits p
{
	line-height: 1.5;
}

/***************** credits end *****************/