@import url("https://fonts.googleapis.com/css?family=Inter");
/*@import url("https://fonts.googleapis.com/css?family=Lato");*/

body {
  font-family: 'Inter', sans-serif !important;
  /*background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);*/
  background-color: rgb(7, 0, 0);
  color: rgb(252, 243, 230)

}

a {
  color: rgb(252, 243, 230);
  text-decoration: none;
} 
a:hover {
  color: rgb(255, 214, 33);
  text-decoration: none;
} 

a[title]{
  color: rgb(255, 243, 77);
  font-weight: bold;
}
a[title]:hover {
  color: rgb(255, 214, 33);
  text-decoration: none;
  font-weight: bold;
} 

a[nar-interactive]:hover {
  color: rgb(255, 50, 27);
  text-decoration: none;
} 


/* Custom player style */
midi-player {
    display: block;
    width: inherit;
    margin: 4px;
    margin-bottom: 0;
  }

midi-player::part(control-panel) {
    border-radius: 10px 10px 0 0;
  }

midi-player::part(play-button) {
    border: 2px solid currentColor;
    border-radius: 20px;
    transition: all 0.2s;
    content: 'hello';
  }
  
  /* Custom visualizer style */
midi-visualizer .piano-roll-visualizer {
    background: rgba(255, 255, 255, 0.942);
    margin: 4px;
    margin-top: 0;
    overflow: auto;
  }
midi-visualizer svg rect.note {
    opacity: 0.6;
    stroke-width: 2;
  }
midi-visualizer svg rect.note[data-instrument="0"]{
    fill: #e22;
    stroke: rgba(85, 0, 0, 0.541);
  }
midi-visualizer svg rect.note[data-instrument="2"]{
    fill: #2ee;
    stroke: #055;
  }
midi-visualizer svg rect.note[data-is-drum="true"]{
    fill: #888;
    stroke: #888;
  }
midi-visualizer svg rect.note.active {
    opacity: 0.9;
    stroke: #000;
  }
  



.col-l{
    width:60%;
    float:left;
}

.col-r{
  width:40%;
  float:left;
}


.wrapper {
  display: inline-block;
  position: relative; 
  transition: .3s ease;
}

.wrapper .overlay {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  color:rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, 0.461);
  opacity: 0;
  transition: .3s ease;
}

.img-description {
  top: 30%;
  left: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  text-align:center;
}

.wrapper .overlay:hover {
  opacity: 1;
}