:root {
  --shadow-color: rgba(45, 45, 45, 0.5); /* Default shadow color */
  --text-anim-len: 4;
}

body {
  margin: 0;
  padding: 0;
  background-color: white;
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  background-color: black;
}

#img-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  filter: sepia(33%) saturate(72%) hue-rotate(71deg);
}

#metadata {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 96vh;
  width: 100vw;
  z-index: -5;
  top: 0px;
  left: 0px;
  /* transform: rotate(90deg) */
}

#date, #place {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0;
}

#date {
  margin-bottom: 160px;
  margin-right: 400px;
  order: 2; /* Display date section on top */
  animation: img-animation1 15s steps(5, end) forwards infinite;
}

#place {
  order: 1; /* Display place section at the bottom */
  animation: img-animation2 20s steps(5, end) forwards infinite;
}

#date img, #place img {
  width: auto;
  height: 25px;
  margin: 0;
  padding: 0;
  scale: 75%;
}

@keyframes img-animation1 {
  0% { transform: translateX(-250px) }
  25% { transform: translateX(-100px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(-100px) }
  100% { transform: translateX(-20px) }
}

@keyframes img-animation2 {
  0% { transform: translateX(-50px) }
  25% { transform: translateX(-200px) }
  50% { transform: translateX(-30px) }
  75% { transform: translateX(-100px) }
  100% { transform: translateX(-220px) }
}

#text-container {
  font-family: Arial Narrow;
  position: absolute;
  color: rgba(113, 121, 113, 255);
  width: 75vw;
  height: 75vh;
  z-index: -2;
  top: 20px;
  right: 0px;
}

#text-container > #sub {
  font-size: xx-small;
  margin-top: -10px;
  text-align: right;
}

.img {
  position: absolute;
  transition: transform 2s linear; /* Constant speed transition */
  scale: 45%;
}

#artist {
  font-size: 32px;
  position: absolute;
  top: 0px;
  left: -100px;
  width: 100%;
  animation: move-a-little2 5s steps(5, end) infinite;
}

#artist-img {
  position: absolute;
  bottom: 200px;
  left: 230px;
  width: 250px;
  animation: move-a-little1 10s linear infinite;
  z-index: -1;
}

#artist-desc {
  position: absolute;
  width: 350px;
  text-align: justify;
  /* background: #ffffff; */
  /* border: 1px solid #ffffffee; */
  padding: 4px;
  top: 0px;
  left: 280px;
  /* backdrop-filter: blur(1px); */
  /* box-shadow: 0px 0px 20px 50px white; */
  font-style: italic;
  opacity: 50%;
  animation: shake 200s linear infinite;
}

/* Animation Definitions */
@keyframes blur {
  0% { filter: blur(0px); }
  50% { filter: blur(2px); }
  0% { filter: blur(0px); }
}

@keyframes fade-in {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(5px); }
}

@keyframes pulse {
  0% { transform: rotate(1deg); }
  50% { transform: rotate(5deg); }
  100% { transform: rotate(1deg); }
}

@keyframes move-a-little {
  /* 0% { left: 0; top: 0}
  50% { left: 4px; top: -6px; }
  100% { left: 0; top: 0} */
}

@keyframes move-a-little2 {
  0% { transform: translateX(0px) translateY(-5px); }
  50% { transform: translateX(20px) translateY(0px);  }
  100% { transform: translateX(10px) translateY(10px); }
}

@keyframes pulse-smaller {
  0% { transform: scale(0.1); }
  50% { transform: scale(0.4); }
  100% { transform: scale(0.1); }
}