style.css

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

body {
  font-family: "Bubblegum Sans", cursive, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: lightblue;
  color: midnightblue;
  font-size: 16px;
}

#game {
  margin: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.game-score {
  font-size: 15px;
  color: midnightblue;
  padding: 5px 10px 5px 25px;
  margin: 20px;
  border-radius: 15px;
  box-shadow: 5px 5px 10px mediumblue, 1px 3px 5px midnightblue inset;
}

.canvas-wrapper {
  display: flex;
  margin: 10px;
  background-color: lightskyblue;
  border-radius: 5px;
  box-shadow: 5px 5px 10px mediumblue, 2px 3px 5px midnightblue inset;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.2'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23525053'/%3E%3C/g%3E%3C/svg%3E%0A");
}