: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(84, 93, 103);
  --scrollbar-gutter: var(--colour-background);
  --scrollbar-colour: var(--scrollbar-slider) var(--scrollbar-gutter);
}

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: 10%;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  background-color: grey;
}

.toolbar span {
  user-select: none;
  cursor: pointer;
  padding: 8px;
  margin: 16px;
  vertical-align: middle;
}

.toolbar span:hover {
  outline: 2px solid var(--foreground-colour);
}

.content {
  width: 100%;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  background-color: var(--background-colour);
}

.hidden {
  display: none;
}