html {
  scroll-timeline: --main-timeline y;
}

body {
  flex-direction: column;
  height: 3143px;
}

main {
  background: url(../images/secret/sinnoh_bg.png) no-repeat;
  height: 3543px;
  width: 777px;
  position: relative;
  flex-direction: row;
  --scroll-start: -320px;
  --scroll-end: 250px;
  animation: parallax linear;
  animation-timeline: --main-timeline;
}
footer {
  height: 900px;
  background: url(../images/qna/sport.gif) text 200%;
  color: #572f7220;
  padding: 2em;
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: end;
}

img {
  align-self: start;
  padding: 0 !important;
  position: absolute;
}
#first {
  left: 400px;
}
#second {
  left: 100px;
}
#third {
  left: 449px;
}
#fourth {
  left: 0;
}

.sixth {
  padding-left: 4em;
  align-self: end;
}

p {
  white-space: pre;
}

@keyframes parallax {
  0% {
    background-position-y: var(--scroll-start);
  }
  100% {
    background-position-y: var(--scroll-end);
  }
}

@media only screen and (max-width: 750px) {
  p {white-space: normal;}
}