maze.css

* {
  margin: 0;
  padding: 0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 12pt;
  box-sizing: border-box;
}
body, html {
  background-color: white;
  color: black;
}
input[type=number] {
  width: 4em;
  text-align: right;
}
.App {
  padding: 5px;
}
#maze-container {
  margin-top: 5px;
}
:root {
  --maze-cols: 0;
  --maze-rows: 0;
  --maze-a: 0;
}  
#maze {
  display: grid;
  column-gap: 0;
  row-gap: 0;
  grid-template-rows: repeat(var(--maze-rows), 1fr);
  grid-template-columns: repeat(var(--maze-cols), 1fr);
}
#maze > div {
  width: var(--maze-a);
  height: var(--maze-a);
  text-align: center;
}
.block-top {
  border-top: 1px solid #333;
}
.block-right {
  border-right: 1px solid #333;
}
.block-bottom {
  border-bottom: 1px solid #333;
}
.block-left {
  border-left: 1px solid #333;
}