.artistlink {
  opacity:0.5;
  color:gray;
}

.licenselink {
  opacity:0.5;
  color:gray;
}

.attribution-footer {
  display: block;
  font-size: 80%;
  margin-top: -1rem;
}

.cardfig {
  margin: 0 0 0rem;
}

.progress {
  margin-top: 1rem;
}

.datetime {
  margin-top: 1rem;
  font-size: smaller;
  display: flex;
  justify-content: space-between;
}


.card {
    margin-bottom: 2rem;
  }

  .fade-off {
    opacity:0;
    animation: fadeOff ease 30s;
    -webkit-animation: fadeOff ease 30s;
    -moz-animation: fadeOff ease 30s;
    -o-animation: fadeOff ease 30s;
    -ms-animation: fadeOff ease 30s;
  }

  @keyframes fadeOff {
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }
  
  @-moz-keyframes fadeOff {
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }
  
  @-webkit-keyframes fadeOff {
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }
  
  @-o-keyframes fadeOff {
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }
  
  @-ms-keyframes fadeOff {
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
  }
}

  .fade-in {
    animation: fadeIn ease 3s;
    -webkit-animation: fadeIn ease 3s;
    -moz-animation: fadeIn ease 3s;
    -o-animation: fadeIn ease 3s;
    -ms-animation: fadeIn ease 3s;
  }
  
  @keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-moz-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-webkit-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-o-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-ms-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
  }
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}