h1{
    text-align: center;
}
h2.display-4{
    text-align: center;
}
p{
    line-height: 1.1rem; 
    font-size: 0.8rem;
    padding-left: 1%;
}
img{
    padding: 4px;
}
.display-1{
    padding-bottom: 0px;
    font-size: 3.0rem;
}
.display-4{
    font-size: 2.0rem;
    color: rgb(31,31,31);
}
.display-6{
    font-weight: 400;
    font-size: 1.3rem;
}

ol{
    list-style-position: inside;
}
ul{
    list-style-position: inside;
}
i{
    font-size: 0.95rem;
    color:slategrey;
}
.bpm{
    background-color:dimgray;
    color: white;
    font-size: xx-small;
    margin-top: 0;
    padding: 2px;
    vertical-align: middle;
    border-radius: 9px;
    white-space: pre;
}
.btn-primary{
    height: 20px;
    width: 10px;
}

.spc{
    white-space: pre;
}

.fa-play{
    color: rgb(31,31,31);
}

.fa-star-of-life{
    color: crimson;
}
.fa-clock{
    font-size: 1.5rem;
    color: crimson;
}

.fa-music{
    font-size: 1.5rem;
    color: crimson;
}
.fa-list-ol{
    font-size: 1.5rem;
    color: crimson;
}

.fa-birthday-cake{
    font-size: 1.5rem;
    color: crimson;
}

.fa-guitar{
    font-size: 1.5rem;
    color: crimson;
}
.fa-calendar-alt{
    font-size: 1.5rem;
    color: crimson;
}

.important {
    color: crimson;
    font-weight: 400;
}

.popup{
    position: relative;
    display: inline-block;
    cursor: pointer;
    background-color: crimson;
    color: white;
    border-radius: 9px;
    white-space: pre;
    vertical-align: middle;
    font-size: x-small;


}

/* The actual popup (appears on top) */
.popup .popuptext{
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px,0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: -20%;
    margin-left: -80px;
    font-size: larger;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  /* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

  progress-bar{
      padding: 20px;
      margin: 20% auto;

  }

  .column{
      float: left;
      width: 30%;
  }

  .row:after {
      content: "";
      display: table;
      clear: both;
  }

.btn{
      height: 30px;
      width: 180px;
      font-size: 0.75rem;
      padding-left: 0;
  }