body {
  background: url(../images/bg/clouds.png), linear-gradient(#6e4ab4, #8569c0) fixed;
  background-size:  800px;
  animation: xscroll 60s linear infinite;
  image-rendering: crisp-edges;
}

main {
  padding: 40px;
}

div.behave {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 2em;
}

h2 {
  color: #744eb7;
  font-size: 40px;
  filter: drop-shadow(3px 3px #af5cdc80);
}

p {
  margin: 0 2em;
}

dl {
  max-width: 650px;
}

#welcome {
  padding: 0 2em;
}

@keyframes weirdstrictanim {
  from {
    transform: translate(-200vh, 100px)
  }
  to {
    transform: translate(200vh, 600px)
  }
}

#weirdstrict {
  position: absolute;
  transform: translate(-200vh, 100px);
  animation: weirdstrictanim 200ms 300s 1 linear;
}

#notfound {
  margin: 1em 0;
  height: 200px;
  image-rendering: crisp-edges;
}

@media only screen and (max-width: 1100px) {
  .behave img {
    display: none;
  }
}