body {
    background: #123;


}

#wrapper{
    background: white;
    margin: 0;
    width: 90em;
    padding: 1em;
}

h1, h2{
    text-align: center;
}

h3{
    text-align: left;
}

/* Music Score  */

main{
    margin-left: 2em;;
    max-width: 80%;
    display: grid;
    grid-template-rows: repeat(3, minmax(70px,1fr));
    grid-template-columns: repeat(6, 1fr);
    /*   grid-auto-flow: row; */
    margin-top: 5em;
    row-gap: 2m;
}

section{
    /*   display: flex; */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /*grid-template-rows: repeat(5, -0.2fr);*/
    border: 2px solid black;
    background: linear-gradient(to bottom, #fff, #fff 24%, #000 24%, #000 26%, #fff 26%,#fff 49%, #000 49%, #000 51%, #fff 51%, #fff 74%, #000 74%, #000 76%, #fff 16%);
    margin: 0px;
    padding: 0px;
    padding-left: 1em;

    /*   justify-content: space-around; */
}

section:nth-of-type(6n+1){
    padding-left: 0;
}

p {
    /*   display: inline-block; */
    position: relative;
    font-family: 'SymbolaRegular';
    font-weight: normal;
    font-style: normal;
    margin:0px;
    margin-top: 0.35em;
    padding:0.5px;
    padding-left: 0.2em;
    padding-right: 0.2em;
    letter-spacing: 0em;
}
#result{
    color: white;
}
.whole{
    font-size: 5em;
    margin: 0;
    padding:0;
    line-height: 0em;
}

.clef{
    font-size: 5em;
    line-height: 0.75em;
    margin: 0px;
    margin-left: 0.7em;
    padding:0px;
}

.half{
    font-size: 6em;
    line-height: 0;
    margin-top:45px;
    padding: 0;
}

.quarter{
    margin-bottom: -0.5em;
    font-size: 4.25em;
}

.eighth{
    margin-bottom: -0.45em;
    margin-left: -0.3em;
    font-size: 4em;
}

.flip{
    transform: rotate(180deg);
}

/* .highflip{
  transform: rotate(0deg);
} */

.flip.lowc{
    bottom: 0;
}

#weirdEigth{
    font-size: 6em;
    line-height: 0;
    bottom: 11px;
}

.halfRest{
    background: black;
    width: 1.2em;
    height: 0.5em;
    margin: 1.5em 2em 0em 1em;
}

/* Modifiers */

.sharp{
    font-size: 2em;
    font-weight: 1000;
    bottom: 1em;
    left: 0.7em;
    margin: 1em;
    margin-right: -1em;
    line-height: 0px;
    transform: skew(-10deg);
    letter-spacing: 0;
}

.flat{
    font-size: 2em;
    font-weight: bold;
    bottom: 1em;
    left: 0.7em;
    margin: 1em;
    margin-right: -1em;
    line-height: 0px;
    letter-spacing: 0;

}
.flat.c{
    top: -0.375em;
}
.flat.d{
    transform: translateY(-0.375em);
}
.flat.e{
    transform: translateY(-0.4em);
}
.flat.f{
    transform: translateY(1.2em);
}
.flat.lowg{
    transform: translateY(0.8em);
}
.flat.a{
    transform: translateY(1em);
}

.sharp.b{
    transform: translateY(0.1em);
}
.sharp.c{
    transform: translateY(0.1em);
}
.sharp.d{
    transform: translateY(-0.15em);
}
.sharp.e{
    transform: translateY(-0.375em);
}
.sharp.f{
    transform: translateY(1.2em);
}
.sharp.lowg{
    transform: translateY(0.8em);
}
.sharp.a{
    transform: translateY(1em);
}

.natural{
    font-size: 2em;
    font-weight: bold;
    bottom: 0.3em;
    left: 0.2em;
    margin: 0em;
    margin-right: -1em;
    line-height: 0px;
    letter-spacing: 0;
}

.modified{
    margin-left:0;
    margin-right:-0.4em;
}

.sharp.g{
    top: -1.3em;
    margin-left: -0.5em;
}

.accent{
    position: absolute;
    font-size: 1.5em;
    font-weight: semi-bold;
}

#a1{
    top: 14.8em;
    left: 5.5em;
}

#a2{
    top: 21.3em;
    left: 23em;
}

/* Eighth note bars */

#bar1{
    position: absolute;
    background: black;
    width: 6.8em;
    height: 0.5em;
    top: 27.6em;
    left: 23.45em;
    transform: skew(0deg, -10deg);
}

#bar2{
    position: absolute;
    background: black;
    width: 6.15em;
    height: 0.5em;
    top: 36.8em;
    left: 53.5em;
    transform: skew(0deg, -30deg);
}

#bar3a{
    position: absolute;
    background: black;
    width: 2.1em;
    height: 0.5em;
    top: 35.7em;
    left: 66.2em;
    transform: skew(0deg, 30deg);
}

#bar3b{
    position: absolute;
    background: black;
    width: 2.1em;
    height: 0.5em;
    top: 36.5em;
    left: 73.55em;
    transform: skew(0deg, 30deg);
}

#bar4{
    position: absolute;
    background: black;
    width: 6.15em;
    height: 0.5em;
    top: 31.6em;
    left: 81.4em;
    transform: skew(0deg, -28deg);
}

#bar5{
    position: absolute;
    background: black;
    width: 6.15em;
    height: 0.5em;
    top: 44.9em;
    left: 23.45em;
    transform: skew(0deg, -30deg);
}

#bar6a{
    position: absolute;
    background: black;
    width: 2.1em;
    height: 0.5em;
    top: 43.9em;
    left: 36.7em;
    transform: skew(0deg, 30deg);
}

#bar6b{
    position: absolute;
    background: black;
    width: 2.05em;
    height: 0.5em;
    top: 44.6em;
    left: 44.1em;
    transform: skew(0deg, 38deg);
}

#bar7{
    position: absolute;
    background: black;
    width: 7.4em;
    height: 0.5em;
    top: 44em;
    left: 52.25em;
    transform: skew(0deg, -10deg);
}

/* Lines to go over all of the notes */

.tie {
    position: absolute;
    width: 250px;
    height: 40px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border: 5px solid black;
    border-bottom: 0;
    border-width: 5px 0px;

    /*     top: 45px;
        left: 8.5em; */
}

#t1{
    top: 12.5em;
    left: 8.5em;
    width: 12em;
}

#t2{
    top: 14em;
    left: 34.5em;
    width: 16em;
}

#t3{
    top: 13em;
    left: 53em;
    width: 28em;
}


#t4{
    top: 21em;
    left: 34.5em;
    width: 16em;
}


#t5{
    top: 22em;
    left: 63.5em;
    width: 16em;
}


#t6{
    top: 22em;
    left: 82em;
    width: 6.5em;
}


#t7{
    top: 31.5em;
    left: 4.5em;
    width: 3em;
    height: 1.5em;
}


#t8{
    top: 30.5em;
    left: 4.5em;
    width: 16em;
}

#t9{
    top: 37.5em;
    left: 64em;
    width: 16em;
}


/* Lines for the notes */

.mark {
    border-bottom: 2px solid #000;
    top: -0.18em; /* Tweak this and the other top in equal, but opposite values */
    position: relative;
}

.offsetMark {
    position: relative;
    top: 0.2em; /* Tweak this and the other top in equal, but opposite values */
}

/* Whole notes are still problematic */

.markWhole {
    border-bottom: 2px solid #000;
    top: -0.12em; /* Tweak this and the other top in equal, but opposite values */
    position: relative;
}

.offsetMarkWhole {
    position: relative;
    top: 0.11em; /* Tweak this and the other top in equal, but opposite values */
}

/* Every Note as a class */
.lowa{
    bottom: 0.6em;
}
.lowg{

    bottom: 0.45em;
}
.lowf{
    bottom: 0.35em;
}
.lowe{
    /*   line-height: -3em; */
    /*   text-decoration: line-through;  */
    /*   This has become the default */
    bottom: 0.2em;
}
.lowd{
    bottom: 0.1em;
}
.lowc{
    bottom: 0.0em;
}
.lowb{
    bottom: -0.1em;
}


/* high notes get flipped the other way  */

.high{
    transform: rotate(180deg);
}

.g{
    bottom: 0.75em;
    transform: rotate(180deg);
}


.f{
    bottom: 0.6em;
}

.e{
    bottom: 0.5em;
}
.d{
    bottom: 0.35em;
}

.c{
    bottom: 0.25em;
}
.b{
    bottom: 0.1em;
}


/* Whole Note Classes */

.whole.lowe{
    margin-top: 0.62em;
}
.whole.lowf{
    margin-top: 0.64em;
}
.whole.lowg{
    margin-top: 0.65em;
}
.whole.lowa{
    margin-top: 0.69em;
}
.whole.lowb{
    margin-top: 0.68em;
}
.whole.lowc{
    margin-top: 0.72em;
}

.whole.d{
    margin-top: 0.16em;
}

.whole.e{
    margin-top: 0.16em;
}

.whole.f{
    margin-top: 0.2em;
}

.whole.g{
    margin-top: 0.2em;
}

.whole.a{
    margin-top: 0.24em;
}

.whole.b{
    margin-top: 0.25em;
}

.whole.c{
    margin-top: 0.26em;
}

/* Half Note Classes */

.half.lowe{
    bottom: 0.15em;
}

.half.lowf{
    bottom: 0.25em;
}

.half.lowg{
    bottom: 0.33em;
}

.half.lowa{
    bottom: 0.43em;
}

.half.lowb{
    bottom: 0.52em;
}

.half.lowc{
    bottom: 0.6em;
}

.half.high.d{
    top:0.05em;
}

.half.high.e{
    bottom: 0.03em;
}

.half.high.f{
    bottom: 0.12em;
}

.half.high.g{
    bottom: 0.21em;
}

.half.high.a{
    bottom: 0.3em;
}

.half.high.b{
    bottom: 0.4em;
}

.half.high.c{
    bottom: 0.47em;
}
/*
.eighth.lowg{
    top: -0.15em;
}
*/
.eighth.d{
    bottom: 0.67em;
}

.eighth.f{
    bottom: 0.94em;
}

.eighth.high.c{
    margin-top: 0.45em;
}

/* Piano */

#piano{
    background: gray;
    min-height: 200px;
    margin-top: 7em;
    display: grid;
    /*   grid-auto-flow: unset; */
    grid-template-columns: repeat(112, 1fr);
    grid-template-rows: 6fr 4fr;
}

.whiteKey{
    background: white;
    border: 1px solid black;
    grid-row: 1 / 3;
    box-shadow: 0px 5px 4px black;
    text-align: center;
    padding-top: 11em;
    /*   grid-column: 1 / span 4; */
}

.whiteKey:active{
    box-shadow: 0px 3px 2px gray;
}

#k1{
    grid-column: 1 / span 4;
}

#k2{
    grid-column: 5 / span 4;
}

#k3{
    grid-column: 9 / span 4;
}
#k4{
    grid-column: 13 / span 4;
}
#k5{
    grid-column: 17 / span 4;
}
#k6{
    grid-column: 21 / span 4;
}
#k7{
    grid-column: 25 / span 4;
}
#k8{
    grid-column: 29 / span 4;
}
#k9{
    grid-column: 33 / span 4;
}
#k10{
    grid-column: 37 / span 4;
}
#k11{
    grid-column: 41 / span 4;
}
#k12{
    grid-column: 45 / span 4;
}
#k13{
    grid-column: 49 / span 4;
}
#k14{
    grid-column: 53 / span 4;
}
#k15{
    grid-column: 57 / span 4;
}
#k16{
    grid-column: 61 / span 4;
}
#k17{
    grid-column: 65 / span 4;
}
#k18{
    grid-column: 69 / span 4;
}
#k19{
    grid-column: 73 / span 4;
}
#k20{
    grid-column: 77 / span 4;
}
#k21{
    grid-column: 81 / span 4;
}
#k22{
    grid-column: 85 / span 4;
}
#k23{
    grid-column: 89 / span 4;
}
#k24{
    grid-column: 93 / span 4;
}
#k25{
    grid-column: 97 / span 4;
}
#k26{
    grid-column: 101 / span 4;
}
#k27{
    grid-column: 105 / span 4;
}
#k28{
    grid-column: 109 / span 4;
}

.blackKey{
    background: black;
    grid-row: 1 / span 1;
    z-index: 2;
    box-shadow: 0px 3px 3px gray;
    color: white;
    text-align: center;
    padding-top: 6em;
}

.blackKey:active{
    box-shadow: 0px 1px 2px gray;
}

#b1{
    grid-column: 4 / span 2;
}
#b2{
    grid-column: 8 / span 2;
}
#b3{
    grid-column: 16 / span 2;
}
#b4{
    grid-column: 20 / span 2;
}
#b5{
    grid-column: 24 / span 2;
}
#b6{
    grid-column: 32 / span 2;
}
#b7{
    grid-column: 36 / span 2;
}
#b8{
    grid-column: 44 / span 2;
}
#b9{
    grid-column: 48 / span 2;
}
#b10{
    grid-column: 52 / span 2;
}
#b11{
    grid-column: 60 / span 2;
}
#b12{
    grid-column: 64 / span 2;
}
#b13{
    grid-column: 72 / span 2;
}
#b14{
    grid-column: 76 / span 2;
}
#b15{
    grid-column: 80 / span 2;
}
#b16{
    grid-column: 88 / span 2;
}
#b17{
    grid-column: 92 / span 2;
}
#b18{
    grid-column: 100 / span 2;
}
#b19{
    grid-column: 104 / span 2;
}
#b20{
    grid-column: 108 / span 2;
}
/* detector */
#go {
    background: #15a7ffb3;
    width: 96px;
    height: 32px;
    margin: 32px auto 0;

    text-align: center;
    line-height: 32px;
    border-radius: 2px;

    box-shadow: 0 2px 5px #0007;
    cursor: pointer;
}

#go.active {
    background: #d30;
    box-shadow: none;
}

#show-options {
    text-align: center;
    margin-top: 16px;
}

#show-options a {
    text-decoration: none;
    color: #fff8;
}

#show-options a:hover {
    color: #fffb;
}

#options {
    display: none;
    margin: 16px auto 24px;
}

#options .opts {
    text-align: center;
    margin: 16px 0;
}

#options .opts div {
    display: inline-block;
    width: 100px;
    height: 32px;
    line-height: 32px;
    margin: 0 5px;
    border-radius: 2px;
    background: #fff2;
    color: #fff5;
    box-shadow: 0 2px 5px #0007;
    cursor: pointer;
}

#options .opts div:hover {
    color: #fff7;
}

#options .opts div.active {
    background: #fff4;
    color: #fff;
    box-shadow: none;
}

#graph {
    margin: 16px auto;
}

#graph span {
    display: block;
    width: 830px;
    height: 14px;
    margin: -14px auto 0;
    font-size: 11px;
    text-transform: capitalize;
    color: #fff9;
    position: relative;
    top: 20px;
    left: 4px;
}

#graph canvas {
    display: block;
    background: #0004;
    margin: 0 auto;
    padding: 10px 20px;
}

#result {
    background: #0004;
    text-align: center;
    width: 800px;
    margin: 10px auto 20px;
    padding: 10px 20px;
    height: 24px;
    font-size: 24px;
    font-family: monospace;
}

#trace {
    background: #0004;
    color: #fffa;

    width: 800px;
    height: 200px;
    margin: 0 auto 32px;
    padding: 10px 20px;

    font-family: monospace;
    font-size: 12px;
    line-height: 16px;
    white-space: pre-wrap;

    overflow-y: scroll;
}