:root {
  --gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

.box {
    width: 300px;
    max-width: 300px;
    height: 300px;
    border: 4px solid black;
    border-style: double;
    padding: 0;
}

.flex-row, .flex-column {
  display: flex;
  gap: var(--gap);
  justify-content: space-evenly;
}

.flex-row {
  width: 100%;

  & > div {
    padding: 12px;
    flex: 1;
  }
}

.align-center {
  display: flex;
  align-items: center;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.flex-column {
  flex-direction: column;
  width: 100%;
  align-items: center;
  & > div {
    padding: 12px;
    flex: 1;
  }
}

figure {
  text-align: center;
}

canvas {
  touch-action: none;
  background-color: white;
}

input {
  display: block;
}

.cloudcannon-visual-editor-component {
  --visual-editor-color: rgba(255, 192, 203, 0.5);
  background: repeating-linear-gradient(-45deg, var(--visual-editor-color), var(--visual-editor-color) 50px, transparent 50px, transparent 100px);
}