* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

a { text-decoration:none; color: inherit; }

html, body{
margin:0;
padding:0;
height: 100%;
font-family: arial;
font-size: 100%;
}

body {

}

.menu {
  background: none repeat scroll 0 0 #000033;
  color: #FFFFFF;
  padding: 8px;
	display: flex;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-around;
}

.menu a { color: gold; }

.wrapper {
padding-top: 50px;
}

.history {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(320px,400px));
	grid-gap: 10px;
	justify-content: center;
}

.track {
	display: flex;
	border: 1px solid #eee;
	border-radius: 0 12px 12px 0;
	overflow: hidden;
}

.track a {
text-decoration: none;
color: navy;
}

.track > * {
flex: 1;
}

.track .cover {
display: block;
flex: 0.7 1 0;
height: 100%; /* Necessary for chrome/webkit if the album cover image is set to height 100% */
}

.track .cover img {
	display: block;
	height: auto;
	width: 100%;
}

.track .info {
font-size: 80%;
background: #eee;
display: grid;
grid-template-rows: auto auto auto auto 1fr;
}

.txt-album, .txt-title, .txt-artist, .txt-when {
padding: 4px 4px 4px 16px;
overflow: auto;
}

.txt-links {
    display: flex;
    white-space: nowrap;
    align-self: end;
}

.txt-links a {
	flex: 1;
	text-align: center;
	background: #BFBFC9;
	color: #fff;
	padding: 8px;
}

.txt-links a:hover {
  color: #003;
}