:root {--img: linear-gradient(white)}

@keyframes scroll-background {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 9.75%
  }
}

body {
  font-family: sans-serif;
  background-image: repeating-linear-gradient(
      45deg,
      white 0% 1.25%,
      #ebf4ff 1.25% 2.5%,
      #ffe8f2 2.5% 3.75%
  );
  /* background-image: linear-gradient(
    45deg,
    white 0%,
    green 50%
  ); */
  /* background-position: 0px 0px; */
  background-size: 200%;
  animation: scroll-background 4.5s infinite linear;
  height: 100%;
  width: 100%
}

.collection-serious {
  position: absolute;
  left: 16%;
  width: 20%;
  height: 100%
}

.collection-unserious {
  position: absolute;
  left: 40%;
  width: 20%;
  height: 100%
}

.collection-notproject {
  position: absolute;
  left: 64%;
  width: 20%;
  height: 100%
}

.project {
  border: 3px solid black;
  border-radius: 3px;
  width: 100%;
  min-height: 15%;
  padding: 5px;
  background-image: var(--img);
  background-size: 125%
}

.project-title {
  font-size: large;
  text-decoration: underline;
  color: #000982
}

.project-text {

}

.project-link {
  text-decoration: none;
  color: inherit
}

.center-text {
  text-align: center;
  width: 100%
}

.narrow-center-text {
  text-align: center;
  width: 50%;
  padding-left: 25%;
  padding-right: 25%; 
}