html {
  font-size: 20px;
  font-weight: bold;
}

a.print::after{
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-size: 105%;
  font-weight: 900;
  margin: 0 3px;
}

a.preview::after{
  font-family: "Font Awesome 5 Free";
  content: '\f025';
  font-size: 105%;
  font-weight: 900;
  margin: 0 3px;
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.container {
  padding: 0 1em;
}

.icon {
  width: 1.8em;
  border-radius: 100px;
  margin-right: 0.5em;
}

.row {
  display: flex;
  margin-bottom: 20px;
}

.box {
  width: 1em;
  color: #fff;
  text-align: center;
  flex-basis: 1.8em;
}

.box.active {
  background: yellow;
}

.pitch {
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.25em;
  border-radius: 5px;
  line-height: normal;
  background-color: #8f8e8e;
}

.none {
  background: transparent;
}

.C {
  background-color: #ff5231;
}

.D {
  background-color: #f9ace7;
}

.E {
  background-color: #ffa539;
}

.F {
  background-color: #f9e551;
}

.G {
  background-color: #85d735;
}

.A {
  background-color: #488020;
}

.B {
  background-color: #4c77f9;
}

.C5 {
  background-color: #865ef4;
}

.high {
  text-decoration: overline;
}

.low {
  text-decoration: underline;
}

.text {
  width: 2em;
  height: 1.5em;
  color: black;
}

.print {
  display: inline-block;
  width: 100%;
  font-size: 12px;
  text-align: right;
}

input, textarea {
  width: 100%;
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  min-height: 2em;
}