:root {
    --progress-color: aliceblue;
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

#stage {
    background-color: snow;
}

#controls {
    background-color: azure;
}

.container {
    display: flex;
    justify-content: center;
}

#stage > div {
    font-size: xx-large;
}

.container > div {
    border-radius: 1rem;
    background-color: white;
    padding: 1rem;
    margin: 1rem;
}

.container > div > div {
    position: relative;
    top: calc(45% - 0.5em);
}

#notation {
    padding 0;
    top: calc(45% - 30px);
    width: 70px;
    height: 75px;
}

#noteplaybox {
    width: 5em;
    text-align: center;
}

img.notation {
    width: 100%;
}

#fingering {
    top: 0;
}

img.fingering {
    height: 100px;
}

#notename {
    margin: 0 auto;
}

.stagebox {
    height: 100px;
}

label {
    margin-left: 0.5em;
}

.p10 {
    background-image:
        linear-gradient(
          to right,
          var(--progress-color) 0%,
          var(--progress-color) 10%,
          rgba(0,0,0,0) 10%,
          rgba(0,0,0,0) 100%
        );
}
.p20 {
    background-image:
        linear-gradient(
          to right,
          var(--progress-color) 0%,
          var(--progress-color) 20%,
          rgba(0,0,0,0) 20%,
          rgba(0,0,0,0) 100%
        );
}
.p30 {
    background-image:
        linear-gradient(
          to right,
          var(--progress-color) 0%,
          var(--progress-color) 30%,
          rgba(0,0,0,0) 30%,
          rgba(0,0,0,0) 100%
        );
}
.p40 {
    background-image:
        linear-gradient(
          to right,
          var(--progress-color) 0%,
          var(--progress-color) 40%,
          rgba(0,0,0,0) 40%,
          rgba(0,0,0,0) 100%
        );
}
.p50 {
    background-image:
        linear-gradient(
          to right,
          var(--progress-color) 0%,
          var(--progress-color) 50%,
          rgba(0,0,0,0) 50%,
          rgba(0,0,0,0) 100%
        );
}
.p60 {
    background-image:
        linear-gradient(
          to right,
          var(--progress-color) 0%,
          var(--progress-color) 60%,
          rgba(0,0,0,0) 60%,
          rgba(0,0,0,0) 100%
        );
}
.p70 {
    background-image:
        linear-gradient(
          to right,
          var(--progress-color) 0%,
          var(--progress-color) 70%,
          rgba(0,0,0,0) 70%,
          rgba(0,0,0,0) 100%
        );
}
.p80 {
    background-image:
        linear-gradient(
          to right,
          var(--progress-color) 0%,
          var(--progress-color) 80%,
          rgba(0,0,0,0) 80%,
          rgba(0,0,0,0) 100%
        );
}
.p90 {
    background-image:
        linear-gradient(
          to right,
          var(--progress-color) 0%,
          var(--progress-color) 90%,
          rgba(0,0,0,0) 90%,
          rgba(0,0,0,0) 100%
        );
}
.p100 {
    background-image:
        linear-gradient(
          to right,
          var(--progress-color) 0%,
          var(--progress-color) 100%,
          rgba(0,0,0,0) 100%,
          rgba(0,0,0,0) 100%
        );
}
.complete {
    background-color: var(--progress-color);
}

.reset {
    background-color: snow;
    animation-name: transition;
    animation-duration: 0.9s;
}

@keyframes transition {
  from {background-color: snow;}
  to {background-color: silver;}
}