:root {
  --primary: rgb(54, 55, 207);
  --primary-dark: rgb(27, 27, 65);
  --light: rgb(50, 50, 50);
  --lighter: rgb(100, 100, 100);
  --dark: rgb(17, 17, 17);
}

@font-face {
    font-family: "Space Mono";
    src: url("/fonts/SpaceMono-Regular.ttf") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

html, body {
  font-family: "Space Mono", monospace;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background-color: black;
}

canvas {
  cursor: grab;
}

.tool-window {
  position: absolute;
  top: 0;
  left: 0;
  width: 28ch;
  margin: 20px;
  background-color: var(--dark);
  color: white;
}

.tool-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 10px;
  background-color: var(--primary-dark);
  border: 2px solid var(--light);
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.tool-window[closed] > .tool-header > span::before {
  content: '+';
}

.tool-window > .tool-header > span::before {
  content: '-';
}

.tool-fields {
  padding: 10px 10px 12px 10px;
  border: 2px solid var(--light);
  border-top: none;
}

.tool-window > .tool-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tool-window[closed] > .tool-fields {
  display: none;
}

.tool-fields > fieldset {
  border: 2px solid var(--lighter);
  padding: 10px;
}

fieldset input {
  margin: 0;
}

.subdivision-fields {
  display: flex;
  gap: 1ch;
}

.subdivision-fields > * {
  height: 3ch;
}

.subdivision-info {
  width: 100%;
  pointer-events: none;
  background-color: var(--primary-dark);
  color: white;
  padding: 0;
  border: none;
  padding-left: 5px;
}

.subdivision-button {
  background-color: var(--primary);
  color: white;
  border: none;
  width: 4ch;
}

.shading-toggle {
  accent-color: var(--primary);
}