:root{
  --color-cell-bg: gainsboro;
  --color-cell-fg: var(--color2);
  /* --color-cell-bg-active: lightseagreen;
  --color-cell-fg-active: seagreen; */
  --color-cell-bg-active: var(--color2);
  --color-cell-fg-active: var(--color1);
}
body{
background-color: lightgray;
/* font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif */
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
}
.wrapper{
  display:flex;
  flex-direction: column;
  justify-content: center;
  background-color: whitesmoke;
  padding:1rem;
  max-width: 720px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 1rem;
} 
.scales{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  
  justify-content: center;
  gap: .25em;
}
.part{
  display: flex;
      gap: .25rem;
}
.header{
  background-color: transparent;
  border: none;
}
.cell{
  display: flex;
  align-items: baseline;
  padding-top: .5rem;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}
.cell.scale-degree{
  padding-top: 0;
  position: relative;
  cursor: pointer;
  font-weight: bold;
  border: 1px solid var(--color-cell-fg);
  background-color: var(--color-cell-bg);
  color:black;
}
[data-scale-minor]::after{
  content: attr(data-scale-minor);
  position: absolute;
  font-size: 75%;
  top:1.2rem;
  font-weight: normal;
}
.cell.scale-degree:is(.active, :hover){
  background-color: var(--color-cell-bg-active);
  border: 2px solid var(--color-cell-fg);
  color:aliceblue;
}
.scale-chords{
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.scale-chord{
  display: flex;
  flex-direction: row;
  gap: .25rem;
}
.scale-notes{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: .5rem;
  padding: 2rem 0;
}
.scale-note{
  font-weight: 500;
  box-sizing: padding-box;
  border: .125rem solid transparent;
  border-radius: 50%;
  background-color: lightsalmon;
  padding-top: calc(.5rem - 2px); /* correct borrdersize*/
}
.scale-note:is(:nth-child(1),:nth-child(2),:nth-child(3),:nth-child(5),:nth-child(6)){
  border: 2px solid black
}
.scale-note:is(:nth-child(2),:nth-child(3),:nth-child(6)){
background-color: lightskyblue;
text-transform: lowercase;
}
.scale-note:nth-child(6){
  outline: 2px dashed blue;
  outline-offset: 2px;
}
.scale-note:nth-child(7){
  background-color: lightgray;
}
.scale-note:nth-child(7)::after{
  content: '0';
  vertical-align: super;
  font-size: .75em;
}
.scale-chord-note{
  border: 1px solid var(--color-cell-fg);
}
.scale-overview{
  display: flex;
  justify-content: center;
}
.bass-scale-image-container{
  min-width: 50%;
  margin-left: 1rem;
}
span.semitone{
  font-size:.750em;
}

@media only screen and (max-width: 600px){
  .scale-overview{
    flex-direction: column-reverse;
  }
  .bass-scale-image-container{
    margin-bottom: 1rem;
    margin-left: 0;
  }
}

/*BASS Fretboard SVG*/
:root{
  --pill-bg: firebrick;
  --pill-stroke: whitesmoke;
  --note-text: white;
  --note-text-outline: maroon;
  --fretboard-bg: tan;
  --neck-bg: saddlebrown;
  --marker-fill: saddlebrown;
  --frets-color: slategray;
  --strings-color:#daca63 ;
}
.bass-scale-image-container{
  border-top-left-radius: 10%;
  border-bottom-left-radius: 10%;
  overflow:hidden;
  width: 100%;
  height: 100%;
}
#labels > text{
  fill: var(--note-text);
  stroke: var(--note-text-outline);
  stroke-width: .2;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}
#strings > path{stroke: var(--strings-color);}
#frets > path{stroke: var(--frets-color);}
#markers > circle{fill: var(--marker-fill)}
.note-pills > circle{
  cursor: pointer;
  fill: var(--pill-bg);
  stroke: var(--pill-stroke);
}
.note-pills > circle:hover{
  fill: blue;}
#fretboard > rect{
  fill: var(--fretboard-bg);
  border-radius: 10%;
}
#fretboard > rect#neck{
  fill: var(--neck-bg);
}
svg g:is(#pills, #labels){
  display: none;
}