body{
    background-color: aquamarine;
    margin: 0px 0px;
    padding: 10px;
}
.agenda{
    width: 50%;
    height: auto;
    background-color: #9acd32;
    text-align: center;
    padding: 0%;
    margin: 0% auto;
    border-radius: 50px;
}
.string{
    color: #4f3dd1;
    background-color: springgreen;
    font-size: 20px;
    width: 550px;
    text-align: center;
    padding: 0%;
    margin: auto;
    border-radius: 50px;
}
.element{
    margin: 0px;
}

.element li{
  list-style: none;
}

.element h2{
    list-style: none;
    background-color: rgb(20, 197, 220);
    padding: 50px;
    margin: 10px 20px;
    border-radius: 50px;
    color: cornflowerblue;
    font-size: 25px;
}
.element h3{
    color: magenta;
}

.element p{
    margin: 10px 10px;
}

.toggle-lyrics {
  background-color: #9370DB;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.toggle-lyrics:hover {
  background-color: #7B68EE;
}

.lyrics {
  margin-top: 15px;
  padding: 10px;
  background-color: #f9f6ff;
  border-left: 4px solid #9370DB;
  color: #333;
  font-style: italic;
  display: none; 
  max-height: 300px;
  overflow-y: auto;
  font-size: 0.95rem;
}

.footer {
  text-align: center;
  margin-top: 40px;
  font-size: small;
  color: gray;
}

.search-bar {
  text-align: center;
  margin: 20px 0;
}

#searchBox {
  width: 300px;
  padding: 8px;
  font-size: 1rem;
  border: 2px solid #ccc;
  border-radius: 8px;
}