.container {
  max-width: 650px;
  padding: 50px 0 50px 0;
}

input:invalid {border-color: red;}

.gridBox {
  width: 100%;
  padding-top: 100%;
  position: relative;
}

.gridBox>div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#maze {
  height: 100%;
  width: 100%;
  border-collapse: separate;
  border-spacing: 1px 1px;
}

#maze td.node {
  width:10px;
  height:10px;
}

#maze td.cell {
  width:auto;
  height:auto;
}


#maze td.horizontal {
  width:auto;
  height:10px;
}

#maze td.vertical {

  width:10px;
  height:auto;
}

#maze td.border {
  border: 1px dashed #d1d1d1;
  background-color: #f7f9f9;
}

#maze td.border:hover {
  border: 1px solid #d1e1e1;
  background-color: #e1f1f1;
}

#maze td.wall {
  border: 1px outset #b1b1b1;
  background-color: #c1c1c1;
}

#maze td.wall:hover {
  border: 1px outset #a1b1b1;
  background-color: #b1c1c1;
}