body {
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

.piano{
  display: flex;
  min-width: 100%;
  position: relative;
  bottom: 30px;
}


.navbar-toggler {
  margin: 0;
}


.white {
  background-image: linear-gradient(to bottom,#ffffff,rgb(242, 241, 241),rgb(220, 206, 206),rgb(255, 255, 255));
  width: 70px;
  height: 300px;
  border-radius: 0 0 8px 8px;
  border: solid 2px gray;
  color: #000;
  cursor: pointer;
  transition: all 0.2s;
}

.white:active {
  background-color: #d5d5d5 !important;
  transition: all 0.2s;
  transform: translateY(4px);
}

.black {
  background-image: linear-gradient(to bottom,#000000,rgb(74, 69, 69),rgb(38, 37, 37),rgb(0, 0, 0));
  width: 40px;
  height: 200px;
  margin: 0 -13.5px;
  z-index: 2;
  border-top: solid 2px gray;
  border-radius: 0 0 10px 10px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}


.black:active {
  background-color: #9b5252 !important;
  transition: all 0.2s;
  transform: translateY(4px); 
}


.info {
  display: flex;
  justify-content: center;
  z-index: 999;
  margin-top: 250px;
  font-weight: bold;
  margin-left: 10px;
  width: 25px;
  height: 25px;
}
.infos {
  display: flex;
  font-weight: bold;
  justify-content: center;
  z-index: 999;
  margin-top: 150px;
  font-size: small;
  width: 25px;
  height: 25px;
}

.green-circle{
  background-color: rgb(46, 202, 64);
  justify-content: center;
  border-radius: 50%;
  color: rgb(255, 255, 255);
} 

#play-btn{
  display: none;
}

#clear-btn{
  display: none;
} 

.piano-board{
  background-image: linear-gradient(to bottom ,rgb(28, 28, 28),rgb(29, 29, 29),rgb(45, 45, 45),rgb(19, 20, 20) 100%)!important;
}
.navbar .navbar-toggler .navbar-toggler-icon {
  color: rgb(255, 255, 255);
}

.nav-nav{
  background-image: linear-gradient(to bottom ,rgb(28, 28, 28) 100%)!important;
  position: relative;
  right: 30px;
}
.nav-col{
  background-image: linear-gradient(to bottom ,rgb(28, 28, 28) 100%)!important;
  font-family: Cambria;
}

.back-btn{
flex-direction: column;
}

.rangeCard {
  width: 70%!important;
  margin-top: -7%!important;
  margin-bottom: -7%!important;
  overflow: hidden!important;
  display: flex!important;
  margin-left: 15%!important;
  height: 50%!important;               
  flex-direction: column!important;
  background-image: linear-gradient(to bottom,black,rgb(29, 29, 29),black 100%)!important;  
  box-shadow: rgba(143, 142, 142, 0.4) 0px 0px 0px 2px, rgba(125, 130, 130, 0.65) 0px 4px 6px -1px, rgba(179, 155, 155, 0.08) 0px 1px 0px 0px  inset!important;
}

#row-height{
  min-height: 114px!important;
}

.text-font :hover {
  color:#9b9b94;
}
.play-all :hover {
  color:#9b9b94;
}
.clear-all :hover {
  color:#9b9b94;
}
#change-names :hover{
  color: #9b9b94;
}
.ml-5.metronome-btn:hover {
  color: rgb(119, 119, 122);
  cursor: pointer;
}

/* display text color */
#display-text {
  color:#E0E0E0;
  text-align: left;
}
ul.navbar-nav.mr-auto.ml-5.list-box{
  margin-left: 55px!important;
  margin-bottom: 30px!important;
  padding:10px 8px!important;
  border-radius: 10px!important;
  background-image: linear-gradient(to bottom,rgb(58, 58, 58),rgb(0, 0, 0),rgb(29, 29, 29),rgb(45, 45, 45) 100%)!important;
}
#display{
  height: 100px!important;
  overflow: scroll;

  /* Hide the scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  
}
.highlighted {
  background-color: blue; /* Set the background color to blue */
  color: white; /* Set the text color to white */
  /* Add any other styles you want for highlighted keys */
}
#display::-webkit-scrollbar {
  display: none;
}

.back-b{
  border-right: 1px solid rgb(0, 0, 0);
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 40px 0px 40px 20px;
  position: relative;
  cursor: pointer;
  color: #e8e5e5;
}
.back-b a:hover{
  color: rgb(109, 101, 101)!important;
}

.col-1{
  padding: 0px ;
}
#display-3rd {
  border-left: 1px solid rgb(119, 113, 113);
  margin-top: 5px;
  padding: 0px 5px;
  font-size: 25px;
  color: rgb(26, 20, 202);
  height: 90%; /* Match the display's height */
  display: none;
}

#playButton{
  display: none;color: #9b9b94;
  margin-top: -50px!important;
  cursor: pointer;
}
#playButton:hover{color:white;}
#editButton{
  color: #9b9b94;
  margin-left: 45%;
  margin-top: 3px;
  cursor: pointer;    
  display: none;
}
#editButton:hover{color:white;}

#okButton{
  display: none; margin: 0px!important;color:#9b9b94!important;position:absolute; right:310%;cursor: pointer; border: 1px solid #60A3D9; padding: 2px 9px; border-radius: 10px; background-color: #000;

}
#okButton:hover{color: black!important; background-color: #60A3D9;}

@media only screen and (max-width: 700px) and (min-width: 100px) {
  .piano{
    max-width: fit-content;
    position: relative;
    right:61px;
    bottom: 0px;
  }

  body {
    max-height: 100vh;
  }
  .navbar-toggler{
   
    font-size: 10px;
  }
  .white {
    width: 20px;
    height: 90px;
    border-radius: 0 0 6px 6px;
    border: solid 1px gray;
    color: #000;
    cursor: pointer;
    transition: all 0.2s;
  }
  .black {
    width: 18px;
    height: 50px;
    margin: 0 -9.7px;
    z-index: 2;
    border-top: solid 1px gray;
    border-radius: 0 0 6px 6px!important;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
  }
  
.info {
  display: flex;
  justify-content: center;
  z-index: 999;
  margin-top: 70px;
  font-weight: bold;
  margin-left: 2px;
  font-size: 8px;
  width: 15px;
  height: 15px;
}
.infos {
  display: flex;
  font-weight: bold;
  justify-content: center;
  z-index: 999;
  margin-left: 1px;
  margin-top: 16px;
  font-size: 8px;
  width: 15px;
  height: 15px;
}

.rangeCard {
  width: 60%!important;
  margin-top: -7%!important;
  margin-bottom: -7%!important;  
  margin-left: 20%!important;
  max-height: 40px!important;
  align-items: center!important;                
  justify-content: center!important;
}
.h3-class{
  font-size: 15px;
}
.h5-class{
  font-size: 10px;
  line-height: 15px;
  position: relative;
  bottom: 20px;
}
}



@media only screen and (max-width: 700px) and (min-width: 510px) {
  .piano{
    max-width:fit-content;
    position: relative;
    right:40px;
    bottom: 0px;
  }
  body {
    max-height: 100vh;
  }
  .navbar-toggler{
    font-size: 10px;
  }
  .white {
    width: 20px;
    height: 90px;
    border-radius: 0 0 6px 6px;
    border: solid 1px gray;
    color: #000;
    cursor: pointer;
    transition: all 0.2s;
  }
  .black {
    width: 20px;
    height: 50px;
    margin: 0 -9.7px;
    z-index: 2;
    border-top: solid 1px gray;
    border-radius: 0 0 6px 6px!important;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
  }
  
.info {
  display: flex;
  justify-content: center;
  z-index: 999;
  margin-top: 70px;
  font-weight: bold;
  margin-left: 2px;
  font-size: 8px;
  width: 15px;
  height: 15px;
}
.infos {
  display: flex;
  font-weight: bold;
  justify-content: center;
  z-index: 999;
  margin-left: 1px;
  margin-top: 16px;
  font-size: 8px;
  width: 15px;
  height: 15px;
}

.rangeCard {
  width: 60%!important;
  margin-top: -7%!important;
  margin-bottom: -7%!important;  
  margin-left: 12%!important;
  max-height: 40px!important;
  align-items: center!important;                
  justify-content: center!important;
}
.h3-class{
  font-size: 15px;
}
.h5-class{
  font-size: 10px;
  line-height: 15px;
  position: relative;
  bottom: 20px;
}
}

@media only screen and (max-width: 900px) and (min-width: 701px) {
  .piano{
    max-width:fit-content;
    position: relative;
    right:40px;
    bottom: 0px;
  }
  body {
    max-height: 100vh;
  }
  .navbar-toggler{
    font-size: 10px;
  }
  .white {
    width: 28px;
    height: 170px;
    border-radius: 0 0 6px 6px;
    border: solid 1px gray;
    color: #000;
    cursor: pointer;
    transition: all 0.2s;
  }
  .black {
    width: 23px;
    height: 110px;
    margin: 0 -9.7px;
    z-index: 2;
    border-top: solid 1px gray;
    border-radius: 0 0 6px 6px!important;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
  }
  
.info {
  display: flex;
  justify-content: center;
  z-index: 999;
  margin-top: 135px;
  font-weight: bold;
  margin-left: 3px;
  font-size: 11px;
  width: 15px;
  height: 15px;
}
.infos {
  display: flex;
  font-weight: bold;
  justify-content: center;
  z-index: 999;
  margin-left: 03px;
  margin-top: 60px;
  font-size: 11px;
  width: 15px;
  height: 15px;
}

.rangeCard {
  width: 70%!important;
  margin-top: -7%!important;
  margin-bottom: -7%!important;  
  margin-left: 12%!important;
  max-height: 40px!important;
  align-items: center!important;                
  justify-content: center!important;
}
.h3-class{
  font-size: 24px;
}
.h5-class{
  font-size: 11px;
  line-height: 15px;
  position: relative;
  bottom: 20px;
}
}