:root {
  --rand: 5vmax;
  --back: rgb(0, 7, 27);
  --front: rgb(255, 57, 37);
}

@keyframes fadein {
  from {
    opacity: 0;
  }
}

@keyframes rewind {
  20% {
    stroke-dashoffset: 1000;
  }

  60%,
  100% {
    stroke-dashoffset: 0;
  }
}

body {
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: var(--back);
  transition: background 0.3s ease;
}

body.light {
  background: var(--front);
}

body > div {
  padding: var(--rand);
  height: calc(100vh - var(--rand) * 2);
}

body > div svg {
  width: 100%;
  height: 100%;
  animation: fadein 3s ease 0.1s both;
}

body > div svg > path {
  fill: none;
  stroke: var(--front);
  sstroke-linecap: square;
  animation: rewind 7s ease 0s both infinite alternate;
}

body.light > div svg > path {
  stroke: var(--back);
}