.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: 60% 40%;
  gap: 0% 0%;
  grid-template-areas:
    "gameArea graphic"
    "alphabet graphic";
  height: 100%;
  /*grid-auto-rows: minmax(100px, auto); */
}

.gameArea {
  grid-area: 1 / 1 / 2 / 2;
  background-color: white;
  padding: 3% 3%;
}
.alphabet {
  grid-area: 2 / 1 / 3 / 2;
  background-color: white;
  padding: 3% 3%;
  display: grid;
  /*min-height: 10em;*/
  vertical-align: middle;
  grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10%;
  grid-template-rows: 30% 30% 30%;
  gap: 10px 10px;
  grid-template-areas:
    "A B C D E F G H I"
    "J K L M N Ñ O P Q"
    "R S T U V W X Y Z";
}
.graphic {
  grid-area: 1 / 2 / 3 / 3;
  background-color: white;
  padding: 3% 3%;
}

.letter {
  /*border-bottom: solid 1px darkblue;*/
  border: solid 1px brown;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: 5%;
  transform: translate(-50%, -50%);
}

.letter_dissable {
  border: solid 1px darkgrey;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: 5%;
  transform: translate(-50%, -50%);
}

.letter p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: 5%;
  transform: translate(-50%, -50%);
}

.letter_dissable p {
  color:darkgrey;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: 5%;
  transform: translate(-50%, -50%);
}

.gallow-picture {
  width: 90%;
  height: 90%;
}

.lines {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: auto;
  align-content: center
}
.lines:after {
  display: block;
  content: " ";
  margin: 4px;
  flex: 999 999 auto;
}
.line {
  flex: 1 1 auto;
  margin: 4px;
  border-bottom: solid 3px black;
  position: relative;
  width: 6%;
  height: 6%;
  top: -13%;
  left: 3%;
  margin-top: 5%;
  transform: translate(-50%, -50%);
}

.line p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: 5%;
  transform: translate(-50%, -70%);
}