* {
  margin: 0px;
  padding: 0px;
}

html, body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(63, 95, 57);
  background-image:
    radial-gradient(circle at 100% 150%, rgb(63, 95, 57) 24%, rgb(102, 127, 63) 24%, rgb(102, 127, 63) 28%, rgb(63, 95, 57) 28%, rgb(63, 95, 57) 36%, rgb(102, 127, 63) 36%, rgb(102, 127, 63) 40%, transparent 40%, transparent),
    radial-gradient(circle at 0 150%, rgb(63, 95, 57) 24%, rgb(102, 127, 63) 24%, rgb(102, 127, 63) 28%, rgb(63, 95, 57) 28%, rgb(63, 95, 57) 36%, rgb(102, 127, 63) 36%, rgb(102, 127, 63) 40%, transparent 40%, transparent),
    radial-gradient(circle at 50% 100%, rgb(102, 127, 63) 10%, rgb(63, 95, 57) 10%, rgb(63, 95, 57) 23%, rgb(102, 127, 63) 23%, rgb(102, 127, 63) 30%, rgb(63, 95, 57) 30%, rgb(63, 95, 57) 43%, rgb(102, 127, 63) 43%, rgb(102, 127, 63) 50%, rgb(63, 95, 57) 50%, rgb(63, 95, 57) 63%, rgb(102, 127, 63) 63%, rgb(102, 127, 63) 71%, transparent 71%, transparent),
    radial-gradient(circle at 100% 50%, rgb(102, 127, 63) 5%, rgb(63, 95, 57) 5%, rgb(63, 95, 57) 15%, rgb(102, 127, 63) 15%, rgb(102, 127, 63) 20%, rgb(63, 95, 57) 20%, rgb(63, 95, 57) 29%, rgb(102, 127, 63) 29%, rgb(102, 127, 63) 34%, rgb(63, 95, 57) 34%, rgb(63, 95, 57) 44%, rgb(102, 127, 63) 44%, rgb(102, 127, 63) 49%, transparent 49%, transparent),
    radial-gradient(circle at 0 50%, rgb(102, 127, 63) 5%, rgb(63, 95, 57) 5%, rgb(63, 95, 57) 15%, rgb(102, 127, 63) 15%, rgb(102, 127, 63) 20%, rgb(63, 95, 57) 20%, rgb(63, 95, 57) 29%, rgb(102, 127, 63) 29%, rgb(102, 127, 63) 34%, rgb(63, 95, 57) 34%, rgb(63, 95, 57) 44%, rgb(102, 127, 63) 44%, rgb(102, 127, 63) 49%, transparent 49%, transparent);
  background-size: 5rem 2.5rem;
}

canvas {
  margin: 0px auto;
}