@font-face{
    font-family:"Pixelated MS Sans Serif";
    font-style:normal;
    font-weight:400;
    src:url(fonts/ms_sans_serif.woff) format("woff");
    src:url(fonts/ms_sans_serif.woff2) format("woff2")
}
@font-face{
    font-family:"Pixelated MS Sans Serif";
    font-style:normal;
    font-weight:700;
    src:url(fonts/ms_sans_serif_bold.woff) format("woff");
    src:url(fonts/ms_sans_serif_bold.woff2) format("woff2")
}

html {
  height: 100%;
  width: 100%;
  background-color: #ccc;
  user-select: none;
}

input {
  width: 300px;
}

.note {
  border: 3px solid #888;
  width: 55px;
  height: 200px;
  display: inline-block;
  margin: 0;
	margin-top: 4px;
  text-align: center;
}

.noteBlack {
  background-color: black;
  color: white;
}

p {
  font-family:"Pixelated MS Sans Serif";
}

img {
  image-rendering: pixelated;
}

#grid {
	display: grid;
	width: 1000px;
	grid-template-columns: 2fr 5fr;
}

#waveform {
	background-color: black;
}