main.css

.main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.game-container {
    max-width: 700px;
    width: 100%;
    max-height: 700px;
    height:100%;
}

.mobile-controllers {
    height: 12.5rem;
    width: 12.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas:
      ". up ."
      "left empty right"
      ". down .";
  }

.mobile-controllers--hidden {
    display: none;
}

.mobile-controllers__left {
    grid-area: left;
  }

.mobile-controllers__up {
    grid-area: up;
}

.mobile-controllers__down {
    grid-area: down;
}

.mobile-controllers__right {
    grid-area: right;
}