.grid-box{
    width: 500px;
	height: 400px;
    display: grid;
	grid-template-columns: 250px 200px;
	grid-template-rows: 50px 250px 250px;  /* 50px 250px 100px */
	grid-template-areas:
		"title audio"
		"cover beschreibung"
		"played played";
	gap: 5px;
}

.grid-title{
	font-size: 16px;
	grid-area: title;
	background-color: #222529;
	color: #ffffff;
	justify-content: center;
}

.grid-audio{
	font-size: 16px;
	grid-area: audio;
	background-color: #222529;
	
}

.grid-cover{
	grid-area: cover;
	background-color: #222529;
}

.grid-cover:after {
	opacity: 1;
	background-image: url("https://assets.codepen.io/13471/sparkles.gif"), url(https://assets.codepen.io/13471/holo.png), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
	background-position: 50% 50%;
	background-size: 160%;
	background-blend-mode: overlay;
	z-index: 2;
	filter: brightness(1) contrast(1);
	transition: all .33s ease;
	mix-blend-mode: color-dodge;
	opacity: .75;
}

.grid-cover.animated {
	transition: none;
	animation: holoCard 12s ease 0s 1;
}
.grid-cover.animated &:before { 
    transition: none;
    animation: holoGradient 12s ease 0s 1;
}
.grid-cover.animated &:after {
    transition: none;
    animation: holoSparkle 12s ease 0s 1;
}
  
@keyframes holoSparkle {
	0%, 100% {opacity: .75; background-position: 50% 50%; filter: brightness(1.2) contrast(1.25);}
	5%, 8% {opacity: 1; background-position: 40% 40%; filter: brightness(.8) contrast(1.2);}
	13%, 16% {opacity: .5; background-position: 50% 50%; filter: brightness(1.2) contrast(.8);}
	35%, 38% {opacity: 1; background-position: 60% 60%; filter: brightness(1) contrast(1);}
	55% {opacity: .33; background-position: 45% 45%; filter: brightness(1.2) contrast(1.25);}
}

@keyframes holoGradient {
	0%, 100% {opacity: 0.5; background-position: 50% 50%; filter: brightness(.5) contrast(1);}
	5%, 9% {background-position: 100% 100%;opacity: 1;filter: brightness(.75) contrast(1.25);}
	13%, 17% {background-position: 0% 0%;opacity: .88;}
	35%, 39% {background-position: 100% 100%;opacity: 1;filter: brightness(.5) contrast(1);}
	55% {background-position: 0% 0%;opacity: 1;filter: brightness(.75) contrast(1.25);}
}

@keyframes holoCard {
	0%, 100% {transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);}
	5%, 8% {transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);}
	13%, 16% {transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);}
	35%, 38% {transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);}
	55% {transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);}
}

.grid-beschreibung{
	font-size: 14px;
	grid-area: beschreibung;
	color: white;
	background-color: #222529;
}

.grid-played{
	font-size: 14px;
	grid-area: played;
	color: white;
	background-color: #222529;
}
.grid-played h1{
	font-size: 20px;
}

.meine{
	background-color: transparent;
	position: absolute;
	right: 5px;
	top: 2px;
}

@charset "utf-8";
.slidecontainer {
    width: 100%;
	height: 50px;
	background-color:#222529;
}

.slider {
	margin-top: auto; 
	margin-bottom: auto;
    -webkit-appearance: none;
    width: 300px;
    height: 10px;
    background: #A7A5A5;
    outline: none;
	border: 1px #000 solid;
}

.slider:hover {
	background: #6E6E6E;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
	border: 1px #000 solid;
    background: #3D3D3D;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
	border: 1px #000 solid;
    background: #3D3D3D;
    cursor: pointer;
}

#myVol{width: 100px;  margin-top: auto;  margin-bottom: auto;}
#goButton{cursor: pointer; margin-left: 10px;  margin-top: 5px;  margin-bottom: auto;}


	.marquee {
		max-width: 100vw; 
		white-space: nowrap;
		overflow: hidden;
	}

	.marquee span {
		font-weight: normal;
		display: inline-block;
		padding-left: 105%; 
		animation: marquee 10s linear infinite;
	}

	.marquee span:hover {
		animation-play-state: paused 
	}

	@keyframes marquee {
	    0%   {transform: translate3d(0,0,0);}
	    100% {transform: translate3d(-100%,0,0);}
	}