* {
    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;
    }
}