.floating-title {
  position: fixed;
  top: 10px;
  left: 10px;
  padding: 15px 25px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-decoration-line: wavy;
  background: rgba(255, 255, 255, 0.15);
  color: #333;
  z-index: 9998;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);  
}

.button1 {
  padding: 10px 20px;
  margin: 5px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
  color :#757575;
      -webkit-tap-highlight-color: transparent;
}

.button1:hover {
    background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);



    color: #333;
}

.button1:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.floating-title-draw-a-note {
  background: linear-gradient(135deg, rgba(220, 132, 114, 0.8), rgba(245, 118, 118, 0.8));
  border-color: rgba(220, 132, 114, 0.6);
}

.floating-title-write-lyrics {

  padding: 15px 25px;
  border: 2px solid rgba(0, 0, 0, 1);
  border-radius: 5px;
  margin: 20px;
  font-family: sans-serif;
  font-size: 24px;
  top: 0;
    left: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);  
  background: linear-gradient(135deg, rgba(255, 218, 185, 0.8), rgba(255, 165, 0, 0.8));
  border-color: rgba(255, 218, 185, 0.6);


}

.floating-title-add-vibrato {
  background: linear-gradient(289deg, rgba(184, 172, 135, 0.8), rgba(181, 143, 27, 0.8));
  
  border-color: rgba(184, 172, 135, 0.6);
}


.floating-title-color-your-background {
      position: fixed;
      bottom: 10px;
  margin: 20px;      
  left: 10px;
  padding: 15px 25px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 24px;
  font-weight: bold;

  background: rgba(255, 255, 255, 0.15);
  color: #333;
  z-index: 9998;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);


  background: linear-gradient(135deg, rgba(144, 238, 144, 0.8), rgba(60, 179, 113, 0.8));
  
  border-color: rgba(144, 238, 144, 0.6);


}

.floating-title-shape-a-rest {
background: linear-gradient(143deg, rgba(142, 163, 75, 1) 0%, rgba(225, 240, 161, 1) 100%);
  
      border-color: rgba(142, 163, 75, 0.6);
}

.floating-title-sing-along {
      background: linear-gradient(135deg, rgba(152, 251, 152, 0.8), rgba(50, 205, 50, 0.8));
  
  border-color: rgba(152, 251, 152, 0.6);
}

.floating-title-edit-waveform {
  background: linear-gradient(135deg, rgba(176, 224, 230, 0.8), rgba(95, 158, 160, 0.8));
  
  border-color: rgba(176, 224, 230, 0.6);

}

.floating-title-tap-tempo {
              background: linear-gradient(135deg, rgba(173, 216, 230, 0.8), rgba(70, 130, 180, 0.8));
  
  border-color: rgba(173, 216, 230, 0.6);
}

.floating-title-shape-a-clef {
  background: linear-gradient(135deg, rgba(135, 206, 250, 0.8), rgba(70, 130, 180, 0.8));
  
  border-color: rgba(135, 206, 250, 0.6);

}

.floating-title-authograph {
      background: linear-gradient(135deg, rgba(221, 160, 221, 0.8), rgba(186, 85, 211, 0.8));
  
  border-color: rgba(221, 160, 221, 0.6);

}

.floating-title-publish {
        background: linear-gradient(25deg, rgba(200, 159, 191, 1) 25%, rgba(184, 125, 166, 1) 58%, rgba(133, 68, 109, 1) 100%);
    

    border-color: rgba(200, 159, 191, 0.6);
}

.floating-title-view {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.8), rgba(255, 105, 180, 0.8));
  
  border-color: rgba(255, 182, 193, 0.6);
}

/* Route-specific button customizations */
.button-draw-a-note {
  background: linear-gradient(135deg, rgba(220, 132, 114, 0.8), rgba(245, 118, 118, 0.8));

  border-color: rgba(220, 132, 114, 0.6);
}

.button-write-lyrics {
    margin: 20px;
      background: linear-gradient(135deg, rgba(255, 218, 185, 0.8), rgba(255, 165, 0, 0.8));

  border-color: rgba(255, 218, 185, 0.6);


}

.button-add-vibrato {
  background: linear-gradient(289deg, rgba(184, 172, 135, 0.8), rgba(181, 143, 27, 0.8));
  
  border-color: rgba(184, 172, 135, 0.6);
}

.button-color-your-background {
      background: linear-gradient(135deg, rgba(144, 238, 144, 0.8), rgba(60, 179, 113, 0.8));
  
  border-color: rgba(144, 238, 144, 0.6);

}

.button-shape-a-rest {
    background: linear-gradient(143deg, rgba(142, 163, 75, 1) 0%, rgba(225, 240, 161, 1) 100%);
  
      border-color: rgba(142, 163, 75, 0.6);

}

.button-sing-along {
  background: linear-gradient(135deg, rgba(152, 251, 152, 0.8), rgba(50, 205, 50, 0.8));
  
  border-color: rgba(152, 251, 152, 0.6);
}

.button-edit-waveform {
  background: linear-gradient(135deg, rgba(176, 224, 230, 0.8), rgba(95, 158, 160, 0.8));
  
  border-color: rgba(176, 224, 230, 0.6);
}

.button-tap-tempo {
          background: linear-gradient(135deg, rgba(173, 216, 230, 0.8), rgba(70, 130, 180, 0.8));
  
  border-color: rgba(173, 216, 230, 0.6);


}

.button-shape-a-clef {
      background: linear-gradient(135deg, rgba(135, 206, 250, 0.8), rgba(70, 130, 180, 0.8));
  
  border-color: rgba(135, 206, 250, 0.6);
}


.button-sign {
      background: linear-gradient(135deg, rgba(221, 160, 221, 0.8), rgba(186, 85, 211, 0.8));
  
  border-color: rgba(221, 160, 221, 0.6);
}

.button-view {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.8), rgba(255, 105, 180, 0.8));
  
  border-color: rgba(255, 182, 193, 0.6);
}

.button-publish {
    background: linear-gradient(25deg, rgba(200, 159, 191, 1) 25%, rgba(184, 125, 166, 1) 58%, rgba(133, 68, 109, 1) 100%);
    border-color: rgba(200, 159, 191, 0.6);
}



input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: transparent;
}

.instruction-text {
font-weight: lighter;
		text-decoration: none;
		font-style: italic;
		font-size: 15px;
}