.shrine-page {
  background-image: var(--shrine-bg);
  background-size: cover;
  background-attachment: fixed;
}

.shrine-photo {
  float: right;
  border-radius: 50%;
  animation-name: shrine-fade;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes shrine-fade {
  0%, 10%   { opacity: 0.1; }
  40%, 60%  { opacity: 1; }
  90%, 100% { opacity: 0.1; }
}

.shrine-icon-row {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  height: 70px;
  margin-bottom: 20px;
  overflow: hidden;
}

.shrine-icon {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 0;
  background-image: var(--shrine-icon);
  background-repeat: no-repeat;
  background-size: contain;
  animation-name: shrine-slide;
  animation-duration: 25s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes shrine-slide {
  0%   { left: 0; }
  50%  { left: calc(100% - 70px); }
  100% { left: 0; }
}