#fretboard {
    font-size: 30px;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    //grid-column-gap: 20px;
    justify-content: center;
    align-items: center;
    background-color: #fffbe4;
}
#wrapper {
    display:flex;
    align-items: center;
    justify-content: center;
}
.fretBox{
    width:100%;
    height:25px;
    display:none;

}

.fret::before {
}

.fret:active {
    //transform: scale(0.9);
  }
.fret::after{
}
body {
    background-color: slategray;}
input[type=checkbox] ::after {
    left: 0;
}
input[type=button]{
    width:90px;
    height:30px;
}

.button-wrapper {
    display:flex;
    align-items: center;
    justify-content: center;
}

.button-grid {

    font-size: 30px;
    display: grid;
    grid-template-columns: repeat(6,0fr);
    grid-column-gap: 20px;
    justify-content: center;
    align-items: center;
    //background-color: #fffbe4;
}

.button-grid2 {

    font-size: 30px;
    display: grid;
    grid-template-columns: repeat(1,0fr);
    grid-column-gap: 20px;
    justify-content: center;
    align-items: center;
    //background-color: #fffbe4;
}

label {
    width:100%;
    padding-left:20px;
    padding-right:20px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.fret {
    width: 100px;
    margin-left: 2px;
    margin-right: 2px;
    border-right:  5px solid #888788;
    border-bottom: 2px solid grey;

    display:flex;
    align-items: center;
    justify-content: center;


}
#displayShare {
    font-size: 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 5px;
    justify-content: left;
    align-items: left;
}

/* this is for the div we will create for each checkbox */
.element {
  font-size: 35px;
  font-family: arial;
  color: #ccdadb;
}

input:checked + label {
    background-color: #0a5921;
    width: 10px;
    height: 40px;

}
pre {
    font-size: 12px;
    color: darkred;

}