* {
  font-family: Arial, Helvetica, sans-serif;
}

.game-container {
  position: relative;
  background-color: white;
  width: 100%;
  height: 351px;
  display: grid;
}

#game-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("/languages/lords/img/bg.png");
}

/* Button Styles */
#next-base,
#next-hair,
#next-initial,
#next-bottom,
#next-shoe {
  position: relative;
  left: 6em;
  width: 6em;
  height: 25px;
  padding: 0 2em 0 0.7em;
  text-align: left;
  color: black;
  background: url("/languages/lords/img/next-btn.png");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  border: 0;
}

#prev-base,
#prev-hair,
#prev-initial,
#prev-bottom,
#prev-shoe {
  position: relative;
  width: 6em;
  height: 25px;
  padding: 0 0.7em 0 2em;
  text-align: right;
  color: black;
  background: url("/languages/lords/img/prev-btn.png");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  border: 0;
}

/* When hovering over the buttons! */
#next-base:hover,
#prev-base:hover,
#next-hair:hover,
#prev-hair:hover,
#next-initial:hover,
#prev-initial:hover,
#next-bottom:hover,
#prev-bottom:hover,
#next-shoe:hover,
#prev-shoe:hover {
  box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3);
}

/* The clothes to overite the character */
#game-bg {
  background: url("/languages/lords/img/bg.png");
  width: 100%;
  height: 100%;
  position: absolute;
}

#base {
  background: url("/languages/lords/img/base/base_a.png");
  width: 100%;
  height: 100%;
  position: absolute;
}

#initial {
  background: url("/languages/lords/img/initial/initial_b.png");
  width: 100%;
  height: 100%;
  position: absolute;
}

#bottom {
  background: url("/languages/lords/img/bottom/bottom_b.png");
  width: 100%;
  height: 100%;
  position: absolute;
}

#shoes {
  background: url("/languages/lords/img/shoes/shoes_be.png");
  width: 100%;
  height: 100%;
  position: absolute;
}

/* Button Position Set Up */
form {
  position: absolute;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(7, 1fr);
  grid-template-areas: "logo-left logo base-right" "base-left base base-right" "head-left head head-right" "initial-left initial initial-right" "blank-left blank blank-right" "bottom-left bottom bottom-right" "feet-left feet feet-right";
}

/* Positions of the buttons on the grid */


#next-base {
  grid-area: blank-right;
  align-self: center;
  margin-left: 3em;
}

#next-hair {
  grid-area: head-right;
  align-self: end;
  margin-left: 3em;
}

#next-initial {
  grid-area: initial-right;
  align-self: end;
  margin-left: 3em;
}

#next-bottom {
  grid-area: bottom-right;
  margin-left: 3em;
}

#next-shoe {
  grid-area: feet-right;
  margin-left: 3em;
}

#prev-base {
  grid-area: blank-right;
  align-self: center;
  margin-left: 2em;
}

#prev-hair {
  grid-area: head-right;
  align-self: end;
  margin-left: 2em;
}

#prev-initial {
  grid-area: initial-right;
  align-self: end;
  margin-left: 2em;
}

#prev-bottom {
  grid-area: bottom-right;
  margin-left: 2em;
}

#prev-shoe {
  grid-area: feet-right;
  margin-left: 2em;
}