.crimson-text-semibold {
     font-family: "Crimson Text", serif;
     font-weight: 600;
     font-style: normal;
 }

 .arrow-chord {
     font-size: clamp(16px, 3.5vw, 35px);
     color: rgb(91, 91, 105);
     padding: 0;
     margin: 0%;
     padding-top: 2vw;
     margin-bottom: 0.5vw;
 }

 .arrow-chord a {
     font-size: clamp(16px, 3.5vw, 35px);
     color: rgb(140, 140, 173);
     text-decoration: none;
 }

 .arrow-chord a:hover {
     color: rgb(73, 129, 250);
 }

 .arrow-chord a:active {
     color: rgb(231, 157, 88);
 }

 .arrow-chord.up {
     /* padding-top: 2vw;
     margin-bottom: 0.5vw; */
     
 }

 .arrow-chord.down {
     /* margin-top: 1vw; */
    
 }

 .chordCol {
     display: flex;
     flex-direction: column;
 }

 .chordRow {
     display: flex;
     flex-direction: row;
 }

 .divCanvasClass {
     width: 18vw;
     height: calc(18vw * 1.5);
     border: 0px solid blue;
     margin: 0px;
 }

 .chord-column {
     display: flex;
     /* Makes the container a flex container */
     /* Optional properties for further control: */
     justify-content: flex-start;
     /* Distributes items with space between them */
     align-items: center;
     /* Vertically centers items */
     padding: 0;
     gap: 0px;
     margin: 0px;
     border: 0px solid blue;
 }