body {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

#board {
	width: 602px;
	height: 586px;
	padding: 96px 74px 40px 78px;
	background-image: url("../img/board.png");
	display: grid;
	grid-template-columns: repeat(6, 64px);
	grid-template-rows: repeat(6, 64px);
	gap: 10px;
}

.cell {
	width: 75px;
	height: 75px;
	position: relative;
}

.character {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.wall-vertical,
.wall-horizontal {
  position: absolute;
	box-shadow: 6px 0 0 rgba(0,0,0,0.65);
	border-radius: 2px;
	z-index: 10;
}

.wall-vertical {
	background-image: url("../img/wall-vertical.png");
  top: -15px;
  right: -5px;
  width: 7px;
  height: 97px;
}

.wall-horizontal {
	background-image: url("../img/wall-horizontal.png");
  bottom: -7px;
  left: -2px;
  width: 82px;
  height: 22px;
}

.cell:has(.exit)::after {
	content: "";
	position: absolute;
	bottom: 75px;
	left: 0;
	width: 66px;
	height: 83px;
	background-image: url("../img/exit-top.png");
}

.cell:has(.exit-top)::after {
	background-image: url("../img/exit-top.png");
	left: 0;
	bottom: 75px;
	width: 66px;
	height: 83px;
}


.cell:has(.exit-left)::after {
	background-image: url("../img/exit-left.png");
	left: -65px;
	bottom: -13px;
	width: 65px;
	height: 83px;
}

.cell:has(.exit-bottom)::after {
	background-image: url("../img/exit-bottom.png");
	left: 1px;
	bottom: -39.5px;
	width: 65px;
	height: 35px;
}

.cell:has(.exit-right)::after {
	background-image: url("../img/exit-right.png");
	left: 80px;
	bottom: -14px;
	width: 65px;
	height: 85px;
}

.cell:has(.hole) {
	background-image: url("../img/hole.png");
}

.text {
	width: 602px;
	text-align: center;
	margin: 15px 0;
}

#controls {
  text-align: center;
  width: 602px;
}

#controls button {
  margin: 0 5px;
  padding: 5px 10px;
  font-size: 15px;
  cursor: pointer;
}