canvas {
  border: 1px solid black;
}
body {
  /*get rid of top and left default 8px margin value by setting the body margin value to 0*/
  margin: 0;
  /*set the body's background color to black when before we start the game*/
  background: black;
}
/*set the position to fixed so the div container will stay at top of canvas, it won't push the canvas down*/
.fixed {
  position: fixed;
}
/*set the dive container's top and left margin to 8px, give it some space from the top corner of the screen*/
.m-t-l-8 {
  margin-top: 8px;
  margin-left: 8px;
}
/*if user-selct is not set to none, whenver we click the score, it will flash and we don't want that*/
.user-select-none {
  user-select: none;
}

/*make the div expand the entire width and height of the browser*/
.inset-0 {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/*put the div into flex mode to move around things easily*/
.flex {
  display: flex;
}

/*center things vertically*/
.items-center {
  align-items: center;
}

/*center things horizontally*/
.justify-center {
  justify-content: center;
}

/*set background color to white*/
.bg-white {
  background-color: white;
}

/*set the container's maximum width to 28rem, 1 rem = 16px*/
.max-w-md {
  max-width: 28rem;
}

/*set the container to its max width*/
.w-full {
  width: 100%;
}

/*set padding of all sides to 24px. 1.5rem = 24px*/
.p-24 {
  padding-top: 1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
}

/*set text size 64px; 4rem = 64px*/
.text-64 {
  font-size: 4rem;
}

/*set text to bold*/
.bold {
  font-weight: bolder;
}

/*set text size to medium*/
.text-md {
  font-size: medium;
}

/*set text color to gray*/
.text-gray {
  color: gray;
}

/*set text in the center of the container*/
.text-center {
  text-align: center;
}

/*background color blue*/
.bg-blue {
  background-color: #516beb;
}

/*text color white*/
.text-white {
  color: white;
}

/*padding top and bottom (y axis) 32px. 2rem = 32px*/
.py-32 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/*fully rouded corners*/
.rounded-full {
  border-radius: 9999px;
}

/*get rid of default ugly borders*/
.border-none {
  border: none;
}

/*set the line height to 1px*/
.leading-none {
  line-height: 1;
}

/*set margin bottom to 48px; 3rem = 48px*/
.mb-48 {
  margin-bottom: 3rem;
}