* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  /*   use in the background one of the patterns elaborated through the algorithm */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: hsl(0, 0%, 95%);
  background: url('data:image/svg+xml;utf8,<svg opacity="0.05" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 650"><defs><path id="a" d="M0 0h80"/><path id="c" d="M80 0v80"/><path id="d" d="M0 80h80"/><path id="b" d="M0 0v80"/></defs><g stroke="hsl(0, 0%, 80%)" stroke-width="10" stroke-linejoin="square" stroke-linecap="square" fill="none"><g transform="translate(5 5)"><use href="%23a"/><use href="%23b"/></g><g transform="translate(85 5)"><use href="%23a"/><use href="%23c"/><use href="%23d"/></g><g transform="translate(165 5)"><use href="%23a"/><use href="%23d"/><use href="%23b"/></g><use href="%23a" transform="translate(245 5)"/><g transform="translate(325 5)"><use href="%23a"/><use href="%23c"/></g><g transform="translate(405 5)"><use href="%23a"/><use href="%23d"/><use href="%23b"/></g><g transform="translate(485 5)"><use href="%23a"/><use href="%23c"/></g><g transform="translate(565 5)"><use href="%23a"/><use href="%23c"/><use href="%23b"/></g><g transform="translate(5 85)"><use href="%23d"/><use href="%23b"/></g><g transform="translate(85 85)"><use href="%23a"/><use href="%23d"/></g><use href="%23a" transform="translate(165 85)"/><g transform="translate(245 85)"><use href="%23c"/><use href="%23d"/></g><use href="%23b" transform="translate(325 85)"/><g transform="translate(405 85)"><use href="%23a"/><use href="%23d"/></g><use href="%23d" transform="translate(485 85)"/><g transform="translate(565 85)"><use href="%23c"/><use href="%23d"/></g><g transform="translate(5 165)"><use href="%23a"/><use href="%23c"/><use href="%23b"/></g><g transform="translate(85 165)"><use href="%23a"/><use href="%23d"/><use href="%23b"/></g><use href="%23c" transform="translate(165 165)"/><g transform="translate(245 165)"><use href="%23a"/><use href="%23c"/><use href="%23b"/></g><g transform="translate(325 165)"><use href="%23c"/><use href="%23d"/><use href="%23b"/></g><g transform="translate(405 165)"><use href="%23a"/><use href="%23d"/><use href="%23b"/></g><g transform="translate(485 165)"><use href="%23a"/><use href="%23d"/></g><g transform="translate(565 165)"><use href="%23a"/><use href="%23c"/></g><g transform="translate(5 245)"><use href="%23d"/><use href="%23b"/></g><use href="%23a" transform="translate(85 245)"/><use href="%23c" transform="translate(165 245)"/><g transform="translate(245 245)"><use href="%23c"/><use href="%23b"/></g><g transform="translate(325 245)"><use href="%23a"/><use href="%23c"/><use href="%23b"/></g><g transform="translate(405 245)"><use href="%23a"/><use href="%23b"/></g><g transform="translate(485 245)"><use href="%23a"/><use href="%23c"/><use href="%23d"/></g><g transform="translate(565 245)"><use href="%23c"/><use href="%23b"/></g><g transform="translate(5 325)"><use href="%23a"/><use href="%23b"/></g><use href="%23c" transform="translate(85 325)"/><g transform="translate(165 325)"><use href="%23c"/><use href="%23d"/><use href="%23b"/></g><use href="%23b" transform="translate(245 325)"/><use href="%23d" transform="translate(325 325)"/><use href="%23c" transform="translate(405 325)"/><g transform="translate(485 325)"><use href="%23a"/><use href="%23b"/></g><g transform="translate(565 325)"><use href="%23c"/><use href="%23d"/></g><g transform="translate(5 405)"><use href="%23c"/><use href="%23d"/><use href="%23b"/></g><g transform="translate(85 405)"><use href="%23c"/><use href="%23b"/></g><g transform="translate(165 405)"><use href="%23a"/><use href="%23d"/><use href="%23b"/></g><use href="%23c" transform="translate(245 405)"/><g transform="translate(325 405)"><use href="%23a"/><use href="%23d"/><use href="%23b"/></g><use href="%23d" transform="translate(405 405)"/><use href="%23d" transform="translate(485 405)"/><g transform="translate(565 405)"><use href="%23a"/><use href="%23c"/></g><g transform="translate(5 485)"><use href="%23a"/><use href="%23c"/><use href="%23b"/></g><g transform="translate(85 485)"><use href="%23d"/><use href="%23b"/></g><use href="%23a" transform="translate(165 485)"/><use href="%23c" transform="translate(245 485)"/><g transform="translate(325 485)"><use href="%23a"/><use href="%23b"/></g><g transform="translate(405 485)"><use href="%23a"/><use href="%23c"/><use href="%23d"/></g><g transform="translate(485 485)"><use href="%23a"/><use href="%23c"/><use href="%23b"/></g><g transform="translate(565 485)"><use href="%23c"/><use href="%23b"/></g><g transform="translate(5 565)"><use href="%23d"/><use href="%23b"/></g><g transform="translate(85 565)"><use href="%23a"/><use href="%23d"/></g><g transform="translate(165 565)"><use href="%23c"/><use href="%23d"/></g><g transform="translate(245 565)"><use href="%23c"/><use href="%23d"/><use href="%23b"/></g><g transform="translate(325 565)"><use href="%23d"/><use href="%23b"/></g><g transform="translate(405 565)"><use href="%23a"/><use href="%23d"/></g><use href="%23d" transform="translate(485 565)"/><g transform="translate(565 565)"><use href="%23c"/><use href="%23d"/></g></g></svg>'),
    hsl(0, 0%, 5%);
  background-size: 75px;
  background-position: 50% 50%;
  font-weight: 600;
}
/* remove the default border and background
the size is picked up by the nested svg, or in case of grid-supported browser by the grid cell
*/
button {
  border: none;
  background: none;
  color: inherit;
  outline-color: hsl(0, 0%, 95%);
}

/* the background might actually be temporary */
#maze {
  max-width: 500px;
  width: 75vw;
  height: auto;
  display: block;
}

/* by default position the buttons around the .game container
the size of the container is dictated by the nested svg (the only element with a non-absolute position)
*/
.game {
  position: relative;
}
button {
  position: absolute;
  transition: color 0.2s ease-in-out;
}
button:disabled {
  cursor: not-allowed;
  color: hsl(0, 0%, 35%);
}
#play {
  color: hsl(0, 0%, 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.15);
}
#north {
  top: 0%;
  left: 50%;
  transform: translate(-50%, -100%);
}
#west {
  top: 50%;
  left: 0%;
  transform: translate(-100%, -50%);
}
#east {
  top: 50%;
  right: 0%;
  transform: translate(100%, -50%);
}
#south {
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 100%);
}

/* for grid-supporting browsers position the buttons in a 3x3 grid

	.       north       .
	west    maze        east
	.       south       .

	! be sure to reset the values included only for the default layout (for the position of the .game container and the nested buttons
*/

@supports (display: grid) {
  .game {
    display: grid;
    grid-template-columns: auto [maze-start] max-content [maze-end] auto;
    grid-template-rows: auto [maze-start] max-content [maze-end] auto;
    position: initial;
  }
  #maze {
    grid-area: maze;
  }
  button {
    position: initial;
  }
  #play {
    grid-area: maze;
    top: initial;
    left: initial;
    transform: initial;
  }
  #north {
    grid-column: maze;
    top: initial;
    left: initial;
    transform: initial;
  }
  #west {
    grid-column-end: maze-start;
    top: initial;
    left: initial;
    transform: initial;
  }
  #east {
    grid-column-start: maze-end;
    top: initial;
    right: initial;
    transform: initial;
  }
  #south {
    grid-column: maze;
    bottom: initial;
    left: initial;
    transform: initial;
  }
}
