/* Melodia-app tyyli */

#melodia-app {
  font-family: 'Marker Felt', 'Comic Sans MS', cursive;
  text-align: center;
  margin: 20px;
}

#tehtavaButtons {
  margin: 20px 0;
}

#tehtavaButtons button {
  font-family: 'Marker Felt', cursive;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  margin: 5px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 0px #2196F3;
}

#tehtavaButtons button.active {
  background: #2196F3;
}

#tehtavaButtons button:hover {
  background: #2196F3;
}

#melodia-app button {
  font-family: 'Marker Felt', cursive;
  font-size: 18px;
  margin: 5px;
  padding: 10px 15px;
  border: 0px solid  #FFFFFF;
  border-radius: 8px;
  background: #e0e0e0;
  cursor: pointer;
}

#melodia-app button.active {
  background: #4CAF50;
  color: white;
}

#melodia-app button.flash {
  animation: flashAnim 0.3s;
}

@keyframes flashAnim {
  0% { background: #4CAF50; color: #fff; }
  100% { background: #e0e0e0; color: black; }
}

/* Player-napit */
#player-controls {
  margin: 15px 0;
}

#player-controls button {
  font-size: 24px;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #f5f5f5;
  border: 0px solid  #FFFFFF;
  cursor: pointer;
  margin: 5px;
}

#player-controls button:hover {
  background: #ddd;
}

/* Progress bar */
#progress {
  width: 300px;
  margin-top: 10px;
}

/* Nuottiviivasto */
#paperUser {
  margin: 20px auto 40px auto;
  transform: scale(1.6);
  transform-origin: top center;
  display: inline-block;
}

/* Vastausstatus ja tähdet */
#status {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
}

#stars {
  font-size: 40px;
  color: gold;
  text-align: center;
  margin-top: 10px;
}

/* Oikein/väärin nuottien värit */
.abcjs-note.correct path {
  fill: green !important;
  stroke: green !important;
}

.abcjs-note.wrong path {
  fill: red !important;
  stroke: red !important;
}