body {
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  }
  
  /* a {
    color: #00B7FF;
  } */
  .flex{
    display: flex;
  }
  
  .flex.column{
    flex-direction: column;
  }
  
  .flex-child{
    flex: 1;
  }
  
  .side, .main{
    flex: 1;
    margin: 5px;
    padding-right: 15px;
  }
  
  .side{
    max-width: 400px;
    border-right: solid 1px #ccc;
  }
  
  .side.small {
    max-width: 200px;
  }
  
  .main {
    padding-left: 15px;
  }
  .lyric-content{
    font-size: 18px;
    max-width: 100%;
  }
  .label{
    margin-bottom: 5px;
  }
  
  table tr.selected,
  table tr:hover{
    background-color: #ddd;
    cursor: pointer;
  }
  
  .text-center{
    text-align: center;
  }
  
  .center-box{
    align-items: center;
  }


.bg-app{
  background-color: rgb(212 214 234)
}

pre.column-2 {
  column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
}

pre.column-3 {
  column-count: 3;
  -webkit-column-count: 3;
  -moz-column-count: 3;
}
pre.column-2, pre.column-3{
  text-wrap: balance;
  -webkit-column-rule: 2px dotted #ccc;
  -moz-column-rule: 2px dotted #ccc;
  column-rule: 2px dotted #ccc;
  column-fill: balance;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
}

.colorful {
  background-clip: text;
  -webkit-background-clip: text;
  /*background-image: linear-gradient(30deg, #62bafa, rgb(81, 69, 205));*/
  background-image: linear-gradient(30deg, #6aadf3, #645cd3);
  color: transparent;
  font-style: normal;
  margin: -.2em;
  padding: .2em;
}

.colorful-inverted {
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(30deg,#645cd3, #6aadf3);
  color: transparent;
  font-style: normal;
}

.colorful-image{
  background-image: linear-gradient(30deg, #62bafa, rgb(81, 69, 205));
  color: transparent;
  font-style: normal;
}

.background-triadmusic {
  background-image: url("../img/background-world-2.png");
  background-repeat: no-repeat;
  background-size: cover;
}