:root {
	font-size: 1vmax;
}

* {
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
	background: #000;
	color: #fff;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	box-sizing: border-box;
}

header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: .5rem;
	background: rgba(0,0,0,.8);
	z-index: 2;
	display: grid;
	grid-template-columns: 14rem 1rem 1fr 1rem auto;
    grid-template-rows: 4rem 3rem;
    grid-template-areas:
        "h1 . thumbs . play-button"
        "h2 . thumbs . play-button";
}

header h1 {
	grid-area: h1;
	font-size: 2rem;
	line-height: 4rem;
	margin: 0;
	padding: 0;
}

header h2 {
	grid-area: h2;
	font-size:1.5rem;
	line-height: 3rem;
	margin: 0;
	padding: 0;
}

.scrollband {
	padding: 0 .6rem;
	overflow: hidden;
	overflow-x: scroll;
	white-space: nowrap;
	border-left: .1rem solid #fff;
	border-right: .1rem solid #fff;
	border-radius: .3rem;
}

.scrollband::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
}

#thumbs {
	grid-area: thumbs;
	display: flex;
    gap: 0.3rem;
}


#thumbs img {
	display: inline-block;
	height: 7rem;
	width: 7rem;
	border: .1rem solid rgba(255, 255, 255, .5);
	object-fit: cover;
	transition: border .3s;
}

#thumbs img.current {
	border: .2rem solid rgba(255, 255, 255, 1);
}

#play-button {
	grid-area: play-button;
	position: static !important;
    display: inline-block;
    width: 7rem;
    height: 7rem;
	padding: 2.5rem;
    cursor: pointer;
}

#play-button:before,
#play-button:after {
	content: '';
    display: inline-block;
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #fff;
    transition: clip-path .1s ease;
  }
  #play-button:before {
    clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
  }
  #play-button:after {
    clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
  }
  #play-button.playing:before {
    clip-path: polygon(0 0, 30% 0, 30% 100%, 0% 100%);
  }
  #play-button.playing:after{
    clip-path: polygon(70% 0, 100% 0, 100% 100%, 70% 100%)
  }


main {
	position: relative;
	height: 100%;
	width: 100%;
	z-index: 1;
}

main img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .5s 0s ease-in-out;
	-webkit-transition: opacity .5s 0s ease-in-out;
}

#control {
	opacity: 0;
	transition: opacity .5s ease-in-out, visibility .5s 0s;
	-webkit-transition: opacity .5s ease-in-out, visibility .5s 0s;
	visibility: hidden;
}

.show {
	transition: opacity .5s ease-in-out, visibility 0s;
	-webkit-transition: opacity .5s ease-in-out, visibility 0s;
	opacity: 1 !important;
	visibility: visible !important;
}

#albumselector {
	position: absolute;
	top: 10rem;
	left: 2rem;
	right: 2rem;
	height: 26rem;
	border-radius: 1rem;
	z-index: 2;
	padding: .5rem;
	background: rgba(0,0,0,.8);
	opacity: 0;
	transition: opacity .5s ease-in-out, visibility .5s 0s;
	-webkit-transition: opacity .5s ease-in-out, visibility .5s 0s;
	visibility: hidden;

}

#albumlist {
	display: flex;
    gap: 0.3rem;
}

#albumlist img {
	height: 20rem;
	width: 20rem;
}