:root {
  --top-top: -80px;
  --top-mid: 0px;
  --stroke-width: 2px;
  --stroke-color: red;
  --chat-border-radius: 50px;
  --char-imgs-container-size: 100px;
  --character-proportion: 1.4;
  --char-imgs-container-actual-size: calc(var(--char-imgs-container-size) * var(--character-proportion));
  --game-width: 768px;
  --side-group-gap: 15px;
  --bottom-group-gap: 20px;
}

body {
  font-family: Arial, sans-serif;
  background-color: #382F2F;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  width: var(--game-width);
}

.group {
  display: flex;
  height: var(--group-height);
  width: var(--group-width);
  gap: var(--group-gap)
}

.group.top,
.group.bottom {
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  /* max-height: 250px; */
  /* flex-grow: 1; */
  --group-gap: 20px;
  --side-size: calc(var(--game-width) / 2);
  --side-chat-size: calc((var(--side-size) - var(--char-imgs-container-actual-size)) - var(--side-group-gap));
  --bottom-chat-size: calc(var(--side-chat-size) / 2);
  --group-height: calc(var(--bottom-chat-size) + var(--char-imgs-container-actual-size) + var(--group-gap));
  --group-width: 100%;
}

.group.left,
.group.right {
  justify-content: space-evenly;
  flex-direction: column;
  --group-gap: var(--side-group-gap);
  --group-height: 100%;
  --group-width: calc(var(--game-width) / 2);
  padding: 0 10px;
}

.group.left {
  align-items: flex-end;
}

.group.right {
  align-items: flex-start;
}

.middle-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  min-height: 500px;
}

h1 {
  color: #333;
}

p {
  color: #666;
}

.character {
  position: absolute;
}

.char-imgs-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  height: var(--char-imgs-container-actual-size);
  transform: scale(var(--character-proportion), var(--character-proportion));
}

.char-and-chat-container {
  display: flex;
  justify-content: flex-end;
  --chat-fill-color: #D9D9D9;
  --chat-stroke-color: #000000;
}

.char-and-chat-container.right {
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;
  gap: var(--side-group-gap);
}

.char-and-chat-container.left {
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: var(--side-group-gap);
}

.char-and-chat-container.bottom {
  flex-direction: column-reverse;
  align-items: center;
  height: 100%;
  gap: var(--bottom-group-gap);
}

.char-and-chat-container.top {
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: var(--bottom-group-gap);
}

.char-and-name-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: var(--char-imgs-container-actual-size);
  height: var(--char-imgs-container-actual-size);
}

.char-and-name-container .flip {
  transform: scale(var(--character-proportion), var(--character-proportion)) matrix(-1, 0, 0, 1, 0, 0);
}

.character-name {
  font-family: 'Baloo 2', cursive;
  font-size: calc(18px * var(--character-proportion));
  line-height: calc(18px * var(--character-proportion));
  color: #FFFFFF;
  font-weight: 500;
  text-shadow: 0.000em 0.075em black, 0.029em 0.069em black, 0.053em 0.053em black, 0.069em 0.029em black, 0.075em 0.000em black, 0.069em -0.029em black, 0.053em -0.053em black, 0.029em -0.069em black, 0.000em -0.075em black, -0.029em -0.069em black, -0.053em -0.053em black, -0.069em -0.029em black, -0.075em -0.000em black, -0.069em 0.029em black, -0.053em 0.053em black, -0.029em 0.069em black;
  transform: translateY(-15%);
}

.box {
  position: absolute;
}