.wall {
  background-image: url("wall.png");
  background-size: cover;
}

.playerDown {
  background-image: url("down.movement.png");
  background-size: cover;
}

.playerRight {
  background-image: url("right.movement.png");
  background-size: cover;
}

.playerUp {
  background-image: url("up.movement.png");
  background-size: cover;
}

.playerLeft {
  background-image: url("left.movement.png");
  background-size: cover;
}

.goal {
  background-color: #4b70b0;
}

body {
  display: flex;
  justify-content: center;
}

#whole-maze {
  display: flex;
  flex-direction: column;
  background-color: #d2cccd;
}
#whole-maze.l0 .row div {
  width: 50px;
  height: 50px;
}
#whole-maze.l1 .row div {
  width: 26px;
  height: 26px;
}
#whole-maze.l2 .row div {
  width: 19px;
  height: 19px;
}
#whole-maze.l3 .row div {
  width: 15px;
  height: 15px;
}
#whole-maze.l4 .row div {
  width: 12px;
  height: 12px;
}
#whole-maze.l5 .row div {
  width: 19px;
  height: 19px;
}

.row {
  display: flex;
  flex-direction: row;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Roboto", sans-serif;
}

#menu {
  width: 100%;
  height: 120px;
  margin: 0 0 100px 0;
  font-weight: bold;
  color: white;
  font-size: 80px;
  text-align: center;
}
#menu.lmenu0 {
  background-color: #88da61;
}
#menu.lmenu1 {
  background-color: #dad85c;
}
#menu.lmenu2 {
  background-color: #da8767;
}
#menu.lmenu3 {
  background-color: #da6fb7;
}
#menu.lmenu4 {
  background-color: #6967da;
}

.invisible {
  background-color: white;
}

#components {
  height: 100px;
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 30px;
}

.components0 div#timer {
  margin-right: 120px;
}
.components0 div#lives {
  margin-left: 230px;
}

.components1 div#timer {
  margin-right: 190px;
}
.components1 div#lives {
  margin-left: 250px;
}

.components2 div#timer {
  margin-right: 202px;
}
.components2 div#lives {
  margin-left: 250px;
}

.components3 div#timer {
  margin-right: 215px;
}
.components3 div#lives {
  margin-left: 250px;
}

.components4 div#timer {
  margin-right: 199px;
}
.components4 div#lives {
  margin-left: 250px;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.9;
}

#popUp {
  position: fixed;
  top: 42%;
  left: 37%;
  width: 495px;
  height: 300px;
  background-color: #fff9fa;
  border-radius: 8px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.close {
  color: #a52a2a;
}

#lvlText {
  color: white;
  font-size: 32px;
  text-align: center;
  margin: 0 0 20px 0;
  padding-top: 20px;
  border-radius: 7px 7px 0 0;
}

.full {
  width: 36px;
  height: 30px;
  background-image: url("lives2.png");
  background-size: cover;
}

.empty {
  width: 36px;
  height: 30px;
  background-image: url("lives1.png");
  background-size: cover;
}

.ikons {
  display: flex;
  justify-content: end;
}

.diaG {
  background-image: url("DiaGre.png");
  background-size: cover;
}

.diaY {
  background-image: url("DiaYel.png");
  background-size: cover;
}

.diaR {
  background-image: url("DiaRed.png");
  background-size: cover;
}

.diaP {
  background-image: url("DiaPur.png");
  background-size: cover;
}

.diaB {
  background-image: url("DiaBlue.png");
  background-size: cover;
}

.livesText {
  text-align: right;
}

.lost {
  background-color: brown;
}

.completed {
  background-color: #31a51e;
}

.buttons {
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: end;
  height: 132px;
}
.buttons div {
  margin: 10px 30px 10px 30px;
  font-size: 20px;
  padding: 5px;
  background-color: #d2cccd;
  cursor: pointer;
}

.lvlSc {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

.black {
  background-color: #23242c;
}

/*# sourceMappingURL=styles.css.map */