style.css

:root {
  --logo-width: 10rem;
}

@property --red-stripe-index {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

html,
body {
  height: 100%;
}

body {
  --stripes-width: 3rem;

  margin: 0;
  font-family: "Comic Sans", "Impact", sans-serif;
  background: repeating-linear-gradient(
    -45deg,
    #d23f45aa calc(var(--red-stripe-index) * var(--stripes-width)),
    #d23f45aa calc(calc(var(--red-stripe-index) + 1) * var(--stripes-width)),
    #d9a638aa calc(calc(var(--red-stripe-index) + 1) * var(--stripes-width)),
    #d9a638aa calc(calc(var(--red-stripe-index) + 2) * var(--stripes-width)),
    #92a678aa calc(calc(var(--red-stripe-index) + 2) * var(--stripes-width)),
    #92a678aa calc(calc(var(--red-stripe-index) + 3) * var(--stripes-width)),
    #798889aa calc(calc(var(--red-stripe-index) + 3) * var(--stripes-width)),
    #798889aa calc(calc(var(--red-stripe-index) + 4) * var(--stripes-width)),
    #87485faa calc(calc(var(--red-stripe-index) + 4) * var(--stripes-width)),
    #87485faa calc(calc(var(--red-stripe-index) + 5) * var(--stripes-width))
  );
  animation: moveStripes 1s linear 0s infinite;
}

@keyframes moveStripes {
  from {
    --red-stripe-index: 0;
  }

  to {
    --red-stripe-index: -5;
  }
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title-flash,
.bottom-text {
  background: #ece81a;
}

.logo {
  width: var(--logo-width);
  position: absolute;
  z-index: 420;
  animation:
    moveX 7s linear 0s infinite alternate,
    moveY 12s linear 0s infinite alternate,
    rotate 5s linear 0s infinite;
  filter: drop-shadow(0 0 10px #696969);
}

@keyframes moveX {
  from {
    left: 0;
  }

  to {
    left: calc(100vw - var(--logo-width));
  }
}

@keyframes moveY {
  from {
    top: 0;
  }

  to {
    top: calc(100vh - var(--logo-width));
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}