body {
  font-family: 'Pontano Sans', sans-serif;
  background: black;
}
.trail { /* className for the trail elements */
position: absolute;
height: 6px; width: 6px;
border-radius: 3px;
/*background: #38A217;*/
background: green; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(lightgreen,steelblue, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(lightgreen, steelblue, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(lightgreen,steelblue, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(lightgreen,steelblue, green); /* Standard syntax */
}
ul {
 width: 149px;
 height: 41px;
 position: absolute;
 top: 12px;
 left: 12px;
 background: grey;
 background: -webkit-linear-gradient(lightgrey, grey);
 background: -o-linear-gradient(lightgrey, grey);
 background: -moz-linear-gradient(lightgrey, grey);
 background: linear-gradient(lightgrey, grey);
 border-radius: 5px;
 list-style: none;

}

ul * {
 letter-spacing: 2px;
}

#music-pic {
  position: absolute;
  left: 215px;
  top: 28px;
  z-index: 10;
}

canvas{
background-color: black;
position: absolute;
border: 3px white solid;
}
#pause {
width: 1000px;
height: 700px;
background: rgba(0,0,0,0.5);
z-index: 7;
position: relative;
display: none;
}
#pause div {
position: absolute;
color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 85px;
letter-spacing: 15px;

}
#start {
width: 1000px;
height: 700px;
background: rgb(0,0,0);
z-index: 7;
position: relative;
display: block;
padding-top: 7px;
padding-left: 7px;
}
#start div {
position: absolute;
color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 85px;
letter-spacing: 15px;
}

h1 {
  background: -webkit-linear-gradient(#eee, #333);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  font-size: 70px;
  text-align: center;
}
h2 {
  text-align: center;
  font-size: 16px;
  letter-spacing: 8px;
}
h3 {
  text-align: center;
  font-size: 12px;
  letter-spacing: 6px;
}
#start-button {

  background-color:#eee;
  border: none;
  color: grey;
  padding: 15px 32px;
  text-align: center;

  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 30px;
  outline: none;
  margin: 13px 20px 35px 13px;
  letter-spacing: 4px;

}

#start-button:hover {
  background: green;
  color: white;
}

#game-over {
width: 1000px;
height: 700px;
background: rgb(0,0,0);
z-index: 7;
position: relative;
display: none;
padding-top: 7px;
padding-left: 7px;
z-index: 2;
}

#game-over div {
position: absolute;
color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 85px;
letter-spacing: 15px;
}

#redo-button {

  background-color:#eee;
  border: none;
  color: grey;
  padding: 15px 32px;
  text-align: center;

  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 30px;
  outline: none;
  margin: 13px 20px 35px 13px;
  letter-spacing: 4px;

}

#redo-button:hover {
  background: green;
  color: white;
}

embed {
  position: absolute;
}