*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body{
	font-family: Roboto, Arial, sans-serif;
	background: #202d3c;
	color: #c6d2c8;
}

a { color: #0000EE; }
a:visited { xcolor: #551A8B; }
a:hover { color: #3366ff; }
a:active{color: #ff6600; }

h1 {
	font-weight: 500;
}

#content{
	max-width:600px;
}

.button {
	border-radius: 5px;
    display: inline-block;
    padding: 5px 10px 5px 10px;
    margin: 5px;
    cursor: pointer;
    background-color: #008040;
    transition: background-color 0.1s, color 0.05s, font-size 0.1s;
    user-select: none;
    box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;
}

.button:hover {
	background:#00994d;
    color:#cee3d0;
}

.button:active {
	background-color: rgba(0,0,0,0.3);
	background-color: rgba(0,0,0,0.3);
    box-shadow: inset 0 0 0 1px rgba(29, 185, 84, 0.8);
    color: rgb(29, 185, 84);
}

#list{
	background-color: rgba(0,0,0,0.3);
	padding:20px;
	border-radius:5px;
	margin: 75px 0px 200px 0px;
}

.item{
	xborder:1px solid grey;
	padding:2px 5px 2px 5px;
	position:relative;
	xfont-family:Roboto Mono,Consolas,monaco,monospace; 
	overflow-x: hidden;
	overflow-y: hidden;
	transition: background-color 0.1s, color 0.1s;
	display:flex;
	align-items: center;
	justify-content: start;
	border-bottom:2px solid rgb(37, 37, 37);
}

.item > i {
	pointer-events:none;
}

.item:hover {
	background-color: rgba(0,0,0,0.5);
}

.item > .title {
	xborder:1px solid red;
	cursor:pointer;
	color: #47d18c;
	text-decoration: none;
	transition: all 0.2;
	padding:3px 10px;
	flex:1;
}

.item > .title:hover {color:#e2b736;}
.item > .title:active {color:#d15a47;}


/* Dropbox, Soundcloud, Bandcamp icon links */
.icon-link {
	xborder:1px solid grey;
	xfont-size:1.1em;
	padding:2px 4px 2px 4px;
	transition:all 0.1s;
	xfloat:right;
	color: #d15a47;
}
.icon-link:hover { color: #e2b736;}
.icon-link:active {color: #47d18c;}