* {
  box-sizing:border-box;
}
html, body {
  background:#d1d1d1;
  height:100%;
  margin:0;
}
:root {
  --baseline: 0.5rem;
  --cols: 60;
  line-height: 1lh;
}
body {
  display:grid;
  grid-template-areas:
    'sidebar topbar'
    'sidebar main'
    'sidebar bottombar'
  ;
  grid-template-rows:100px 1fr 100px;
  grid-template-columns:256px 1fr;
  overflow:hidden;
}
.sidebar {
  grid-area:sidebar;
}
.topbar {
  grid-area:topbar;
}
.main {
  grid-area:main;
}
.bottombar {
  grid-area:bottombar;
}
grid-system {
  height:100%;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  > * {
    grid-area: var(--y) / var(--x) / span var(--h) / span var(--w);
  }
}

.subgrid, .button-group {
  display:grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  > * {
    grid-area: var(--y) / var(--x) / span var(--h) / span var(--w);
  }
}

canvas {
  image-rendering:pixelated;
}

#fontPreview {
  object-fit:contain;
  cursor: pointer;
  max-width:100%;
  max-height:100%;
}

.character-info {
  border: 1px solid #ccc;
}

.edge-data {
  border-top: 1px solid #eee;
}
.placecenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.edge-preview {
  display:grid;
  place-content: center;
  canvas {
    border: 0.2px solid red;
    background: white;
    width: var(--cell-width);
    height:var(--cell-height);
    zoom:4;
  }
}
.error {
  font-family:monospace;
  font-size:10px;
  line-height:1;
  overflow:auto
}
.border {
  border-top:1px solid black;
  border-bottom:1px solid black;
}
button {
  border: 1px solid black;
  cursor: pointer;
  padding:0;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.drawing-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

input, select {
  width: 100%;
  height:100%;
}

button.active {
  background: lime;
}
.sidebar {
  border-right:1px solid black;
}
.topbar {
  padding:4px;
  border-bottom:1px solid black;
}
.main {
  display:grid;
  place-content:center;
  overflow:auto;
}
.drawing-area{
  position: relative;
  canvas{
    position: relative;
  }
  &::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    background-image: repeating-linear-gradient(transparent 0% calc(100% - 1px),rgb(150,150,250,.2) calc(100% - 1px) 100%),repeating-linear-gradient(90deg,transparent 0% calc(100% - 1px),rgb(150,150,250,.2) calc(100% - 1px) 100%);
    background-size: var(--cell-width) var(--cell-height);
  }
}