@font-face {
	font-family: "Maestro";
	src: url(Maestro2.otf),
		serif;
}

html {
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	/* font-family: 'Maestro', 'Roboto', sans-serif; */
	color: white;
	background-color: darkblue;
}

head {
/* 	margin: 20px auto 0em;
	border: 10px solid black;
	padding: 20px; */
}

body {
	max-width: 700px;
	min-width: 300px;
	margin: 20px auto;
	background-color: darkred;
	padding: 0 20px 20px 20px;
	border: 10px solid orange;
}

audio { width: 450px; display: block; margin:1px; }

.notation {
	font-family: 'Maestro';
	font-size: 20px;
}

.songtitle{
	font-size: 20px;
}

.boxinsert{
  text-shadow: 2px 2px 2px black;
  background: linear-gradient(to bottom, rgba(orange,1), rgba(1,1,1,0));
  padding: 1px 10px;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5), inset -2px -2px 5px rgba(255,255,255,0.5);
}

a {
	color: yellow;
	font-family: 'Roboto', 'Maestro';
}

h1 {
	font-size: 60px;
	text-align: center;
	padding: 10px 0px;
	border: 10px solid darkblue;
	margin: 10px 0px;
	color: white;
	background-color: orange;
	text-shadow: 3px -3px 1px darkblue;
}

h2 {
	text-align: center;
	/* background-color: darkblue; */
}

h3 {
  /* color: red; */
  font-size: 1.3em;
  /* text-align: center; */
}


p, li, dd{
	/* font-size: 16px; */
	line-height: 1.4;
	letter-spacing: 0.5px;
}
footer {
	text-align: center;
	color: white;
	background-color: #13a;
	border: 2px solid white;
}

dt {
	margin: 0.5em auto;
	font-size: 1.3em;
	
}

img {
	display: none; /* Wow, it actually won't display! */
	display: block;
	/* border: 10px solid white; */
	/* visibility: hidden; */
	margin: 0 auto;
}
/*

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

font-family: 'Roboto', sans-serif;

*/