<div class="frame">
	
	<header class="frame-header">
		<div class="image">
			<img class="album-artwork" src="https://is2-ssl.mzstatic.com/image/thumb/Music118/v4/1c/77/af/1c77af17-4ca7-1871-9d53-3683eab952c0/source/600x600bb.jpg"/>
		</div>
		<div class="info">
			<div class="title">All Night</div>
			<div class="subtitle">Big Boi</div>
		</div>
	</header>
	
	<div class="frame-lyrics">
		<div>If it's all right</div>
		<div class="active">I wanna kick it with you all night, all night</div>
		<div>Have a good time</div>
		<div>Ain't gotta worry 'cause it's all right, it's all right</div>
		<div>All night, and all night, and all night, baby</div>
		<div>Don't be shy, don't be shy, don't be shy, baby</div>
		<div>All night and all night</div>
		<div>Ain't gotta worry 'cause it's all right, it's all right</div>
	</div>
	
	<div class="frame-bg">
		<img class="bg-color album-artwork" src="https://is2-ssl.mzstatic.com/image/thumb/Music118/v4/1c/77/af/1c77af17-4ca7-1871-9d53-3683eab952c0/source/600x600bb.jpg"/>
		<img class="bg-black album-artwork" src="https://is2-ssl.mzstatic.com/image/thumb/Music118/v4/1c/77/af/1c77af17-4ca7-1871-9d53-3683eab952c0/source/600x600bb.jpg"/>
	</div>	

</div>

html,
body{
	min-height: 100vh;
}
html{
	font-size: 66.5%;
}
body{
	margin: 0; display: flex; align-items: center; justify-content: center; font-family: "Helvetica", "Arial", sans-serif; font-weight: bold; background: #060b21;
}
*{
	box-sizing: border-box;
}




.frame{
	display: flex; flex-direction: column; width: 300px; height: 550px; overflow: hidden; position: relative; color: white; margin: 2em; padding-top: 2em; border-radius: 2em; box-shadow: 0 4px 10px rgba(0,0,0,.75), 0 8px 30px rgba(0,0,0,.5);
	&:before{
		content: ''; display: block; width: 4em; height: 0.6em; background: white; margin: 0 auto; z-index: 10; border-radius: 10em; mix-blend-mode: overlay;
	}
	
	//-----Header
	&-header{
		position: relative; z-index: 10; display: flex; flex-shrink: 0; align-items: center; padding: 2rem;
		.image{
			margin-right: 1.5em;
			> img{
				width: 50px; border-radius: 0.5em; box-shadow: 0 3px 30px rgba(0,0,0,0.2), 0 3px 10px rgba(0,0,0,0.4);
			}
		}
		.info{
			.title{
				font-size: 1.8rem;				
			}
			.subtitle{
				font-size: 1.2rem; margin-top: 0.25em;
			}
		}
	}
	
	
	//-----Lyrics
	&-lyrics{
		position: relative; z-index: 10; flex-grow: 1; padding: 2rem; padding-top: 0; font-size: 2rem; overflow-y: auto;
		> div{
			color: rgba(255,255,255,0.75);
			+ div{
				margin-top: 1.4em;
			}
			&.active{
				color: white; font-size: 3rem; margin-top: 0.8em;
			}
			&:not(.active){
				filter: blur(0.05px);
			}
		}
	}
	
	
	//-----Background
	&-bg{
		position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: 0; z-index: 0; overflow: hidden; border-radius: 2em;
		.bg-color,
		.bg-black{
			width: 200%; position: absolute; border-radius: 100em;
			animation: rotate 35s linear infinite;
		}
		.bg-color{
			right: 0; top: 0; filter: blur(40px); z-index: 10; mix-blend-mode: luminosity;
		}
		.bg-black{
			left: 0; bottom: 0; filter: blur(40px); z-inxed: 1;
			animation-direction: reverse; animation-delay: 10s;
		}
	}
	
}




@keyframes rotate{
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}