* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  background-color: darkgreen;
  /* background: linear-gradient(
    0deg,
    rgb(17, 51, 161) 0%,
    rgb(136, 34, 195) 100%
  ); */
  /* rgb(34, 195, 96) alternative to the purple, another alternative is to start the top colour at 50%*/
}

h1, h2, p {
  font-family: sans-serif;
  color:rgb(202, 249, 222);
  margin-bottom: .5em;
}
h1 {
  text-align: center;
  margin-top: 1em;
  /* margin-bottom: .5em; */
  /* font-family: "comic sans MS", sans-serif; */
  /* font-family: sans-serif;
  color: rgb(202, 249, 222); */
}

h2 {
  margin-top: 1em;
}
p {
  /* margin-top: 1em; */
  width: 60vw;
  text-align: left;
  /* font-family: sans-serif;
  color: rgb(202, 249, 222); */
}

#gameCanvas {
  box-shadow: 10px 10px 20px black;
  box-shadow: 10px 10px black;
}

/* note: he did these as a style tag bit in the head of his html... and didn't do the *{} bit */