:root {
  --bg-color-h: 25.71;
  --bg-color-s: 24.71%;
  --bg-color-l: 16.67%;
  --text-h: 22.5;
  --text-s: 5.71%;
  --text-l: 72.55%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));
  --text-color: hsl(var(--text-h), var(--text-s), var(--text-l));
  --pan-distance: 20;
  --pan: calc(var(--pan-distance) * 0.5%);
  --compensate-scale: var(--pan-distance) / 100;
  --min-scale: calc(1 + var(--compensate-scale));
  --max-scale: calc(1.3 + var(--compensate-scale));
}

*,
::after,
::before {
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  align-items: center;
  background: var(--bg-color);
  color: var(--text-color);
  display: grid;
  font-family: 'Arial', sans-serif;
  justify-items: center;
  margin: 0;
  min-height: 100lvh;
  place-items: center;
  width: 100%;
}

.kenburns-slideshow {
  --border-radius: 0.75rem;
  aspect-ratio: 16/9;
  border-radius: clamp(
    0.0625rem,
    var(--border-radius),
    (100% - var(--border-radius)) / 2
  );
  display: grid;
  max-width: 64rem;
  overflow: hidden;
  position: relative;
  width: calc(100% - 2rem);
  z-index: 0;
}

.kenburns-slide {
  aspect-ratio: inherit;
  contain: strict;
  grid-area: 1/-1;
  opacity: 0;
  position: relative;
}

.kenburns-slide:not(:first-of-type) {
  display: none;
}

.kenburns-img {
  aspect-ratio: inherit;
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0;
  color: transparent;
  display: block;
  font: 0/0 a;
  height: 100%;
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  outline: none;
  padding: 0;
  position: relative;
  text-shadow: none;
  vertical-align: middle;
  width: 100%;
}

.resources {
  background: hsla(
    var(--bg-color-h),
    var(--bg-color-s),
    calc(var(--bg-color-l) - 5%),
    0.75
  );
  display: grid;
  font-size: 0.6875rem;
  font-weight: 300;
  grid-auto-flow: column;
  line-height: 1.3;
  padding: 0.5rem;
  pointer-events: auto;
}

.resources a {
  align-content: center;
  display: grid;
  justify-content: center;
  padding: 0 0.5rem;
  place-content: center;
  transition: color 0.2s ease-in-out;
}

.resources a,
.resources a:visited {
  color: hsla(
    var(--text-color-h),
    var(--text-color-s),
    var(--text-color-l),
    0.75
  );
}

.resources a:active,
.resources a:focus-visible {
  color: hsla(var(--text-color-h), var(--text-color-s), var(--text-color-l), 1);
}

.resources a:focus-visible {
  outline: none;
}

.resources a:not(:first-child) {
  border-inline-start: thin solid currentColor;
}

@keyframes pan-right {
  0% {
    transform: translateX(calc(-1 * var(--pan))) scale(var(--min-scale));
  }

  100% {
    transform: translateX(var(--pan)) scale(var(--min-scale));
  }
}

@keyframes pan-left {
  0% {
    transform: translateX(var(--pan)) scale(var(--min-scale));
  }

  100% {
    transform: translateX(calc(-1 * var(--pan))) scale(var(--min-scale));
  }
}

@keyframes pan-down {
  0% {
    transform: translateY(calc(-1 * var(--pan))) scale(var(--min-scale));
  }

  100% {
    transform: translateY(var(--pan)) scale(var(--min-scale));
  }
}

@keyframes pan-up {
  0% {
    transform: translateY(var(--pan)) scale(var(--min-scale));
  }

  100% {
    transform: translateY(calc(-1 * var(--pan))) scale(var(--min-scale));
  }
}

@keyframes pan-zoom-in-right {
  0% {
    transform: translateX(calc(-1 * var(--pan))) scale(var(--min-scale));
  }

  100% {
    transform: translateX(var(--pan)) scale(var(--max-scale));
  }
}

@keyframes pan-zoom-in-left {
  0% {
    transform: translateX(var(--pan)) scale(var(--min-scale));
  }

  100% {
    transform: translateX(calc(-1 * var(--pan))) scale(var(--max-scale));
  }
}

@keyframes pan-zoom-in-down {
  0% {
    transform: translateY(calc(-1 * var(--pan))) scale(var(--min-scale));
  }

  100% {
    transform: translateY(var(--pan)) scale(var(--max-scale));
  }
}

@keyframes pan-zoom-in-up {
  0% {
    transform: translateY(var(--pan)) scale(var(--min-scale));
  }

  100% {
    transform: translateY(calc(-1 * var(--pan))) scale(var(--max-scale));
  }
}

@keyframes pan-zoom-out-right {
  0% {
    transform: translateX(calc(-1 * var(--pan))) scale(var(--max-scale));
  }

  100% {
    transform: translateX(var(--pan)) scale(var(--min-scale));
  }
}

@keyframes pan-zoom-out-left {
  0% {
    transform: translateX(var(--pan)) scale(var(--max-scale));
  }

  100% {
    transform: translateX(calc(-1 * var(--pan))) scale(var(--min-scale));
  }
}

@keyframes pan-zoom-out-down {
  0% {
    transform: translateY(calc(-1 * var(--pan))) scale(var(--max-scale));
  }

  100% {
    transform: translateY(var(--pan)) scale(var(--min-scale));
  }
}

@keyframes pan-zoom-out-up {
  0% {
    transform: translateY(var(--pan)) scale(var(--max-scale));
  }

  100% {
    transform: translateY(calc(-1 * var(--pan))) scale(var(--min-scale));
  }
}

@keyframes pan-zoom-in-top-left-to-bottom-right {
  0% {
    transform: translate(calc(-1 * var(--pan)), calc(-1 * var(--pan)))
      scale(var(--min-scale));
  }

  100% {
    transform: translate(var(--pan), var(--pan)) scale(var(--max-scale));
  }
}

@keyframes pan-zoom-out-bottom-right-to-top-left {
  0% {
    transform: translate(var(--pan), var(--pan)) scale(var(--max-scale));
  }

  100% {
    transform: translate(calc(-1 * var(--pan)), calc(-1 * var(--pan)))
      scale(var(--min-scale));
  }
}

@keyframes pan-zoom-in-bottom-left-to-top-right {
  0% {
    transform: translate(calc(-1 * var(--pan)), var(--pan))
      scale(var(--min-scale));
  }

  100% {
    transform: translate(var(--pan), calc(-1 * var(--pan)))
      scale(var(--max-scale));
  }
}

@keyframes pan-zoom-out-top-right-to-bottom-left {
  0% {
    transform: translate(var(--pan), calc(-1 * var(--pan)))
      scale(var(--max-scale));
  }

  100% {
    transform: translate(calc(-1 * var(--pan)), var(--pan))
      scale(var(--min-scale));
  }
}

@keyframes pan-zoom-in-top-right-to-bottom-left {
  0% {
    transform: translate(var(--pan), calc(-1 * var(--pan)))
      scale(var(--min-scale));
  }

  100% {
    transform: translate(calc(-1 * var(--pan)), var(--pan))
      scale(var(--max-scale));
  }
}

@keyframes pan-zoom-out-bottom-left-to-top-right {
  0% {
    transform: translate(calc(-1 * var(--pan)), var(--pan))
      scale(var(--max-scale));
  }

  100% {
    transform: translate(var(--pan), calc(-1 * var(--pan)))
      scale(var(--min-scale));
  }
}