.background
section
	.album-info
		.album-art
			img(src='https://target.scene7.com/is/image/Target/51223401?wid=520&hei=520&fmt=pjpeg')
			.actions
				.play Play
				.bookmark
					svg(xmlns='http://www.w3.org/2000/svg', fill='#faa800', height='24', viewbox='0 0 24 24', width='24')
						path(d='M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z')
						path(d='M0 0h24v24H0z', fill='none')
		.album-details
			h2 
				img(src='https://68.media.tumblr.com/avatar_edbd71e8c8ac_128.png')
				| Skillet
			h1 Unleashed
			span 
				span Hard Rock 
				span © 2016 Atlantic Recording Corporation
			p Unleashed is the tenth album by American Christian rock band Skillet, released on August 5, 2016. The album was announced on May 20, 2016, and a lyric video was released for the track "Feel Invincible" at the same time on the band's YouTube channel. Six days later, the band released a lyric video for the track "Stars" on their YouTube channel.
	.album-tracks
		ol
			li 
				span Feel Invincible
				span 3:49
			li 
				span Back From The Dead
				span 3:33		
			li 
				span Stars
				span 3:47
			li 
				span I Want To Live
				span 3:28
			li 
				span Undefeated
				span 3:35
			li 
				span Famous
				span 3:18
			li 
				span Lions
				span 3:24
			li 
				span Out Of Hell
				span 3:34
			li 
				span Burn It Down
				span 3:16
			li 
				span Watching For Comets
				span 3:29
			li 
				span Saviors Of The World
				span 3:46
			li 
				span The Resistance
				span 3:52

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');


:root {
	// --opacity: 1;
	--color: #faa700;
	--color-light: #f5ede1;
	// --color-rgba: rgba(250, 167, 0, var(--opacity));
	--dark: #a7a7a7;
	--dark: #8a8a8a;
	--darker: #303030;
	--sans-serif: 'Roboto', sans-serif;
}

@mixin flex($j:initial, $a:initial, $w:initial, $c:initial) {
	display: flex;
	flex-wrap: $w;
	justify-content: $j;
	align-items: $a;
	align-content: $c;
}
body {
	font-family: var(--sans-serif);
	background: #eeeeee;
}


body {
	background: #0a1a24;
}
.background {
	// position: absolute;
	// width: 100%;
	// top: 0;
	// left: 0;
	// z-index: -1;
	width: 100%;
  height: 56.25vw;
  background: url(https://cdn.klove.com/images/music/artists/bios/SkilletUnleashed.KLArtist.jpg) center/cover;
  box-shadow: inset 0px -17vw 20vw 1vw #0a1a24;
  position: absolute;
  top: 0;
  z-index: -1;
	img {
		max-width: 100%;
		max-height:100vh;
	box-shadow: inset 0px -17vw 30vw 1vw #131313;
	}
	+ section {
		margin-top: 60vmin;
		// opacity: 0;
		background: transparent;
		--dark: rgba(white, .5);
		--dark: rgba(white, .6);
		--darker: rgba(white, .8);
		.bookmark {
			border-color: rgba(white, .2);
			svg {
				fill: #fff;
			}
		}
		.album-tracks {
			background: rgba(white, .1);
			border: none;
		}
	}
}



section {
	background: #fafafa;
	margin: 100px 56px;
	padding: 20px 56px;
	color: var(--darker);
	color: rgba(white, .8);
	.album-info {
		// Float problems solved
		// overflow: auto;
		// min-height: 280px;
		// display: flex;
		// align-items: flex-start
		&:after { 
		 content: " ";
		 display: block; 
		 height: 0; 
		 clear: both;
	}
	}
	.album-art {
		// display: flex;
		// justify-content: center;
		// flex-wrap: wrap;
		float: left;
		width: 220px;
		// flex: 0 0 220px;
		margin-right: 20px;
		margin-bottom: 20px;
		
		* {
			border-radius: 3px;
		}
		img {
			width: 100%;
			margin-bottom: 10px;
			// height: 220px;
			margin-top:-80px;
			box-shadow: 0 5px 60px -3px rgba(0, 0, 0, 0.18);
		}
	}
	.play {
		@include flex(center, center);
		// display: flex;
		// align-items: center;
		// justify-content: center;
		color: white;
		background: var(--color);
		padding: 10px;
		text-transform: uppercase;
		// flex: 1 1 70%;
		flex: 1 0 50%;
	}
	.bookmark {
		@include flex(center, center);
		// display: flex;
		// justify-content: center;
		// align-items: center;
		width: 48px;
		height: 48px;
		// background: black;
		border: 3px solid var(--color-light);
		margin-left: 10px;
	}
	.album-details {
		> * {
			padding: 10px 0;
		}
	}
	h2 {
		@include flex(initial, center);
		color: var(--dark);
		// display: flex;
		// align-items: center;
		font-size: 16px;
		font-weight: 500;
		text-transform: uppercase;
		img {
			width: 24px;
			border-radius: 50%;
			margin-right: 10px;
		}
	}
	h1 {
		font-size: 50px;
		font-weight: 300;
		word-wrap: break-word;
		+ span {
			color: var(--dark);
			span:first-child {
				padding-right: 20px;
			}
		}
	}
	p {
		margin-top: 15px;
	}
	.album-tracks {
		background: #f8f8f8;
		border: 1px solid #efefef;
		margin-top: 20px;
	}
	@media(max-width: 800px) {
		margin: 100px 36px 36px 36px;
	}
	@media(max-width: 700px) {
		.album-art {
			width: 100%;
			img {
				width: auto;
				max-width: 100%;
				margin: -100px auto 10px auto;
				display: block;
			}
		}
		.album-details {
			// display: inline-block;
			float: left;
			max-width: 100%;
		}
	}
	@media(max-width: 550px) {
		margin: 100px 20px 20px 20px;
		padding: 20px 16px;
		ol {
			padding: 16px;
		}
	}
}

ol {
  list-style-type: none;
	padding: 20px 36px;
	font-weight: 500;
	li {
		counter-increment: number;
		@include flex(space-between, center);
		// display: flex;
		// justify-content: space-between;
		// align-items: center;
		height:45px;
		color: var(--dark);
		span {
			&:not(:last-child) {
				margin-right: 2em;
				@media(max-width: 700px) {
					margin-right: 1em;
				}
			}
			&:first-child {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				color: var(--darker);
				&:before {
					content: counter(number);
					margin-right: 2em;
					color: var(--dark);
					display: inline-block;
					text-align: end;
					width: 20px;
				}
			}
		}
	}
}

.actions {
	@include flex();
	flex: 1 1 100%;
}