javascript-entity-component-system/index.460f891d.css.map

A simple JavaScript entity-component-system for games

{"mappings":"ACAA,sDAMA,2FAQA,mMAaA,0EAQA,+CAKA,sDAOA,wFAQA,2DAMA,yEAQA,mJAUA,iEAOA,oDAMA,wCAKA,wDAKA,6NAaA,mCAKA,mCAKA,gCAKA,gCAKA,8BAKA,+HAUA,+CAKA,6IAYA,6DAMA,0BAIA,qDAMA,4EAOA,uCAMA,oMAaA,yGAOA,wEAOA,kFAOA,0HAUA,iEAOA,yCACE,cAIA,wBAIA,8HASA,oCAIA,wGASA,kEAUA,gDAOA,gDAIA,oBAIA,yIAaA,uFAWA,uFAWA,oFAWA,qFAYF,yCACE,cAIA,wBAIA,kIASA,oCAIA,wGASA,kEAUA,gDAOA,gDAIA,oBAIA,yIAaA,uFAWA,uFAWA,oFAWA,qFAYF,0CACE,cAIE,sEAOA,oMAcA,oCAIA,6IAYA,kEASA,4BAKA,gDAIA,oBAIA,6NAaA,4CAOA,4CAOA,yCAOA","sources":["index.460f891d.css","src/style.css"],"sourcesContent":["body {\n  width: 100%;\n  font-family: Calibri;\n  position: relative;\n}\n\nnav {\n  width: max-content;\n  margin-top: 40px;\n  position: relative;\n  left: 50%;\n  transform: translate(-50%);\n}\n\n.nav-items {\n  grid-gap: 20px;\n  grid-auto-columns: max-content;\n  grid-auto-flow: column;\n  padding: 0;\n  text-decoration: none;\n  list-style-type: none;\n  display: grid;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\nli > a {\n  color: #666;\n  border-radius: 10px;\n  padding: 15px 20px;\n  text-decoration: none;\n}\n\nli > a:hover {\n  color: #000;\n  background-color: #f2f2f2;\n}\n\na {\n  color: #333;\n  font-size: 18px;\n  text-decoration: underline;\n}\n\n.header {\n  width: 100%;\n  margin-top: 80px;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.header > h1, h2 {\n  text-align: center;\n  margin: 10px;\n  font-size: 48px;\n}\n\n.header > p {\n  text-align: center;\n  color: #666;\n  margin: 0;\n  padding: 0;\n  font-size: 18px;\n}\n\n.code-block {\n  background-color: #f7f7f7;\n  border: 1px solid #f2f2f2;\n  border-radius: 10px;\n  padding: 20px;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.code-block > h2 {\n  text-align: left;\n  margin: 0;\n  padding: 0;\n  font-size: 24px;\n}\n\n.code-block > p {\n  color: #333;\n  height: 50px;\n  font-size: 20px;\n}\n\n.code-block > pre {\n  margin: 0;\n  font-size: 16px;\n}\n\ncode {\n  border-radius: 10px;\n  background-color: #fff !important;\n}\n\n.example {\n  width: max-content;\n  grid-gap: 10px;\n  grid-template-rows: max-content max-content max-content max-content;\n  grid-template-columns: 1fr 1fr;\n  margin-top: 100px;\n  display: grid;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.component-block {\n  grid-area: 1 / 1 / 2 / 2;\n}\n\n.processor-block {\n  grid-area: 1 / 2 / 2 / 3;\n}\n\n.entity-block {\n  grid-area: 2 / 1 / 3 / 3;\n}\n\n.update-block {\n  grid-area: 3 / 1 / 4 / 3;\n}\n\n.example-header {\n  margin: 50px 0;\n}\n\nbutton {\n  cursor: pointer;\n  background-color: #f2f2f2;\n  border: none;\n  border-radius: 50px;\n  padding: 10px 20px;\n  font-size: 14px;\n  font-weight: 600;\n}\n\n#reset-button {\n  color: #023;\n  background-color: #6cf;\n}\n\n.basic-game {\n  grid-gap: 20px;\n  width: max-content;\n  grid-template-columns: auto 1fr;\n  display: grid;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.game-source {\n  text-align: center;\n  margin-top: 30px;\n  display: block;\n}\n\n.controls {\n  grid-column: 2 / 3;\n}\n\n.buttons {\n  width: max-content;\n  grid-gap: 5px;\n  display: grid;\n}\n\n.checkboxes {\n  grid-gap: 20px;\n  width: max-content;\n  margin-bottom: 50px;\n  display: grid;\n}\n\ncanvas {\n  max-width: 500px;\n  grid-column: 1 / 2;\n}\n\n.information-container {\n  width: max-content;\n  grid-gap: 20px;\n  grid-template-rows: 1fr 1fr;\n  grid-template-columns: 1fr 1fr 1fr;\n  margin: 50px 0;\n  display: grid;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.information-card {\n  background-color: #f7f7f7;\n  border: 1px solid #f2f2f2;\n  border-radius: 10px;\n  padding: 30px 20px;\n}\n\n.information-card > h3 {\n  color: #666;\n  margin: 0;\n  font-size: 16px;\n  font-weight: 500;\n}\n\n.information-card > p {\n  margin-top: 5px;\n  margin-bottom: 0;\n  font-size: 24px;\n  font-weight: 600;\n}\n\n.copyright {\n  color: #333;\n  width: max-content;\n  margin: 40px 0;\n  font-size: 20px;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.copyright > a {\n  font-size: 20px;\n  font-weight: 600;\n  text-decoration: none;\n}\n\n@media only screen and (max-width: 499px) {\n  body {\n    margin: 0;\n  }\n\n  .header {\n    margin-top: 50px;\n  }\n\n  .information-container {\n    width: auto;\n    grid-gap: 10px;\n    grid-template-rows: repeat(3, 1fr);\n    grid-template-columns: 1fr 1fr;\n    padding: 0 10px;\n  }\n\n  .information-card {\n    padding: 20px 15px;\n  }\n\n  .basic-game {\n    width: 100%;\n    grid-template-rows: 1fr max-content;\n    grid-template-columns: 100%;\n    margin-bottom: 40px;\n  }\n\n  canvas {\n    width: 90%;\n    height: 90%;\n    grid-area: 1 / 1 / 2 / 2;\n    justify-self: center;\n  }\n\n  .controls {\n    grid-area: 2 / 1 / 3 / 2;\n    justify-self: center;\n  }\n\n  .checkboxes {\n    grid-template-columns: repeat(3, 1fr);\n  }\n\n  .buttons {\n    width: auto;\n  }\n\n  .example {\n    width: 100%;\n    grid-template-rows: repeat(4, 1fr);\n    grid-template-columns: 100%;\n    margin-top: 20px;\n    position: static;\n    left: auto;\n    transform: none;\n  }\n\n  .component-block {\n    grid-area: 1 / 1 / 2 / 2;\n    margin: 0 10px;\n    position: static;\n    left: 0;\n    transform: none;\n  }\n\n  .processor-block {\n    grid-area: 2 / 1 / 3 / 2;\n    margin: 0 10px;\n    position: static;\n    left: 0;\n    transform: none;\n  }\n\n  .entity-block {\n    grid-area: 3 / 1 / 4 / 2;\n    margin: 0 10px;\n    position: static;\n    left: 0;\n    transform: none;\n  }\n\n  .update-block {\n    grid-area: 4 / 1 / 5 / 2;\n    margin: 0 10px;\n    position: static;\n    left: 0;\n    transform: none;\n  }\n}\n\n@media only screen and (min-width: 500px) {\n  body {\n    margin: 0;\n  }\n\n  .header {\n    margin-top: 50px;\n  }\n\n  .information-container {\n    width: auto;\n    grid-gap: 10px;\n    grid-template-rows: repeat(2, 1fr);\n    grid-template-columns: 1fr 1fr 1fr;\n    padding: 0 10px;\n  }\n\n  .information-card {\n    padding: 20px 15px;\n  }\n\n  .basic-game {\n    width: 100%;\n    grid-template-rows: 1fr max-content;\n    grid-template-columns: 100%;\n    margin-bottom: 40px;\n  }\n\n  canvas {\n    width: 90%;\n    height: 90%;\n    grid-area: 1 / 1 / 2 / 2;\n    justify-self: center;\n  }\n\n  .controls {\n    grid-area: 2 / 1 / 3 / 2;\n    justify-self: center;\n  }\n\n  .checkboxes {\n    grid-template-columns: repeat(3, 1fr);\n  }\n\n  .buttons {\n    width: auto;\n  }\n\n  .example {\n    width: 100%;\n    grid-template-rows: repeat(4, 1fr);\n    grid-template-columns: 100%;\n    margin-top: 20px;\n    position: static;\n    left: auto;\n    transform: none;\n  }\n\n  .component-block {\n    grid-area: 1 / 1 / 2 / 2;\n    margin: 0 10px;\n    position: static;\n    left: 0;\n    transform: none;\n  }\n\n  .processor-block {\n    grid-area: 2 / 1 / 3 / 2;\n    margin: 0 10px;\n    position: static;\n    left: 0;\n    transform: none;\n  }\n\n  .entity-block {\n    grid-area: 3 / 1 / 4 / 2;\n    margin: 0 10px;\n    position: static;\n    left: 0;\n    transform: none;\n  }\n\n  .update-block {\n    grid-area: 4 / 1 / 5 / 2;\n    margin: 0 10px;\n    position: static;\n    left: 0;\n    transform: none;\n  }\n}\n\n@media only screen and (min-width: 1200px) {\n  body {\n    margin: 0;\n  }\n\n  .header {\n    width: 100%;\n    margin-top: 80px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .information-container {\n    width: max-content;\n    grid-gap: 20px;\n    grid-template-rows: 1fr 1fr;\n    grid-template-columns: 1fr 1fr 1fr;\n    margin: 50px 0;\n    display: grid;\n    position: relative;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .information-card {\n    padding: 30px 20px;\n  }\n\n  .basic-game {\n    grid-gap: 20px;\n    width: max-content;\n    grid-template-columns: auto 1fr;\n    display: grid;\n    position: relative;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  canvas {\n    width: auto;\n    height: auto;\n    grid-column: 1 / 2;\n    justify-self: center;\n  }\n\n  .controls {\n    grid-area: 2 / 1 / 3 / 2;\n  }\n\n  .checkboxes {\n    grid-template-columns: repeat(3, 1fr);\n  }\n\n  .buttons {\n    width: auto;\n  }\n\n  .example {\n    width: max-content;\n    grid-gap: 10px;\n    grid-template-rows: max-content max-content max-content max-content;\n    grid-template-columns: 1fr 1fr;\n    margin-top: 100px;\n    display: grid;\n    position: relative;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .component-block {\n    grid-area: 1 / 1 / 2 / 2;\n    margin: 0;\n  }\n\n  .processor-block {\n    grid-area: 1 / 2 / 2 / 3;\n    margin: 0;\n  }\n\n  .entity-block {\n    grid-area: 2 / 1 / 3 / 3;\n    margin: 0;\n  }\n\n  .update-block {\n    grid-area: 3 / 1 / 4 / 3;\n    margin: 0;\n  }\n}\n\n/*# sourceMappingURL=index.460f891d.css.map */\n","body {\r\n  font-family: Calibri;\r\n  position: relative;\r\n  width: 100%;\r\n}\r\n\r\nnav {\r\n  position : relative;\r\n  left     : 50%;\r\n  width    : max-content;\r\n  transform: translate(-50%);\r\n  margin-top: 40px;\r\n}\r\n\r\n.nav-items {\r\n  text-decoration  : none;\r\n  list-style-type  : none;\r\n  display          : grid;\r\n  grid-auto-flow   : column;\r\n  grid-auto-columns: max-content;\r\n  grid-gap         : 20px;\r\n  position         : relative;\r\n  left             : 50%;\r\n  transform        : translateX(-50%);\r\n  padding          : 0;\r\n}\r\n\r\nli > a {\r\n  text-decoration: none;\r\n  color: hsla(0, 0%, 40%, 1);\r\n  padding: 15px 20px;\r\n  border-radius: 10px;\r\n  /* transition: 0.05s; */\r\n}\r\n\r\nli > a:hover {\r\n  color: hsla(0, 0%, 0%, 1);\r\n  background-color: hsla(0, 0%, 95%, 1);\r\n}\r\n\r\na {\r\n  text-decoration: none;\r\n  color          : hsla(0, 0%, 20%, 1);\r\n  text-decoration: underline;\r\n  font-size      : 18px;\r\n}\r\n\r\n.header {\r\n  position  : relative;\r\n  left      : 50%;\r\n  transform : translateX(-50%);\r\n  width     : 100%;\r\n  margin-top: 80px;\r\n}\r\n\r\n.header > h1, h2 {\r\n  text-align: center;\r\n  margin    : 10px;\r\n  font-size : 48px;\r\n}\r\n\r\n.header > p {\r\n  text-align: center;\r\n  padding   : 0;\r\n  margin    : 0px;\r\n  color     : hsla(0, 0%, 40%, 1);\r\n  font-size : 18px;\r\n}\r\n\r\n.code-block {\r\n  background-color: hsla(0, 0%, 97%, 1);\r\n  border: 1px solid hsla(0, 0%, 95%, 1);\r\n  position        : relative;\r\n  left            : 50%;\r\n  transform       : translateX(-50%);\r\n  padding         : 20px;\r\n  border-radius   : 10px;\r\n}\r\n\r\n.code-block > h2 {\r\n  font-size : 24px;\r\n  text-align: left;\r\n  margin    : 0;\r\n  padding   : 0;\r\n}\r\n\r\n.code-block > p {\r\n  color: hsla(0, 0%, 20%, 1);\r\n  font-size: 20px;\r\n  height: 50px;\r\n}\r\n\r\n.code-block > pre {\r\n  font-size: 16px;\r\n  margin: 0;\r\n}\r\n\r\ncode {\r\n  border-radius   : 10px;\r\n  background-color: hsla(0, 0%, 100%, 1) !important;\r\n}\r\n\r\n.example {\r\n  width    : max-content;\r\n  position : relative;\r\n  left     : 50%;\r\n  transform: translateX(-50%);\r\n\r\n  display              : grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  grid-template-rows   : max-content max-content max-content max-content;\r\n  grid-gap             : 10px;\r\n  margin-top           : 100px;\r\n}\r\n\r\n.component-block {\r\n  grid-column: 1/2;\r\n  grid-row   : 1/2;\r\n}\r\n\r\n.processor-block {\r\n  grid-column: 2/3;\r\n  grid-row   : 1/2;\r\n}\r\n\r\n.entity-block {\r\n  grid-column: 1/3;\r\n  grid-row   : 2/3;\r\n}\r\n\r\n.update-block {\r\n  grid-column: 1/3;\r\n  grid-row   : 3/4;\r\n}\r\n\r\n.example-header {\r\n  margin: 50px 0;\r\n}\r\n\r\n\r\nbutton {\r\n  border: none;\r\n  background-color: hsla(0, 0%, 95%, 1);\r\n  font-weight: 600;\r\n  padding: 10px 20px;\r\n  border-radius: 50px;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n}\r\n\r\n#reset-button {\r\n  background-color: hsla(200, 100%, 70%, 1);\r\n  color: hsla(200, 100%, 10%, 1);\r\n}\r\n\r\n.basic-game {\r\n  grid-gap: 20px;\r\n\r\n  display: grid;\r\n  grid-template-columns: auto 1fr;\r\n  width: max-content;\r\n\r\n  position: relative;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.game-source {\r\n  display: block;\r\n  margin-top: 30px;\r\n  text-align: center;\r\n}\r\n\r\n.controls {\r\n  grid-column: 2/3;\r\n}\r\n\r\n.buttons {\r\n  display: grid;\r\n  width: max-content;\r\n  grid-gap: 5px;\r\n}\r\n\r\n.checkboxes {\r\n  display: grid;\r\n  grid-gap: 20px;\r\n  width: max-content;\r\n  margin-bottom: 50px;\r\n}\r\n\r\ncanvas {\r\n  grid-column: 1/2;\r\n\r\n  max-width: 500px;\r\n}\r\n\r\n.information-container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  grid-template-rows: 1fr 1fr;\r\n  width: max-content;\r\n  grid-gap: 20px;\r\n\r\n  position: relative;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  margin: 50px 0;\r\n}\r\n\r\n.information-card {\r\n  background-color: hsla(0, 0%, 97%, 1);\r\n  border: 1px solid hsla(0, 0%, 95%, 1);\r\n  border-radius: 10px;\r\n  padding: 30px 20px;\r\n}\r\n\r\n.information-card > h3 {\r\n  font-size: 16px;\r\n  color: hsla(0, 0%, 40%, 1);\r\n  margin: 0;\r\n  font-weight: 500;\r\n}\r\n\r\n.information-card > p {\r\n  font-size: 24px;\r\n  font-weight: 600;\r\n  margin-top: 5px;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.copyright {\r\n  color: hsla(0, 0%, 20%, 1);\r\n  font-size: 20px;\r\n  position: relative;\r\n  left: 50%;\r\n  width: max-content;\r\n  margin: 40px 0;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.copyright > a {\r\n  font-weight: 600;\r\n  font-size: 20px;\r\n  text-decoration: none;\r\n}\r\n\r\n\r\n@media only screen and (max-width: 499px) {\r\n  body {\r\n    margin: 0;\r\n  }\r\n\r\n  .header {\r\n    margin-top: 50px;\r\n  }\r\n\r\n  .information-container {\r\n    grid-template-columns: 1fr 1fr;\r\n    grid-template-rows: repeat(3, 1fr);\r\n\r\n    width: auto;\r\n    grid-gap: 10px;\r\n    padding: 0 10px;\r\n  }\r\n\r\n  .information-card {\r\n    padding: 20px 15px;\r\n  }\r\n\r\n  .basic-game {\r\n    grid-template-columns: 100%;\r\n    grid-template-rows: 1fr max-content;\r\n\r\n    margin-bottom: 40px;\r\n    \r\n    width: 100%;\r\n  }\r\n  \r\n  canvas {\r\n    grid-column: 1/2;\r\n    grid-row: 1/2;\r\n\r\n    justify-self: center;\r\n\r\n    width: 90%;\r\n    height: 90%;\r\n  }\r\n  \r\n  .controls {\r\n    grid-column: 1/2;\r\n    grid-row: 2/3;\r\n\r\n    justify-self: center;\r\n  }\r\n\r\n  .checkboxes {\r\n    grid-template-columns: repeat(3, 1fr);\r\n  }\r\n\r\n  .buttons {\r\n    width: auto;\r\n  }\r\n\r\n  .example {\r\n    grid-template-columns: 100%;\r\n    grid-template-rows: repeat(4, 1fr);\r\n\r\n    width: 100%;\r\n\r\n    position: static;\r\n    transform: none;\r\n    left: auto;\r\n\r\n    margin-top: 20px;\r\n  }\r\n\r\n  .component-block {\r\n    grid-column: 1/2;\r\n    grid-row: 1/2;\r\n\r\n    position: static;\r\n    transform: none;\r\n    left: 0;\r\n\r\n    margin: 0 10px;\r\n  }\r\n\r\n  .processor-block {\r\n    grid-column: 1/2;\r\n    grid-row: 2/3;\r\n\r\n    position: static;\r\n    transform: none;\r\n    left: 0;\r\n    \r\n    margin: 0 10px;\r\n  }\r\n\r\n  .entity-block {\r\n    grid-column: 1/2;\r\n    grid-row: 3/4;\r\n\r\n    position: static;\r\n    transform: none;\r\n    left: 0;\r\n    \r\n    margin: 0 10px;\r\n  }\r\n\r\n  .update-block {\r\n    grid-column: 1/2;\r\n    grid-row: 4/5;\r\n\r\n    position: static;\r\n    transform: none;\r\n    left: 0;\r\n    \r\n    margin: 0 10px;\r\n  }\r\n}\r\n\r\n@media only screen and (min-width: 500px) {\r\n  body {\r\n    margin: 0;\r\n  }\r\n\r\n  .header {\r\n    margin-top: 50px;\r\n  }\r\n\r\n  .information-container {\r\n    grid-template-columns: 1fr 1fr 1fr;\r\n    grid-template-rows: repeat(2, 1fr);\r\n\r\n    width: auto;\r\n    grid-gap: 10px;\r\n    padding: 0 10px;\r\n  }\r\n\r\n  .information-card {\r\n    padding: 20px 15px;\r\n  }\r\n\r\n  .basic-game {\r\n    grid-template-columns: 100%;\r\n    grid-template-rows: 1fr max-content;\r\n    \r\n    margin-bottom: 40px;\r\n\r\n    width: 100%;\r\n  }\r\n\r\n  canvas {\r\n    grid-column: 1/2;\r\n    grid-row: 1/2;\r\n\r\n    justify-self: center;\r\n\r\n    width: 90%;\r\n    height: 90%;\r\n  }\r\n\r\n  .controls {\r\n    grid-column: 1/2;\r\n    grid-row: 2/3;\r\n\r\n    justify-self: center;\r\n  }\r\n\r\n  .checkboxes {\r\n    grid-template-columns: repeat(3, 1fr);\r\n  }\r\n\r\n  .buttons {\r\n    width: auto;\r\n  }\r\n\r\n  .example {\r\n    grid-template-columns: 100%;\r\n    grid-template-rows: repeat(4, 1fr);\r\n\r\n    width: 100%;\r\n\r\n    position: static;\r\n    transform: none;\r\n    left: auto;\r\n\r\n    margin-top: 20px;\r\n  }\r\n\r\n  .component-block {\r\n    grid-column: 1/2;\r\n    grid-row: 1/2;\r\n\r\n    position: static;\r\n    transform: none;\r\n    left: 0;\r\n\r\n    margin: 0 10px;\r\n  }\r\n\r\n  .processor-block {\r\n    grid-column: 1/2;\r\n    grid-row: 2/3;\r\n\r\n    position: static;\r\n    transform: none;\r\n    left: 0;\r\n\r\n    margin: 0 10px;\r\n  }\r\n\r\n  .entity-block {\r\n    grid-column: 1/2;\r\n    grid-row: 3/4;\r\n\r\n    position: static;\r\n    transform: none;\r\n    left: 0;\r\n\r\n    margin: 0 10px;\r\n  }\r\n\r\n  .update-block {\r\n    grid-column: 1/2;\r\n    grid-row: 4/5;\r\n\r\n    position: static;\r\n    transform: none;\r\n    left: 0;\r\n\r\n    margin: 0 10px;\r\n  }\r\n}\r\n\r\n@media only screen and (min-width: 1200px) {\r\n  body {\r\n      margin: 0;\r\n    }\r\n  \r\n    .header {\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      width: 100%;\r\n      margin-top: 80px;\r\n    }\r\n  \r\n    .information-container {\r\n  \r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr 1fr;\r\n      grid-template-rows: 1fr 1fr;\r\n      width: max-content;\r\n      grid-gap: 20px;\r\n      \r\n      position: relative;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      margin: 50px 0;\r\n    }\r\n  \r\n    .information-card {\r\n      padding: 30px 20px;\r\n    }\r\n  \r\n    .basic-game {\r\n      grid-gap: 20px;\r\n      \r\n      display: grid;\r\n      grid-template-columns: auto 1fr;\r\n      width: max-content;\r\n      \r\n      position: relative;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n    }\r\n  \r\n    canvas {\r\n      grid-column: 1/2;\r\n  \r\n      justify-self: center;\r\n  \r\n      width: auto;\r\n      height: auto;\r\n    }\r\n  \r\n    .controls {\r\n      grid-column: 1/2;\r\n      grid-row: 2/3;\r\n    }\r\n  \r\n    .checkboxes {\r\n      grid-template-columns: repeat(3, 1fr);\r\n    }\r\n  \r\n    .buttons {\r\n      width: auto;\r\n    }\r\n  \r\n    .example {\r\n      width: max-content;\r\n      position: relative;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      \r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      grid-template-rows: max-content max-content max-content max-content;\r\n      grid-gap: 10px;\r\n      margin-top: 100px;\r\n    }\r\n  \r\n    .component-block {\r\n      grid-column: 1/2;\r\n      grid-row: 1/2;\r\n\r\n      margin: 0;\r\n    }\r\n  \r\n    .processor-block {\r\n      grid-column: 2/3;\r\n      grid-row: 1/2;\r\n\r\n      margin: 0;\r\n    }\r\n  \r\n    .entity-block {\r\n      grid-column: 1/3;\r\n      grid-row: 2/3;\r\n\r\n      margin: 0;\r\n    }\r\n  \r\n    .update-block {\r\n      grid-column: 1/3;\r\n      grid-row: 3/4;\r\n\r\n      margin: 0;\r\n    }\r\n}"],"names":[],"version":3,"file":"index.460f891d.css.map"}