@charset "utf-8"; 

html, body { 
	height: 100%; /*setting this is important*/
}

body {
	background-color: #fff;
	margin: 0;
	font-family: Lato, sans-serif;
	color: #222;
	font-size: 0.9em;
}

main {
	display: inline-grid;
}

aside {
	background-color: #f2f2f2;
	align-content: start;
}

/*font size for the icons*/
aside i.fa {
	font-size: 0.9em;
	display: inline-grid;
}

li {
	padding: 0 20px; /*Some breathing space*/
	min-height: 50px;
	grid-gap: 15px;
	grid-column: 1 / 20;
}

li p {
	display: grid;
	justify-content: space-between;
	grid-row: 1 / 4;
}

li span.catty-cloud {
	border: 1px solid black;
	font-size: 0.6em;
	padding: 3px;
}

li:nth-child(2n) {
	background-color: #f2f2f2;
}

.catty-music {
	font-weight: 300;
	color: #fff;
	padding-left: 50px; 
}

.catty-music div:nth-child(1) {
	margin-bottom: auto;
}

.catty-music div:nth-child(2) {
	margin-top: 0;
}

.catty-music div:nth-child(2)i.fa {
	font-size: 0.9em;
	padding: 0 0.7em;
	font-weight: 300em;
}

.catty-music div:nth-child(1)p:first-child {
	font-size: 1.8em; 
	margin: 0 0 10px;
}

.catty-music div:nth-child(1)p:not(:first-child) {
	font-size: 0.9em;
	margin: 2px 0;
}

.content {
	display: inline-grid;
	grid-gap: 20px;
	grid-area: 10 / 1 / 2 / 15;
}

.music-head {
	display: inline-grid;
	padding: 40px;
	background-color: #4e4e4e;
}

.music-list {
	list-style-type: none;
	padding: 5px 10px 0px;
	display: grid;
	grid-gap: 30px;
}

footer {
	padding: 1px;
	color: #fff;
	background-color: rgba(61, 100, 158, .9);
	font-size: 35px;

}

i, .fa fa-backward, .fa fa-pause, .fa fa-forward p{
	margin: 20px;
	display: inline-grid;
}

footer img .music-head2 {
	list-style-type: none;
	margin-left: 50px;
	display: inline-grid;
}