*{margin:0;padding:0;font:inherit;}
  html, body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #555;
  height: 100%;
     
   }

.container {
  width:1100px;
  max-width:1500px;
  display:flex;
  flex-direction: column;
  margin: auto;
  padding-bottom:10px;
  background-color:#555555;
  color:#eeeeee;
}
.container-2{
  /*width:1100px;*/
  display: grid;  
  grid-template-columns:525px auto;
  margin-left:auto;
  margin-right:auto;
}
#piano {
      display: flex;                 /* Use Flexbox */
      justify-content: center;       /* Center align keys horizontally */
      flex-wrap: wrap;               /* Allow wrapping based on available width */
      background-color: #555555;     /* Background color for the piano */
      width:1053px;
      /*max-width:1500px;*/
      /*min-width:470px;*/
      margin-top:0px;
      padding:3px 30px 0px 22px;
      resize:both;
      margin-left:auto;
      margin-right:auto;
    }
#piano div{margin-bottom:10px;margin-top:0px;}

div#row-1{
  width:calc(300px + 40%);
  /*display:grid;
  grid-template-columns:100px auto;*/
  margin-left:auto;
  margin-right:auto;
}
#row-1{height:1.4em;margin-bottom:6px;}
div#my-mode{width:340px;
  display:grid;
grid-template-columns:120px auto;
  
}
#row-2{display:flex;flex-direction:row;flex-wrap:no-wrap;}
#row-2{display:flex;padding-left:30px;height:320px;background-color:#555555;}
/* row-1 #note-display #my-title #current-note-display #current-note #submit #result  */
#current-note-display{width:100px;}
  
div#note-display{
  float:left;
  width:240px;
  /*display:grid;
  grid-template-columns:120px auto;
  height:1.8em;
  /*flex-direction:row;
  flex-wrap:no-wrap;*/
  font-size:16px;
  color:yellow;
  /*margin:auto auto;*/
}
div#my-title {
  font-size: 11px;
  font-weight: bold;
  padding: 0px;
  margin-top: 4px;
  margin-bottom: 0px;
  margin-left:5px;
  width:93px;
}

div#current-note-title{float:left;display:inline;
width:100px;/*border:1px solid red;*/ 
}/* end current-nore-title */
div#current-note{float:left;display:inline;
width:40px;color:orange;margin-left:10px;}
div#my-mode{display:flex;width:450px;}



   
 
  
div#result{float:left;display:block;width:260px;padding-top:0px;
    font-size:15.3px;
  font-weight: bold;
  padding-top:5px;
  width:calc(7em + 18vw);
  align-text:center;
  color:#FF9900;

  
}

#show-mode{height:30px;display:flex;flex-direction:row;flex-wrap:no-wrap;margin:20px 6px;z-index:6;}





/*  Row-1  */

button#incr:hover{background-color:red;}
  button#decr:hover{background-color:red;}
div#my-table{
  width:310px;
  height:330px;
  /*display:grid;
    grid-template-rows:90px 130px auto;*/

  
}
div#arrow-buttons{height:2.4em;}
  button#incr, button#decr{
    /*border-radius:20px;*/
  width:58px;height:58px;
  font-size:28px;font-weight:bold;z-index:4;background-color:#bbbb99;
  color:#9900bb;border:2px solid #bbbb99;margin-top:3px;border-radius:50%;}

/*div#scale-navigation{display:flex;flex-direction:column;width:430px;color:yellow;z-index:4;
display:flex;width:330px;height:60px;margin-left:auto;margin-right:auto;  
}*/




#nav-container{diplay:flex;flex-direction:row;flex-wrap:wrap;}


div#my-comments{display:block;width:290px;height:auto;z-index:6;}
#comment-0{
display:block;
/*width:310px;*/
min-width:375px;
height:90px;
visibility:hidden;
text-align:center;
color:yellow;
font-style:italic;
line-height:1.3em;
border-width:1px;
font-size:17px;
background-color:#555555;
z-index:5;
margin:10px 0px;
top:-80px;
padding-top:7px;
/*border:1px solid red;*/

}/*end #comment-0 etc*/
/*.comment{position:relative;top:1em;}*/







div#selectors{
        width:530px;
        float:left;
        display: flex;
        /*flex-direction:row;
        flex-wrap:no-wrap;
        flex-direction:row;
  gap: 5px;*/
  background-color:#555555;
  /*padding-left:30px;*/
  padding-bottom:30px;
position:relative;
  left:-30px;
  z-index:22;
  padding-left:10px !important;
    /*min-height:15em;*/
   /* height:330px;*/
}




#root-note-selector{
        min-width:170px;
        
        display: flex;
        flex-direction:column;
        flex-wrap:wrap;
        flex-flow:wrap;
        align-items: flex-start; 
  gap: 0px;
  height:11em;
  background-color:#000;
  padding-left:10px;
  padding-top:4px;
  
}

#scale-selector{display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  min-width:220px;
}
#scale-selector label, #root-note-selector label {
  display: flex;
  flex-direction:column;
  align-items: center; 
  /*border: 1px solid #333333;*/
}
#root-note-selector label { width: 90px; 
    display:flex;
  flex-direction:row;
  
}
#scale-selector #left-mode label {
  display:flex;
  flex-direction:row; 
  width: 265px; }
#scale-selector #right-mode label { 
  width: 205px;
    display:flex;
  flex-direction:row;
  
}

#select-scale{width:210px;text-align:center;color:orange;}



    
  #scale-selector {
  display: flex; 
  flex-direction:row;
  width:400px; 
  align-items: flex-start; 
  gap: 2px;
  flex-wrap:no-wrap;
  /*border:2px solid red;*/
  background-color:black;
  height:fit-content;
  line-height:1.4em;
}  /* iphone portrait */
div#left-mode{width:230px;margin:7px 0px;}
div#right-mode{width:150px;margin:7px 0px;}
div#left-mode label{width:230px;}
#scale-selector label{font-size:16px;}
div#root-note-selector input[type="radio"]{
  width:22px;height:22px;margin-right:5px;}
div#scale-selector input[type="radio"]{
  width:22px;height:22px;margin-right:5px;}
p.ini{width:25px;text-align:center;}
p.rini{width:45px;text-align:center;}


   
button#submit{
  width:90px;
  height:2em;
  border-radius:20%;
  margin-left:20px;
  float:left;
  font-size:14px;
  z-index:6;   
} 
/*h6 { margin-left: 2.5vw; }*/
/*button#submit{position:relative;left:-80px;}*/

#instructions{
  font-size:calc(9px + 0.27vw);
  /*font-weight:bold;*/
  color:yellow;
  /*width:420px;*/
  height:1.2em;
  margin-bottom:12px;
  /*position:fixed;*/
  /*bottom:calc(21px + 1.5vw);*/
  width:320px;
  padding-left:29px;
} 
.bottom-corner {
            /*float: right;*/
            height: 100%;
            display: flex;
            align-items: flex-end;
            shape-outside: inset(calc(80% - 100px) 0 0);
        }  

  .key {
      height: 12vw;
      /* min-height:; */
      line-height: 180px;
      width: 46px;
      max-width:46px;
      max-height:170px;
      text-align: center;
      font-size: 14px;
      margin: 1px;
      border: 1px solid black;
      cursor: pointer;
      transition: background-color 0.2s ease-in-out;
  }
  
  button.key:hover{background-color:yellow;color:black;}
  
/* old code for keys */
.key.white {
      background-color: white;
    }

    .key.black {
      /* width: 40px; */
      /* height: 120px; */
      /* background-color: black; */
      /* color: white; */
      position: relative;
      /* margin-left: -20px; */ /* Position black keys over white keys */
      z-index: 1; /* Ensure black keys appear above white keys */
    }
/* end old code for keys */


.key.highlight, .key.black.highlight {
    background-color: rgba(255,255,0,.5); /* Highlight color */
}


  .key.black {
      background-color: black;
      color: white;
      width: 5vw;
      height: calc(2vw + 50px);
      max-width:26px;
      min-width:12px;
      /* max-height:90px; */
      /* min-height:50px; */
      margin-top: -1px;
      z-index: 1;
      /* position:relative; */
      /* left:50px; */
  }

.key span.kbw {
    font-size: 14px;
    color: #338888;
    font-weight: bold;
}

.key p {
    margin: 0;
}


    /* Black key positioning */
    .black-key-wrapper {
      position: relative;
    }
    .black-key-wrapper .key.black {
      position: absolute;
      left: calc(50% - 15px); /* Center black key over white key */
    }


span.kbw{position:relative;top:-1.4em;left:1.2em;font-size:14px;color:#338888;font-weight:bold;}
span.kbb{position:relative;top:-2vw;left:1.0em;font-size:14px;color:#66cccc;font-weight:bold;}
/* C2     D2     E2     F2    G2     A2      B2      C3     D3     E3     F3     G3    A3 */
/* G5     A5     B5     C4    D4     E4     F4    G4     A4      B4      C5     D5     E5  */
/* F5     G5     A5     B5     C6    D6     E6     F6    G6     A6      B6      C7      */
 #k36 p,#k38 p,#k40 p,#k41 p,#k43 p,#k45 p,#k47 p, #k48 p,#k50 p,#k52 p,#k53 p,#k55 p,#k57 p,
 #k59 p,#k60 p,#k62 p,#k64 p,#k65 p,#k67 p, #k69 p, #k71 p,#k72 p,#k74 p,#k76 p, #k77 p,#k79 p,
 #k81 p,#k83 p,#k84 p,#k86 p, #k88 p,#k89 p,#k91 p, #k93 p,#k95 p,#k96 p
{position:relative;top:-2px;left:-.6em;font-size:12px;height:90px; }

#k37 p, #k39 p, #k42 p, #k44 p, #k46 p,#k49 p, #k51 p, #k54 p, #k56 p, #k58 p,#k61 p, #k63 p, 
#k66 p, #k68 p, #k70 p,#k73 p,#k75 p, #k78 p, #k80 p, #k82 p,#k85 p, #k87 p, #k90 p, #k92 p, 
#k94 p
{margin-right:.8em;position:relative;left:-4px;font-size:11px;top:1em;}
#k54 p{left:-7px;}
#k56 p{left:-3px;}
#k66 p{left:-9px;}
#k68 p{left:-3px;}
#k70 p{left:-3px;}
#k58 p{left:-9px;}
#k63 p{left:-9px;}
#k73 p,#k75 p{position:relative;left:-6px;}
#k90 p, #k92 p{left:-14px;}
#k94 p {position:relative;left:1px;}