@charset "UTF-8";

/* fingering-image */

.tone-hole {
fill: rgb(255 255 255);
stroke: rgb(64 64 64);
stroke-width: 1.5;
transition: fill 250ms, stroke 250ms;
}

.key {
fill: rgb(255 255 255);
stroke: rgb(64 64 64);
stroke-width: 1;
stroke-miterlimit: 10;
transition: fill 250ms, stroke 250ms;
}

.on {
fill: var(--accent-color);
stroke: var(--base-color);
animation-name: keyOn;
animation-duration: 250ms;
animation-delay: 0ms;
animation-iteration-count: 1;
}

.off {
fill: rgb(255 255 255);
stroke: rgb(64 64 64);
animation-name: keyOff;
}

.opt {
fill: rgb(210 230 240);
stroke: rgb(128 148 192);
}

.alt {
animation-name: tremolo-on-off;
animation-duration: 200ms;
animation-delay: 100ms;
animation-direction: alternate;
animation-iteration-count: infinite;
}

.on.alt {
animation-name: tremolo-on-off;
}

.off.alt {
animation-name: tremolo-off-on;
}

#separator {
fill: none;
stroke: rgb(64 64 64);
stroke-width: 1;
}

@keyframes keyOn {
50% {
fill: rgb(128 192 255);
}
}

@keyframes keyOff {
50% {
fill: var(--base-color);
}
}

@keyframes tremolo-on-off {
0% {
fill: rgb(255 255 255);
stroke: rgb(64 64 64);
}
25% {
fill: rgb(255 255 255);
stroke: rgb(64 64 64);
}
75% {
fill: var(--accent-color);
stroke: var(--base-color);
}

100% {
fill: var(--accent-color);
stroke: var(--base-color);
}
}

@keyframes tremolo-off-on {
0% {
fill: var(--accent-color);
stroke: var(--base-color);
}
25% {
fill: var(--accent-color);
stroke: var(--base-color);
}
75% {
fill: rgb(255 255 255);
stroke: rgb(64 64 64);
}
100% {
fill: rgb(255 255 255);
stroke: rgb(64 64 64);
}
}