body {
	background: #221; color: #555; font-family: "Roboto", "Helvetica Neue", sans-serif; font-size: 10pt; line-height: 140%; margin: 0; padding: 0; text-align: center; vertical-align: baseline;
}

* { box-sizing: border-box; }

/* div { box-sizing: border-box; } */

.wrapper { border: 0vw solid rgba(68, 51, 153,0.4); height: 100%; width: 100%; }

.vcenter { display: flex; flex-direction: column; justify-content: center; }

.content {
    margin: 0 auto;
    width: auto;
    /* display: flex;
    flex-direction: column; */
	padding: 40px;
}

h1 { font-size: 28vw; overflow: hidden; }
h2 { font-size: 20vw; }
h3 { font-size: 15vw; }

h1, h2, h3 {
	color: rgba(68, 51, 153,0.4);
	line-height: 140%;
	margin: 0;
	text-transform: uppercase;
	transition: color 10s ease-in-out;
}

h1:hover, h2:hover, h3:hover {
	color: #fc0;
}

p {
	font-size: 16pt;
	line-height: 1.4;
}

a { color: rgba(68, 51, 153,1); }

a:hover { color: #fc0; }

.strike { text-decoration: line-through; }

.noodles {
	margin: 80px auto;
}

ul {
	list-style: none;
}

ul.mp3-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 40px auto;
	padding: 0;
	width: auto;
}

.mp3-list li {
	display: block;
	flex: 0 1 auto;
	padding: 1em;
}

.mp3-list li a {
	color: transparent;
	font-size: 18pt;
	font-weight: 400;
	text-decoration: none;
}

.mp3-list li a:hover {
	color: transparent;
}

.mp3-list li .mp3-title {
	display: block;
	margin: 20px;
	text-shadow: 0 0 30px rgba(255,0,255,0);
	/* text-shadow: 0 0 30px rgba(68, 51, 153,0); */
	transform: translateY(100%);
	transition: all 2.5s ease-in-out;
	pointer-events: none;
}

.mp3-list li:hover .mp3-title {
	transform: translateY(33%);
	text-shadow: 0 0 7px rgba(255,0,255,0.5);
	pointer-events: none;
	/* text-shadow: 0 0 7px rgba(68, 51, 153,0.5); */
}

.mp3-list li.playing .mp3-title {
	transform: translateY(0);
	text-shadow: 0 0 0px #fc0;
	pointer-events: auto;
	text-decoration: underline;
}

.mp3-list li audio {

}

@media only screen and (max-width: 768px) {

	.content {
		padding: 20px;
	}

	p {
	}

	.mp3-list {
		display: block;
	}

	.mp3-list li {
		display: block;
		flex: none;
		padding: 0px 0 40px 0;
	}

	.mp3-list audio {
		display: block;
		flex: 1 1 auto;
		margin: 0 auto;
		padding: 0;
	}

	.mp3-list li .mp3-title {
		color: rgba(255,0,255,0.5);
		font-size: 18pt;
		margin: 0 0 0.5em 0;
		transform: translateY(0%);
	}

	.mp3-list li.playing .mp3-title {
		color: #fc0;
		text-shadow: none;
	}

	.mp3-list li:hover .mp3-title {
		transform: translateY(0);
	}

}