@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
:root {
  --color: #faa700;
  --color-light: #f5ede1;
  --dark: #a7a7a7;
  --dark: #8a8a8a;
  --darker: #303030;
  --sans-serif: 'Roboto', sans-serif;
}

body {
  font-family: var(--sans-serif);
  background: #eeeeee;
}

body {
  background: #0a1a24;
}

.background {
  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;
}
.background img {
  max-width: 100%;
  max-height: 100vh;
  box-shadow: inset 0px -17vw 30vw 1vw #131313;
}
.background + section {
  margin-top: 60vmin;
  background: transparent;
  --dark: rgba(white, .5);
  --dark: rgba(white, .6);
  --darker: rgba(white, .8);
}
.background + section .bookmark {
  border-color: rgba(255, 255, 255, 0.2);
}
.background + section .bookmark svg {
  fill: #fff;
}
.background + section .album-tracks {
  background: rgba(255, 255, 255, 0.1);
  border: none;
}

section {
  background: #fafafa;
  margin: 100px 56px;
  padding: 20px 56px;
  color: var(--darker);
  color: rgba(255, 255, 255, 0.8);
}
section .album-info:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
section .play {
  display: -webkit-box;
  display: flex;
  flex-wrap: initial;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  align-content: initial;
  color: white;
  background: var(--color);
  padding: 10px;
  text-transform: uppercase;
  -webkit-box-flex: 1;
          flex: 1 0 50%;
}
section a {
  text-decoration:none;
}
section .album-tracks {
  background: #f8f8f8;
  border: 1px solid #efefef;
  margin-top: 20px;
  color:yellow;
}
@media (max-width: 800px) {
  section {
    margin: 100px 36px 36px 36px;
  }
}
@media (max-width: 550px) {
  section {
    margin: 100px 20px 20px 20px;
    padding: 20px 16px;
  }
}