@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
 body {
     font-family: 'Roboto', sans-serif;
     justify-content: center;
     align-items: center;
}
.piano {
	padding: 0px;
}
.options {
	display: flex;
	font-size: 12pt
}
input {
	float: right;
	width: 60px;
}
textarea {
	width: 100%
}
span {
	 display: inline-block;
}
 ul {
     list-style: none;
     display: inline-flex;
}
 ul .key {
     position: relative;
     width: 30px;
     height: 180px;
     border: 1px solid black;
     border-right: none;
     background: #fffff0;
     border-radius: 5px;
     box-shadow: 0px 3px 5px #666;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: flex-end;
     padding-bottom: 10px;
     font-weight: bold;
}
 ul .key:last-child {
     border-right: 1px solid black;
}
 ul .black-key {
     position: absolute;
     top: -1px;
     left: 20.5px;
     width: 22.5px;
     height: 120px;
     background: black;
     border-radius: 5px;
     box-shadow: 0px 3px 5px #666;
     z-index: 999;
     display: flex;
     justify-content: center;
     align-items: flex-end;
     padding-bottom: 10px;
     color: white;
}
#map {
	font-size: 14pt;
}