body {
  background-color: hsl(232, 70%, 10%, 1);
  margin: 0;
  overflow: hidden;
  image-rendering: pixelated;
}

canvas {
  background-color: black;
  width: 100%;
  position: absolute;
}

/* button container */
.buttonCommands {
  position: fixed;
  bottom: 5%;
  left: 2.5%;
  background: hsl(232, 55%, 39%, 0.9);
  border: solid darkblue 0.3rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 20vw;
  padding: 0.5rem;
/*   height: 35%; */
  justify-content: space-around;
}


/* the actual button elements */
.btnTest {
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  text-align: left;
  font-size: 100%;
}


.btnTest:hover, .btnTest:focus  {
  background: hsl(232, 55%, 39%, 1);
  outline: 5px auto -webkit-focus-ring-color;
}

.btnTest:hover::after, .btnTest:focus::after  {
   /*  position the after element to the right  */
  position: absolute;
  right: 15px;
  
/*  uncomment for a bullet point after element  */
  content: "•";
  transform: scale(2.5);
  
/*  uncomment for an icon image to be the after element  */
/*   content: url(https://cdn.glitch.global/e9928590-c7de-482c-ae55-8e299fcafdcb/wizardICO.png?v=1695475839308);
  transform: scale(4); */
}