[
  {
    "search": "#game-unit",
    "replace": "<div id=\"game-unit\" class=\"game-unit\"></div>"
  },
  {
    "search": ".button i",
    "replace": ".button i {\n  font-size: 30px;\n  color: #fff;\n  position: absolute;\n}"
  },
  {
    "search": "#red",
    "replace": "<div id=\"red\" class=\"button\">\n  <i class=\"fa fa-circle\"></i>\n</div>"
  },
  {
    "search": "#blue",
    "replace": "<div id=\"blue\" class=\"button\">\n  <i class=\"fa fa-circle\"></i>\n</div>"
  },
  {
    "search": "#green",
    "replace": "<div id=\"green\" class=\"button\">\n  <i class=\"fa fa-circle\"></i>\n</div>"
  },
  {
    "search": "#yellow",
    "replace": "<div id=\"yellow\" class=\"button\">\n  <i class=\"fa fa-circle\"></i>\n</div>"
  },
  {
    "search": "#game-container",
    "replace": "#game-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 300px;\n  background-color: #fff;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  padding: 20px;\n  position: relative;\n}"
  },
  {
    "search": "#game-container:before",
    "replace": "#game-container:before {\n  content: '';\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  right: 10px;\n  bottom: 10px;\n  border: 2px solid #343a40;\n  border-radius: 8px;\n}"
  }
]