@layer page {

  /* carousel container includes the slides,
     picture number, next and prev buttons */
  .carousel-box {
    display: block;
    margin-block: 2rem;
    position: relative;
  }

  /* container for the slides */
  .carousel {
    margin-inline: auto;
    overflow: hidden;
    position: relative;
  }

  /* the slides */
  .slide-fade {
    animation: slide-fade 2s;
    border-radius: 4px;
    display: none;
    height: 100%;
    margin: auto;
    object-fit: cover;
    width: 100%;
  }

  /* fading animation */
  @keyframes slide-fade {
    from {
      opacity: 0.4
    }

    to {
      opacity: 1
    }
  }

  /* js timer changes slide-fade display to block */
  .show-slide-fade {
    display: block;
  }

  /* previous & next buttons */
  .btn--next,
  .btn--prev {
    background-color: transparent;
    border-radius: 4px;
    bottom: 0;
    color: white;
    cursor: pointer;
    font-size: 1.25em;
    font-weight: bold;
    padding: 3em .5em;
    position: absolute;
    text-shadow: 0 0 3px black;
    top: 0;
    user-select: none;
  }

  .btn--next {
    right: 0;
  }

  .btn--prev {
    left: 0;
  }

  .btn--next:hover,
  .btn--prev:hover {
    background-color: var(--overlay);
  }

  /* picture numbers */
  #pic-number {
    background-color: transparent;
    bottom: 2px;
    color: white;
    font-size: .7em;
    left: 0;
    letter-spacing: 0.1rem;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    user-select: none;
    width: 100%;
  }

}