html * {
  box-sizing: border-box;
}

body,
figure {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Arimo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

h-1 {
  font-weight: 700;
  font-style: normal;
}

h-2 {
  font-weight: 700;
  font-style: normal;
}

h-3 {
  font-weight: 700;
  font-style: normal;
}

h-4 {
  font-weight: 700;
  font-style: normal;
}

h-5 {
  font-weight: 700;
  font-style: normal;
}

h-6 {
  font-weight: 700;
  font-style: normal;
}

body.preview {
  display: block;
}
body.preview #dialog-figures {
  display: none;
}

#dialog-figures {
  max-width: 150px;
  max-height: 100dvh;
  overflow: auto;
  padding: 1rem;
  margin: 0;
  border-right: 1px solid dimgray;
}

#dialog-container {
  width: 100%;
  max-height: calc(20% - 1rem);
}
#dialog-container section {
  border: 5px solid white;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: border 0.2s ease-out;
  text-align: center;
}
#dialog-container section.empty {
  background-color: whitesmoke;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#dialog-container section > p {
  margin: 0;
  padding: 0;
}
#dialog-container figure {
  transition: transform 0.2s ease;
}
#dialog-container figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#dialog-container figure figcaption {
  display: none;
}
#dialog-container figure:hover, #dialog-container figure.active {
  transform: scale(1.05);
}

body.preview .grid-cell,
body.preview .grid-cell.merged {
  background: white;
}
body.preview .grid-cell--tools {
  display: none;
}

#main-container {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  grid-template-rows: repeat(18, minmax(0, 1fr));
  gap: 0.5rem;
  overflow: hidden;
}
#main-container.rules-visible {
  background: linear-gradient(to right, transparent 0% calc(50% - 1px), PaleTurquoise calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom, transparent 0% calc(33% - 1px), PaleTurquoise calc(33% - 1px) calc(33% + 1px), transparent calc(33% + 1px) calc(66.5% - 1px), PaleTurquoise calc(66.5% - 1px) calc(66.5% + 1px), transparent calc(66.5% + 1px));
}
#main-container section.figure-wrapper {
  display: flex;
}
#main-container figure {
  position: relative;
  height: 100%;
}
#main-container figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#main-container figure figcaption {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  color: white;
}
#main-container section:nth-child(1) {
  grid-area: item1;
}
#main-container section:nth-child(1) {
  justify-content: flex-end;
}
#main-container section:nth-child(2) {
  grid-area: item2;
}
#main-container section:nth-child(3) {
  grid-area: item3;
}
#main-container section:nth-child(3) {
  justify-content: flex-end;
}
#main-container section:nth-child(4) {
  grid-area: item4;
}
#main-container section:nth-child(5) {
  grid-area: item5;
}
#main-container section:nth-child(5) {
  justify-content: flex-end;
}
#main-container section:nth-child(6) {
  grid-area: item6;
}

.grid-cell {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
  transition: all 0.2s ease-out;
  cursor: pointer;
}
.grid-cell.selected {
  background-color: lightgrey;
}
.grid-cell.merged:not(.selected) {
  background: repeating-linear-gradient(45deg, darkGrey 0 1px, transparent 1px 2px);
}
.grid-cell--tools {
  position: absolute;
  z-index: 1000;
  inset: 0 0 auto auto;
  width: 100%;
  padding: 1px;
}
.grid-cell--tools .btn-tool {
  border: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
  transition: opacity 0.1s ease-out;
}
.grid-cell--tools .btn-tool:hover {
  opacity: 1;
}
.grid-cell--tools .btn-tool[data-action=delete] {
  background-image: url("data:image/svg+xml,%3Csvg width='24px' height='24px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etrash%3Cspan class='o-0.25'%3E-%3C/span%3Ebin%3Cspan class='o-0.25'%3E-%3C/span%3Eoutline%3C/title%3E%3Cpath fill='none' stroke='%23808080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1M6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  background-size: 80%;
}
.grid-cell--tools .btn-tool[data-action=align-top] {
  background-image: url("data:image/svg+xml,%3Csvg width='24px' height='24px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Evertical%3Cspan class='o-0.25'%3E-%3C/span%3Ealign%3Cspan class='o-0.25'%3E-%3C/span%3Etop%3Cspan class='o-0.25'%3E-%3C/span%3Erounded%3C/title%3E%3Cpath fill='%23808080' d='M5 5q-.425 0-.712-.288T4 4t.288-.712T5 3h14q.425 0 .713.288T20 4t-.288.713T19 5zm7 16q-.425 0-.712-.288T11 20v-9.2l-1.9 1.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l3.6-3.6q.15-.15.325-.212T12 7.425t.375.063t.325.212l3.6 3.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275L13 10.8V20q0 .425-.287.713T12 21'/%3E%3C/svg%3E");
  background-size: 80%;
}
.grid-cell--tools .btn-tool[data-action=align-bottom] {
  background-image: url("data:image/svg+xml,%3Csvg width='24px' height='24px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Evertical%3Cspan class='o-0.25'%3E-%3C/span%3Ealign%3Cspan class='o-0.25'%3E-%3C/span%3Etop%3Cspan class='o-0.25'%3E-%3C/span%3Erounded%3C/title%3E%3Cpath transform='rotate(180 12 12)' fill='%23808080' d='M5 5q-.425 0-.712-.288T4 4t.288-.712T5 3h14q.425 0 .713.288T20 4t-.288.713T19 5zm7 16q-.425 0-.712-.288T11 20v-9.2l-1.9 1.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l3.6-3.6q.15-.15.325-.212T12 7.425t.375.063t.325.212l3.6 3.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275L13 10.8V20q0 .425-.287.713T12 21'/%3E%3C/svg%3E");
  background-size: 80%;
}
.grid-cell--tools .btn-tool[data-action=align-right] {
  background-image: url("data:image/svg+xml,%3Csvg width='24px' height='24px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Evertical%3Cspan class='o-0.25'%3E-%3C/span%3Ealign%3Cspan class='o-0.25'%3E-%3C/span%3Etop%3Cspan class='o-0.25'%3E-%3C/span%3Erounded%3C/title%3E%3Cpath transform='rotate(90 12 12)' fill='%23808080' d='M5 5q-.425 0-.712-.288T4 4t.288-.712T5 3h14q.425 0 .713.288T20 4t-.288.713T19 5zm7 16q-.425 0-.712-.288T11 20v-9.2l-1.9 1.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l3.6-3.6q.15-.15.325-.212T12 7.425t.375.063t.325.212l3.6 3.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275L13 10.8V20q0 .425-.287.713T12 21'/%3E%3C/svg%3E");
  background-size: 80%;
}
.grid-cell--tools .btn-tool[data-action=align-left] {
  background-image: url("data:image/svg+xml,%3Csvg width='24px' height='24px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Evertical%3Cspan class='o-0.25'%3E-%3C/span%3Ealign%3Cspan class='o-0.25'%3E-%3C/span%3Etop%3Cspan class='o-0.25'%3E-%3C/span%3Erounded%3C/title%3E%3Cpath transform='rotate(-90 12 12)' fill='%23808080' d='M5 5q-.425 0-.712-.288T4 4t.288-.712T5 3h14q.425 0 .713.288T20 4t-.288.713T19 5zm7 16q-.425 0-.712-.288T11 20v-9.2l-1.9 1.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l3.6-3.6q.15-.15.325-.212T12 7.425t.375.063t.325.212l3.6 3.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275L13 10.8V20q0 .425-.287.713T12 21'/%3E%3C/svg%3E");
  background-size: 80%;
}
.grid-cell--tools .btn-tool[data-action=shrink-top] {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='ico-arrow-forward' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24 24'%3E%3C!-- Generator: Adobe Illustrator 30.1.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 136) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; %7D .st1 %7B fill: %23999; %7D %3C/style%3E%3C/defs%3E%3Crect class='st0' width='24' height='24'/%3E%3Cpath class='st1' d='M14.6,5H5v14h14V5h-4.4ZM9.3,18.1h-3.5v-3.5h3.5v3.5ZM5.9,13.7v-3.6h3.5v3.6h-3.5ZM13.7,18.1h-3.5v-3.5h3.5v3.5ZM10.2,13.7v-3.6h3.5v3.6h-3.5ZM18.1,18.1h-3.5v-3.5h3.5v3.5ZM18.1,13.7h-3.5v-3.6h3.5v3.6Z'/%3E%3C/svg%3E");
}
.grid-cell--tools .btn-tool[data-action=shrink-bottom] {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='ico-arrow-forward' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; %7D .st1 %7B fill: %23999; %7D %3C/style%3E%3C/defs%3E%3Crect class='st0' width='24' height='24'/%3E%3Cpath class='st1' d='M14.6,5H5v14h14V5h-4.4ZM14.6,5.9h3.5v3.5h-3.5v-3.5ZM10.2,5.9h3.5v3.5h-3.5v-3.5ZM13.7,10.2v3.5h-3.5v-3.5h3.5ZM5.9,5.9h3.5v3.5h-3.5v-3.5ZM9.3,10.2v3.5h-3.5v-3.5h3.5ZM14.6,13.8v-3.5h3.5v3.5h-3.5Z'/%3E%3C/svg%3E");
}
.grid-cell--tools .btn-tool[data-action=shrink-left] {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='ico-arrow-forward' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; %7D .st1 %7B fill: %23999; %7D %3C/style%3E%3C/defs%3E%3Crect class='st0' width='24' height='24'/%3E%3Cpath class='st1' d='M14.6,5H5v14h14V5h-4.4ZM13.7,18.1h-3.5v-3.5h3.5v3.5ZM13.7,13.7h-3.5v-3.5h3.5v3.5ZM13.7,9.4h-3.5v-3.5h3.5v3.5ZM18.1,18.1h-3.5v-3.5h3.5v3.5ZM18.1,13.7h-3.5v-3.5h3.5v3.5ZM18.1,9.4h-3.5v-3.5h3.5v3.5Z'/%3E%3C/svg%3E");
}
.grid-cell--tools .btn-tool[data-action=shrink-right] {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='ico-arrow-forward' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; %7D .st1 %7B fill: %23999; %7D %3C/style%3E%3C/defs%3E%3Crect class='st0' width='24' height='24'/%3E%3Cpath class='st1' d='M10.2,5h-5.2v14h14V5h-8.8ZM9.3,18.1h-3.5v-3.5h3.5v3.5ZM9.3,13.7h-3.5v-3.5h3.5v3.5ZM9.3,9.4h-3.5v-3.5h3.5v3.5ZM10.2,5.9h3.6v3.5h-3.6s0-3.5,0-3.5ZM10.2,10.2h3.6v3.5h-3.6s0-3.5,0-3.5ZM10.2,18.1v-3.5h3.6v3.5s-3.6,0-3.6,0Z'/%3E%3C/svg%3E");
}

.grid-cell.merged figure {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.grid-cell.merged figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.grid-cell.merged figure figcaption {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  font-size: small;
}

ul.menu {
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 0.25rem;
}
ul.menu li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex {
  display: flex;
}
.flex.flex-centered {
  align-items: center;
}
.flex-column {
  -ms-flex-direction: column;
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

#global-container {
  height: 100dvh;
  overflow: hidden;
  flex-grow: 1;
}

#header,
#footer {
  width: 100%;
}

#main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }
}

/*# sourceMappingURL=style.css.map */