* { box-sizing: border-box; }
body {
	margin: 0;
	background-image: url("img/mmdethbg.jpg");
	background-position: center;
	background-size: cover;
	height: 100vh;
	font-family: sans-serif;
	overflow-x: hidden;
}
.angel-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
}
#pulltag {
	display: flex;
	position: absolute;
	bottom: 80px;
	right: 0;
	width: 530px;
	border-top-left-radius: 75px;
	border-bottom-left-radius: 75px;
	padding: 5px;
	float: right;
	align-items: center;
	background-color: rgba(169, 86, 121, 0.8);
	color: #fff;
	opacity: 0.8;
	animation-name: unhover; animation-duration: 0.2s; animation-fill-mode: forwards;
}
@keyframes zoom    { from { right: 0; float: right; } to { right: -100%; } }
@keyframes hover   { from { margin-right: -20px } to { margin-right: 0; } }
@keyframes unhover { from { margin-right: 0 } to { margin-right: -20px; } }
.pulltag-activated { animation-name: zoom !important; animation-duration: 1s !important; }
#pulltag:hover     { animation-name: hover; animation-duration: 0.25s; animation-fill-mode: forwards; animation-timing-function: ease; opacity: 1; }
#pulltag .albumcover img { max-height: 100%; max-width: 75px; padding: 2px 4px; margin-top: 2px; border-radius: 100%; }
.albuminfo { padding: 0 5px; width: max-content; }
#angel {
	max-height: 85vh;
	max-width: 75vw;
}
.nav-container {
	position: absolute;
	bottom: 0;
	width: 100%;
}
a { color: #fff !important; text-decoration: none; }
#nav ul, #listen ul, #socials ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#nav li { flex-grow: 1; background-color: rgba(0, 0, 0, 0.8); font-size: 24px; }
#nav li:nth-child(2) { background: rgba(169, 86, 121, 0.8); }
#nav li a, #listen li a, #socials li a { width: 100%; display: block; padding: 10px; text-align: center; cursor: pointer; }
#nav li a:hover, #listen li a:hover, #socials li a:hover { background-color: rgba(255, 255, 255, 0.2); }

#listen, #socials { background-color: rgba(169, 86, 121, 0.8); }
#listen li, #socials li { width: 25%; }

#listen, #socials { display: none; font-size: 20px; }

.about-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	height: 100vh;
	margin: 0;
}
.about-container .angel-container { width: 50% !important; }
.about-container .angel-container img { max-width: 100%; max-height: 100%; }
.about-container .about-box { width: 50%; background: rgba(0, 0, 0, 0.8); color: #fff; margin: 0; padding: 20px; font-size: 20px; }

@media only screen and (max-width: 700px) {
	#angel { margin: 0 !important; }
	#nav ul { flex-direction: column; }
	#pulltag { top: 0; bottom: initial; width: 100%; background-color: rgba(169, 86, 121, 1); border-radius: 0; opacity: 1; animation-name: initial; }
	#pulltag:hover { animation-name: initial; }
	#pulltag .albumcover img { border-radius: 0; }
}
@media only screen and (max-width: 600px) {
	#nav, #nav ul, #nav li, #nav li a { width: 100%; }
	#nav li a { padding: 10px 0; }
	.about-container { flex-direction: column; }
	.about-container .angel-container { width: 100vw; height: 100%; margin-left: auto; margin-right: auto; }
	.about-container .about-box { width: 100%; height: auto; }
}