/* https://codepen.io/MonaAghili/pen/NWdvQgJ?editors=1100 */

:root {
	--bgl: #fffacd;
	--bgd: #662;
}

body{
	background-color: var(--bgl);
	/* background-image: url(https://images.squarespace-cdn.com/content/v1/5a0e0437268b96c1d7102a8f/1587483376256-ETHOP345KH163WNO9KJI/MNG-KF-03.jpg?format=1500w); */
	background-size: cover;
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
	height:100vh;
	overflow:hidden;
}

.title {
	font-family: monospace;
	font-size: 3rem;
	text-shadow: 3px 4px 1px var(--bgl);
}

.vinyl{
	-webkit-animation: spin 4s 0.51s linear infinite;
  animation: spin 4s 0.51s linear infinite;
	display:flex;
	align-items:center;
	justify-content:center;
	width:500px;
	height:500px;
	border-radius:100%;
	background:linear-gradient(-45deg,#333,black,#555, black,#333);
}
.vinyl:before,.vinyl:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:repeating-radial-gradient(
	circle at center,
	#222 4px,
	transparent 8px);
	border-radius:50%;
}

.label{
	width:200px;
	height:200px;
	border-radius:100%;
	z-index:1;
/*	background-image:url(https://static.wikia.nocookie.net/selenagomez/images/c/c4/Stars_Dance_Standard.jpg);*/
	background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyrUwNb_2qUepG_SR0R8PWmKWv6HTryujnO4rJiLycWA&s);
	/* background-image: url(https://d1c4rk9le5opln.cloudfront.net/473e3d66cf149aa835577f166d18982a.jpg); */
	background-size: cover;
	background-repeat: no-repeat;
}
.label:before{
	content:'';
	position:absolute;
	width:12px;
	height:12px;
	border-radius:100%;
	background-color: #fff;
	margin:auto;
	display:block;
	top:0;left:0;right:0;bottom:0;
}

@keyframes spin {
	to{
		transform: rotate(360deg);
	}
}

.soundboard {
	margin-top: 1rem;
	display: flex;
	gap: 1rem;
}