html {
  width: 100%;
  height: 100%;
  --size: 100px;
  --yellow: #edae49;
  --dark-blue: #003d5b;
  --blue-collar: #005f7a;
  --teal: #039486;
  --light-gray: #e5e5e5;
  background-color: var(--teal);
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.bg-pattern {
  z-index: -1;
  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);
}