body {
  display: flex;
  place-items: center;
  min-height: 100vh;
  background-color: black;
}

.jumbotron {
  position: fixed;
  top: 0;
}

.jumbotron .row ul img {
  height: 100vh;
  margin-top: -50px;
}

.

.container,
.container-fluid {
  max-width: none;
  padding: 0;
}

.row .col-xs-12 {
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  transition: all 0.5s ease;
}

h1 {
  font-size: 3.75rem;
  position: absolute;
  color: #ffdc9a;
  text-shadow: 0 0 0px white, 4px 4px 3px #000;
  z-index: 1;
  animation: fadeIn 3s 3s both;
  opacity: 0;
  margin-top: 33.333vh;
  padding: 10vh 2%;
}

h2 {
  font-size: 2.5rem;
  position: absolute;
  color: #ffdc9a;
  text-shadow: 0 0 0px white, 4px 4px 3px #000;
  z-index: 1;
  padding: 6% 3%;
  opacity: 0;
  transition: opacity 1s ease-out;
}

h3 {
  font-size: 1.5rem;
  position: absolute;
  padding: 9% 3%;
  opacity: 0;
  z-index: 1;
  color: #ffdc9a;
  text-shadow: 0 0 0px white, 4px 4px 3px #000;
  transition: opacity 1s ease-out;
}

.year:hover h2, .month:hover h3, .day:hover h4 {
  opacity: 1;
}

li {
  padding: 0;
  z-index: 2;
}

.years,
.months,
.days {
  overflow: hidden;
  animation: text-focus-in 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s alternate both;
  height: 95vh;
}

.years {
  width: auto;
}

.month {
  max-width: 0;
}

.days {
  width: 0;
  overflow: scroll;
  max-height: 100vh;
}

.months {
  width: 0;
  padding: 0;
}

.years, .months {
  margin-left: 10%;
}

.years .row ul {
  display: flex;
  min-height: 50%;
  list-style-type: none;
}

.months .row ul {
  display: flex;
  list-style-type: none;
}

.days .row ul {
  display: flex;
  list-style-type: none;
}

.year img {
  max-width: 100%;
  height: 100vh;
  object-fit: cover;
  transition: all 0.5s ease;
}

.month img {
  max-width: 100%;
  height: 31vh;
  object-fit: cover;
  transition: all 0.5s ease;
}

.day img {
  max-width: 95%;
}

.day {
  max-width: 0;
}

ul:is(:hover, :focus-within) img {
  opacity: calc(0.333 + (var(--active-lerp, 0) * 0.9));
  filter: grayscale(calc(1 - var(--active-lerp, 0)));
}

ul:is(:hover, :focus-within) h2 {
  opacity: calc(0.333 + (var(--active-lerp, 0) * 0.9));
  filter: grayscale(calc(1 - var(--active-lerp, 0)));
}

:root {
  --lerp-0: 1;
  --lerp-1: 0.5787037;
  --lerp-2: 0.2962963;
  --lerp-3: 0.125;
  --lerp-4: 0.037037;
  --lerp-5: 0.0046296;
  --lerp-6: 0;
}

li {
  flex: calc(0.5 + (var(--active-lerp, 0) * 1));
  transition: flex 0.5s ease;
}

li:is(:hover, :focus-within) {
  --active-lerp: var(--lerp-0);
  z-index: 7;
}

li:has(+ li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li {
  --active-lerp: var(--lerp-1);
  z-index: 6;
}

li:has(+ li + li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li {
  --active-lerp: var(--lerp-2);
  z-index: 5;
}

li:has(+ li + li + li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li {
  --active-lerp: var(--lerp-3);
  z-index: 4;
}

li:has(+ li + li + li + li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li+li {
  --active-lerp: var(--lerp-4);
  z-index: 3;
}

li:has(+ li + li + li + li + li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li+li+li {
  --active-lerp: var(--lerp-5);
  z-index: 2;
}

li:has(+ li + li + li + li + li + li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li+li+li+li {
  --active-lerp: var(--lerp-6);
  z-index: 1;
}

.kenburns-top {
  -webkit-animation: kenburns-top 5s ease-out reverse forwards;
  animation: kenburns-top 5s ease-out reverse forwards;
  opacity: 50%;
}

@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }

  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}

@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }

  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}

.text-focus-in {
  -webkit-animation: text-focus-in 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s alternate both;
  animation: text-focus-in 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s alternate both;
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes dissolve {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  40% {
    opacity: 0.5;
  }

  75% {
    opacity: 1;
  }
}