@charset "utf-8"; 

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

body {
	display: flex; /*flex superpowers activated!*/
	flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
	background-color: #fff;
	margin: 0;
	font-family: Lato, sans-serif;
	color: #222;
	font-size: 0.9em;
}

main {
	flex: 1 0 auto; /*fill the available space*/
	display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
}

aside {
	flex: 0 0 40px; /*do not grow or shrink. Stay fixed at 40px*/
	display: flex; /*Now a flex-container too*/
	/*stack icons vertically*/
	flex-direction: column;
	/*since direction is changed, this works on the vertical direction*/
	justify-content: space-around;
	/*direction is changed! Align-items affects the horizontal direction. Place Icons in the center*/
	align-items: center;
	/*make me pretty*/
	background-color: #f2f2f2;
}

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

li {
	display: flex; /*Paragraphs are now displayed on one line*/
	padding: 0 20px; /*Some breathing space*/
	min-height: 50px;
}

li p {
	flex: 0 0 25%; /*This is the sweet sauce*/
}

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

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

.catty-music {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	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: 300;
}

.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: flex;
	flex: 1 1 auto; /*this makes sure the section grows to fill the entire available space and shrinks too*/
	flex-direction: column;
}

.music-head {
	flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
	display: flex; 
	padding: 40px;
	background-color: #4e4e4e;
}

.music-list {
	flex: 1 0 auto;
	list-style-type: none;
	padding: 5px 10px 0px;
}

footer { 
	flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
	padding: 10px;
	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;
	align-self: flex-end;
}

footer img .music-head2 {
	flex: auto;
	list-style-type: none;
	margin-left: 50px;
}