/*Quick Scale Tool/styles/style.css - Main Cascading Style Sheet */

body {
  font-family: 'PT Serif', serif;;
  background-color: #313634;
  color: white;
  font-size: 1.2vw;
}

.toolbar {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  background-color: #313634;
  padding: 0.2vw;
  border: 4px solid;
  border-color: #4c9680;
}

.title {
  font-size: 2vw;
  font-weight: bold;
  text-shadow: 0.3vw 0.3vw 0.3vw #aaa;
}

.titleLink {
  text-decoration: none;
  color: white;
}

.subtitle {
  font-size: 1.5vw;
  font-weight: bold;
  text-shadow: 0.15vw 0.15vw 0.15vw #aaa;
}

.subtitle2 {
  font-size: 1.5vw;
  font-weight: bold;
  text-shadow: 0.15vw 0.15vw 0.15vw #aaa;
}

.select {
  background-color: #ace7ae;
  text-align: center;
  color: rgb(14, 10, 10);
  text-shadow: 0.1vw 0.1vw 0.1vw  #aaa;
  padding: 0.1vw;
  font-size: 1.5vw;
  font-weight: bold;
  border: none;
  cursor: pointer;
  border-radius: 0.3vw;
}

.linkbtn {
  display: block;
  font-size: 2vw;
  padding: 0vw 0.5vw;
  cursor: pointer;
  background-color: #ace7ae;
  border-radius: 0.3vw;
  float: right;
}

.mobilelink {
  display: block;
  cursor: pointer;
  background-color: #ace7ae;
  width: 100%;
  font-size: 1.4vw;
}

#mobilelink {
overflow: hidden;
transition: 0.2s;
}

#mobilelink2 {
overflow: hidden;
transition: 0.2s;
}

nav ul {
  max-width: 50%;
  background-color: #ace7ae;
  position: absolute;
  top: 4%;
  right: 2%;
  z-index: 2;
  text-align: right;
  border-radius: 0.3vw;
}

nav ul li {
  list-style: none;
  display: block;
  margin: 0.3vw;

}

nav ul li a {
  text-decoration: none;
  color: #000;
}

button {
  background-color: #ace7ae;
  color: rgb(14, 10, 10);
  font-size: 1vw;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0.2vw;
}

.mytable2 {
  flex: 1;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  padding: 1vw;
  background-color: #313634;
  border: 4px solid;
  border-color: #4c9680;
}

.mytable {
  table-layout: fixed;
  width: 100%;
  margin: 0.1%;
  text-align: center;
  background-color: #4c9680;
  text-shadow: 0.2vw 0.2vw 0.2vw #aaa;
  border: 0px;
  border-collapse: collapse;
  border-style: hidden;
}

.customGtrRow {
  display: none;
}

.customGtrRow2 {
  display: none;
}

.leftyGtrBlock {
  flex: 1;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  padding: 1vw;
  background-color: #313634;
  border: 4px solid;
  border-color: #4c9680;
}

.leftyGtrTable {
  table-layout: fixed;
  width: 100%;
  margin: 0.1%;
  color: black;
  text-align: center;
  background-color: #4c9680;
  text-shadow: 0.2vw 0.2vw 0.2vw #aaa;
  border: 0px;
  border-collapse: collapse;
  border-style: hidden;
}

.leftyGtrTable .rotate-text {
  writing-mode: sideways-lr;
}

.leftyGtrBlock2 {
  flex: 1;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  padding: 1vw;
  background-color: #313634;
  border: 4px solid;
  border-color: #4c9680;
}

.leftyGtrTable2 {
  table-layout: fixed;
  width: 100%;
  margin: 0.1%;
  color: black;
  text-align: center;
  background-color: #4c9680;
  text-shadow: 0.2vw 0.2vw 0.2vw #aaa;
  border: 0px;
  border-collapse: collapse;
  border-style: hidden;
}

.leftyGtrTable2 .rotate-text {
  writing-mode: sideways-lr;
}

.table-header {
  color: white;
  text-shadow: 0px 0px 0px #aaa;
}

.headerCell {
  background-color: #313634;
}

.col1 {
  display: none;
}

.col2 {
  display: none;
}

.col3 {
  display: none;
}

.col4 {
  display: none;
}

.col5 {
  display: none;
}

.col6 {
  display: none;
}

.col7 {
  display: none;
}

table.show1 .col1 {
  display: table-cell;
}

table.show2 .col2 {
  display: table-cell;
}

table.show3 .col3 {
  display: table-cell;
}

table.show4 .col4 {
  display: table-cell;
}

table.show6 .col6 {
  display: table-cell;
}

table.show7 .col7 {
  display: table-cell;
}

.fretRow td {
  padding: 0.8vw 0;
}

.rotate-text {
  background-color: #4c9680;
  font-weight: bold;
  border: 4px solid black;
  writing-mode: sideways-lr;
}

.fret {
  color: #4c9680;
  text-shadow: 0px 0px 0px;
  border: 2px solid #313634;
}

.play {
  cursor: pointer;
}

.rotate-text.Highlight {
  background-color: #d8d8d8;
}

.Highlight {
  background-color: white;
  color: black;
  font-weight: bold;
  text-shadow: 0.2vw 0.2vw 0.2vw #aaa;
}

.chordHighlight {
  background-color: orange;
  color: black;
  font-weight: bold;
  text-shadow: 0.2vw 0.2vw 0.2vw #aaa;
}

.rotate-text.chordHighlight {
  background-color: orange;
}

.rootNoteHighlight {
  background-color: #c0c0c0;
}

.rotate-text.rootNoteHighlight {
  background-color: #696969;
}


.chordHighlight.rootNoteHighlight {
  background-color: #cc5500;
  color: white;
}

.rotate-text.chordHighlight.rootNoteHighlight {
  background-color: #cc5500;
}

.chordRootHighlight {
  background-color: #e86100;
}

.rotate-text.chordRootHighlight {
  background-color: #e86100;
}

.kbdbox {
  flex: 1;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  padding: 1vw;
  background-color: #313634;
  border: 4px solid;
  border-color: #4c9680;
}

.kbd-table {
  table-layout: fixed;
  border: 0;
  border-collapse: collapse;
  justify-content: center;
  margin: 10%;
  margin-top: 0.1%;
  margin-bottom: 1%;
  background-color: #4c9680;
}

.top-row {
  height: 0.1vw; /*1pt*/
  background: #313634;
}

.blackkey-row {
  height: 24.3vw;
}

.middle-row {
  height: 0.1vw;
}

.whitekey-row {
  height: 12.2vw; /* 112.5pt; 0.3vw=33.75vw*/
}

.bottom-row {
  height: 0.1vw;
  background: #8fccb9;
}

.col-cl {
  width: 3.9vw; /*32pt*/
}

.col-csl {
  width: 2.7vw; /*22pt*/
}

.col-csr {
  width: 1.22vw; /*10pt*/
}

.col-dm {
  width: 4.15vw; /*34pt*/
}

.col-dsl {
  width: 1.22vw;
}

.col-dsr {
  width: 2.7vw;
}

.col-er {
  width: 4.15vw;
}

.col-fl {
  width: 3.88vw;
}

.col-fsl {
  width: 2.88vw; /*24pt*/
}

.col-fsr {
  width: 0.86vw; /*7pt*/
}

.col-gm {
  width: 3.87vw;
}

.col-gsl {
  width: 1.83vw; /*15pt*/
}

.col-gsr {
  width: 1.83vw;
}

.col-am {
  width: 3.87vw;
}

.col-asl {
  width: 0.86vw;
}

.col-asr {
  width: 2.88vw;
}

.col-br {
  width: 3.87vw;
}

.col-s {
  width: 0.1vw;
  background: #313634;
}

.space-cell {
  background: #313634;
}

.black.Highlight {
  background-color: black;
}

.black.chordHighlight {
  background-color: orange;
}

.black.rootNoteHighlight {
  background-color: #555555;
}

.black.rootNoteHighlight.chordHighlight {
  background-color: #cc5500;
}


.black.chordRootHighlight {
  background-color: #e86100;
}

.off {
  background-color: #4c9680;
  color: black;
  text-shadow: 0.2vw 0.2vw 0.2vw #aaa;
}

.on {
  background-color: white;
  color: black;
  font-weight: bold;
  text-shadow: 0.2vw 0.2vw 0.2vw #aaa;
}

.rotate-text.on {
  background-color: #d8d8d8;
}

.black.on {
  background-color: black;
}

.chordTitle {
  color: orange;
    text-shadow: 0.05vw 0.05vw 0.05vw black;
}

.chordItemDef {
  cursor: pointer;
}

.results {
  display: none;
}

.aboutBlock {
  border: 4px solid;
  border-color: #4c9680;
  padding: 4px;
}

.aboutTitle {
  font-size: 1.2vw;
  font-weight: bold;
  text-shadow: 0.2vw 0.2vw 0.2vw #aaa;
}

.hideLink {
  color: #ace7ae;
}

.aboutPara {
  font-size: 1vw;
  text-shadow: 0.2vw 0.2vw 0.2vw black;
}

.aboutList {
  font-size: 1vw;

}

.buttonresults {
  text-align: center;
  justify-content: center;
}

.removeHL {
  list-style: none;
  cursor: pointer;
  color: orange;
  text-decoration: underline;
  text-shadow: 0.05vw 0.05vw 0.05vw black;
}

/* Results list formatting */

.column-container {
  column-count: 5; /* Adjust the number of columns as needed */
  column-gap: 0.15vw;
  /* Adjust the gap between columns as needed */
}

.column-item {

  break-inside: avoid; /* Prevent items from breaking across columns */
  margin-bottom: 0.8vw;
  /* Adjust the margin between items as needed */
}

.scaleItem {
  font-size: 1vw;
}

.resulttext {
  font-size: 1vw;
  text-shadow: 0.2vw 0.2vw 0.2vw black;
}


@media (max-width: 1000px) {

  body {
    font-size: 2vw;
  }

  .title {
    font-size: 3vw;
    margin: 0.1vw;
    text-shadow: 2px 2px 2px #aaa;
  }

  .subtitle {
    font-size: 2vw;
    margin: 2px;
    text-shadow: 2px 2px 2px #aaa;
  }

  .subtitle2 {
    font-size: 2vw;
    margin: 2px;
    text-shadow: 2px 2px 2px #aaa;
  }

  .select {
    background-color: #ace7ae;
    text-align: center;
    color: rgb(14, 10, 10);
    text-shadow: 0px 0px 0px;
    padding: 0px;
    font-size: 2.5vw;
    font-weight: none;
    border: none;

  }

  .linkbtn {
    display: block;
    font-size: 2.5vw;
    padding: 0px 6px;
    background-color: #ace7ae;

    float: right;
  }

  .mobilelink {
    display: block;
    background-color: #ace7ae;
    width: 100%;
    font-size: 2vw;
  }

  #mobilelink {
  overflow: hidden;
  transition: 0.2s;
  }

  nav ul {
    background-color: #ace7ae;
    position: absolute;
    top: 36px;
    right: 12px;
    z-index: 2;
    text-align: right;

  }

  nav ul li {
    list-style: none;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  #mobilelink2 {
  overflow: hidden;
  transition: 0.2s;
  }

  button {
    font-size: 1.7vw;
  }

  .kbd-table {
    margin: 1%;
    margin-top: 1%;
    margin-bottom: 1%;
  }

  .blackkey-row {
    height: 27vw; /*225pt; 0.3vw=67.5vw*/
  }

  .whitekey-row {
    height: 13.5vw; /* 112.5pt; 0.3vw=33.75vw*/
  }

  .col-s {
    width: 0.05vw;
  }

  .col-cl {
    width: 4.3vw; /*32pt*/
  }

  .col-csl {
    width: 3.0vw; /*22pt*/
  }

  .col-csr {
    width: 1.35vw; /*10pt*/
  }

  .col-dm {
    width: 4.6vw; /*34pt*/
  }

  .col-dsl {
    width: 1.35vw;
  }

  .col-dsr {
    width: 3.0vw;
  }

  .col-er {
    width: 4.6vw;
  }

  .col-fl {
    width: 4.3vw;
  }

  .col-fsl {
    width: 3.2vw; /*24pt*/
  }

  .col-fsr {
    width: 0.95vw; /*7pt*/
  }

  .col-gm {
    width: 4.3vw;
  }

  .col-gsl {
    width: 2.03vw; /*15pt*/
  }

  .col-gsr {
    width: 2.03vw;
  }

  .col-am {
    width: 4.3vw;
  }

  .col-asl {
    width: 0.95vw;
  }

  .col-asr {
    width: 3.2vw;
  }

  .col-br {
    width: 4.3vw;
  }

  .aboutTitle {
    font-size: 2vw;
  }

  .aboutPara {
    font-size: 1.8vw;
  }

  .aboutList {
    font-size: 1.7vw;
    line-height: 1.1;
    letter-spacing: 0px;
  }

  .resulttext {
    font-size: 1.7vw;
  }

  .scaleItem {
    font-size: 1.7vw;
  }

  .column-container {
    column-count: 3; /* Adjust the number of columns as needed */
  }

}

@media (max-width: 540px) {

  body {
    font-size: 3vw;
  }

  .title {
    font-size: 3.5vw;

  }

  .subtitle {
    display: none;
  }

  .subtitle2 {
    font-size: 2.5vw;
  }

  .select {
    background-color: #ace7ae;
    text-align: center;
    color: rgb(14, 10, 10);
    text-shadow: 0px 0px 0px;
    padding: 0px;
    font-size: 2.9vw;
    font-weight: none;
    border: none;

  }

  .viewChangeBtn {
    display: none;
  }

  .linkbtn {
    display: block;
    font-size: 3vw;

    background-color: #ace7ae;

    float: right;
  }

  .mobilelink {
    display: block;
    background-color: #ace7ae;
    width: 100%;
    font-size: 3.8vw;
  }

  button {
    font-size: 2.3vw;

  }

  .fretfullbtn {
    display: none;
  }

  .col1 {
    display: none;
  }

  table.show1 .col1 {
    display: none;
  }

  .kbd-table {
    margin: 1%;
    margin-top: 1%;
    margin-bottom: 1%;
  }


  .blackkey-row {
    height: 27vw; /*225pt; 0.3vw=67.5vw*/
  }

  .whitekey-row {
    height: 13.5vw; /* 112.5pt; 0.3vw=33.75vw*/
  }

  .col-s {
    width: 0.05vw;
  }

  .col-cl {
    width: 4.3vw; /*32pt*/
  }

  .col-csl {
    width: 3.0vw; /*22pt*/
  }

  .col-csr {
    width: 1.35vw; /*10pt*/
  }

  .col-dm {
    width: 4.6vw; /*34pt*/
  }

  .col-dsl {
    width: 1.35vw;
  }

  .col-dsr {
    width: 3.0vw;
  }

  .col-er {
    width: 4.6vw;
  }

  .col-fl {
    width: 4.3vw;
  }

  .col-fsl {
    width: 3.2vw; /*24pt*/
  }

  .col-fsr {
    width: 0.95vw; /*7pt*/
  }

  .col-gm {
    width: 4.3vw;
  }

  .col-gsl {
    width: 2.03vw; /*15pt*/
  }

  .col-gsr {
    width: 2.03vw;
  }

  .col-am {
    width: 4.3vw;
  }

  .col-asl {
    width: 0.95vw;
  }

  .col-asr {
    width: 3.2vw;
  }

  .col-br {
    width: 4.3vw;
  }

  .aboutTitle {
    font-size: 3vw;
  }

  .aboutPara {
    font-size: 3vw;
  }

  .aboutList {
    font-size: 3vw;
  }

  .resulttext {
    font-size: 3vw;
  }

  .scaleItem {
    font-size: 2.5vw;
  }

  .column-container {
    column-count: 2; /* Adjust the number of columns as needed */
  }

}