:root {
  --debug-outline: 0px;
  --foreground-colour: rgb(255, 255, 255);
  --background-colour: rgb(48, 48, 48);
  --font-size: 16px;
  --font-family: monospace, sans-serif;
  --font-weight: 400;
  --scrollbar-slider: rgb(64, 64, 64);
  --scrollbar-gutter: var(--background-colour);
  --scrollbar-colour: var(--scrollbar-slider) var(--scrollbar-gutter);
  --c1: #9AA0A6;
  --c2: rgb(33, 34, 36);
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  overflow: auto;
  background-color: var(--background-colour);
  color: var(--foreground-colour);
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  scrollbar-color: var(--scrollbar-colour);
  box-shadow: inset 0 0 0 var(--debug-outline) var(--foreground-colour);
}

#page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--background-colour);
}

.toolbar {
  width: 100%;
  height: 48px;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0px 32px;
  gap: 16px;
  display: flex;
  justify-content: left;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
  box-sizing: border-box;
  background-color: var(--c2);
  scrollbar-color: var(--scrollbar-slider) var(--c2);
}

.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 8px 32px;
  flex-grow: 1;
  flex-shrink: 1;
  background-color: var(--background-colour);
}

span {
  user-select: none;
  cursor: pointer;
  padding: 4px;
  margin: 0px;
  vertical-align: middle;
}

span:hover {
  outline: 2px solid var(--c1);
}

.content span {
  margin: 0px;
  padding: 0px;
}

.hidden {
  display: none;
}

.material-symbols-outlined {
  color: var(--c1);
  font-size: 24;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 100, 'opsz' 24,
}