/// font(s)
@font-face {
	font-family: "Comic Sans MS";
	src: url('fonts/comic-sans-ms.ttf');
}

* {
  	box-sizing: border-box;
}

html {
	font-family: sans-serif;
}

body {
	background-color: #EEE9BB;
}

ul li {
	font-size: 20px;
	margin-bottom: 3px;
}

.stack {
  	float: left;
  	width: 50%;
  	padding: 10px;
}

.stack1 {
	border: 5px solid #D3E7DA;
	border-radius: 15px;
	height: 40vh;
	overflow-y: scroll;
	background-color: white;
	text-indent: 5mm;
}

.stack2 {
	border: 5px solid #D3E7DA;
	border-radius: 15px;
	height: 48vh;
	overflow-y: scroll;
	background-color: white;
	text-indent: 5mm;
}

.master {
	border: 5px solid #D3E7DA;
	border-radius: 15px;
	height: 91vh;
	overflow-y: scroll;
	background-color: white;
	text-indent: 5mm;
	padding: 15px;
	font-size: 30px;
}

/// top bar
.topbar {
	border: 3px solid #fff;
	border-radius: 20px;
	padding: 10px;
	position: absolute;
}

.topbarc {
	width: 80px;
	border-radius: 5px;
	float: left; 
	padding: 5px;
	margin-right: 10px;
	border: 2px solid blue;
	background-color:#FFFAC7;
	position: absolute;
	font-family: "Comic Sans MS";
	font-weight: bold;
}

.topbarc#music {
	border-color:#0076C2;
	margin-left:800px;
	width:250px;
	height:36px;
}

.topbarc#music p {
	text-align:center;
	margin-top: 0px;
	color: #BB9AF7;
}

.topbarc#title {
	border-color:#0076C2;
	margin-left: 300px;
	width: 140px;
	height: 36px;
}
.topbarc#title p {
	text-align: center;
	margin-top: 0px;
	color:#F7768E;
}


.topbarc img {
	width: 15px;
}

.row:after {
  	content: "";
  	display: table;
	clear: both;
}

@media only screen and (max-width: 1000px) {
	.topbarc#music {
		display: none;
	}
	.stack {
		margin-left:10px;
		width: 90%
	}
	.stack1 {

	}

	.stack2 {

	}

}
@media only screen and (max-width: 450px) {
	.topbarc#title {
		display: none;
	}
}