:root {
  --base-color: rgba(255, 255, 255, 1);
  --hover-color: #4bacb8;
  --body-font-family: "Russo One";
  --button-label-font-family: "Russo One";
  --upgrade-button-width: 400px;
  --upgrade-row-width: 500px;
  display: flex;
  flex-direction: column;
}

h2 {
  text-align: center;
}

#root {
  margin-top: 80px;
  display: flex;
  margin-bottom: 110px;
  user-select: none;
}

#body {
  background-color: #292929;
  color: white;
  font-family: var(--body-font-family);
}


/* CONTENT SPLITS */
#leftSplit {
  flex-direction: column;
  width: fit-content;
  padding-right: 40px;
}

#rightSplit {
  width: var(--upgrade-row-width);
}

#leftUpgrades {
  width: var(--upgrade-row-width);
}

#rightUpgrades {
  width: var(--upgrade-row-width);
}

#leftUpgrade h2 {
  width: var(--upgrade-button-width);
  text-align: center;
}

#rightUpgrade h2 {
  width: var(--upgrade-button-width);
  text-align: center;
}


/* MAZE */
#maze {
  border-collapse: collapse;
  border: 0px;
  user-select: none;
}

#maze td {
  width: 20px;
  height: 20px;
}


/* POWER UPS */
#powerUpButtonRow > button {
  margin-left: 10px;
  width: 250px;
}

#powerUpButtonRow {
  display: flex;
  justify-content: center;
}

#powerUpRoot {
  padding: 5px;
  flex: auto;
}

/* TOGGLES PANEL */
#togglesPanel {
  border: white 5px solid;
  width: 200px;
  padding: 8px;
}
#togglesPanel > h3 {
  margin: 5px;
}

/* ICONS PANEL */
#iconPanel {
  height: 30px;
  width: 120px;
  display: flex;
}
#wallPhasingIcon {
  height: 30px;
  width: 30px;
}
#wallPhasingCount {
  padding-top: 6px;
}