html {
  --size: 100px;
  --yellow: #edae49;
  --dark-blue: #003d5b;
  --teal: #039486;
  background-color: var(--teal);
}

html::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: var(--dark-blue);
  animation: fade linear 4s infinite alternate;
}

.pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      transparent 43%,
      var(--dark-blue) 44%,
      var(--dark-blue) 50%,
      transparent 51%,
      transparent 75%,
      var(--yellow) 76%,
      var(--yellow) 82%,
      var(--dark-blue) 83%
    ),
    radial-gradient(
      transparent 43%,
      var(--dark-blue) 44%,
      var(--dark-blue) 50%,
      var(--teal) 51%,
      var(--teal) 67%,
      transparent 68%,
      transparent 75%,
      var(--yellow) 76%,
      var(--yellow) 82%,
      var(--teal) 83%
    );
  background-size: var(--size) var(--size);
  background-position:
    0 0,
    calc(var(--size) / 2) calc(var(--size) / 2);
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  33.33% {
    opacity: 0;
  }
  66.66% {
    opacity: 100%;
  }
  100% {
    opacity: 100%;
  }
}