:root {
  --background-size: 256px;
  --header-color: 111, 12, 15;
  overflow-x: hidden;
}

body {
    background: url(../images/bg/pizza.png);
    animation: diagscroll 25s linear infinite;
}

h2 {
  text-align: center;
}

section {
  flex-direction: column;
  text-align: center;
}
section.description {
  flex-direction: row;
}
section.screenshots {
  border: none;
}

section ul {
  list-style: none;
  text-align: left;
  font-family: "Comic Relief";
  font-weight: bold;
}

span.role {
  color: #724eb6;
  font-size: small;
  font-weight: normal;
}
@keyframes runnerX {
  0% {
    transform: translateX(120vw)
  }
  30% {
    transform: translateX(30vw)
  }
  35% {
    transform: translateX(40vw)
  }
  50% {
    transform: translateX(50vw)
  }
  60% {
    transform: translateX(20vw)
  }
  70% {
    transform: translateX(10vw)
  }
  100% {
    transform: translateX(-120vw)
  }
}

@keyframes runnerY {
  0% {
    transform: translateY(100px)
  }
  30% {
    transform: translateY(20px)
  }
  40% {
    transform: translateY(100px)
  }
  50% {
    
    transform: translateY(200px)
  }
  60% {
    transform: translateY(300px)
  }
  70% {
    transform: translateY(100px)
  }
  80% {
    transform: translateY(80px)
  }
  100% {
    transform: translateY(200px)
  }
}

#runner {
  transform: translate(200vw, 200vh);
  position: absolute;
  animation: runnerX 3s 300s infinite alternate ease-in
}

#runner img {
  position: absolute;
  animation: runnerY 3s 300s infinite ease-out;
}