#trackTitle {
  font-family: 'MicroExtendFLF', sans-serif;
  font-size  : 2em;
  font-weight: 700;
  padding    : 1em;
  text-align : center;
  white-space: pre;
  color      : var(--highlight-color);
}

.track-info-container {
  width         : 100%;
  display       : flex;
  align-items   : center;
  flex-direction: column;
}

.track-info-fields {
  display       : flex;
  flex-direction: column;
  padding-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
}

.track-info-field {
  display       : flex;
  flex-direction: row;
  align-items   : flex-start;
}

.track-info-field>label {
  width      : 4rem;
  display    : flex;
  font-weight: bolder;
  flex-shrink: 0;
}

.track-info-field>div {
  flex        : 1;
  min-width   : 0;
  overflow-wrap: break-word;
  word-wrap   : break-word;
}

/* meme orange que la piste selectionnee, visitee ou non */
.track-info-field a,
.track-info-field a:visited,
.track-info-field a:active {
  color          : var(--highlight-color);
  text-decoration: none;
}

.track-info-field a:hover {
  text-decoration: underline;
}

.track-info>div {
  padding-bottom: 5px;
}

.artwork {
  padding   : 2em;
  display   : none;
  /* make the img with its container and keep the aspect ratio*/
  object-fit: contain;
  width     : 100%;
  height    : 100%;
  max-height: 43vh;
  cursor: pointer;
}

.artwork.visible {
  display         : block;
}