@import url(https://fonts.googleapis.com/css?family=Roboto);

html,
body {
  font-family: 'Roboto', sans-serif;
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;

  --primary-color: white;
  --secondary-color: rgb(100, 100, 100);
  --tertiary-color: rgb(50, 50, 50);
  --background-color: rgb(34, 34, 34);

  --default-color: white;
  --paren-color-1: rgb(218, 112, 214);
  --paren-color-2: rgb(255, 215, 1);
  --paren-color-3: rgb(104 149 232);
  --comment-color: green;
  --error-color: red;
  --namespace-color: rgb(147, 107, 255);
  --ident-color: rgb(32 223 223);
  --number-literal: rgb(180, 213, 165);
  --string-color: rgb(244, 128, 82);

  background-color: var(--background-color);
  color: var(--primary-color);

  scrollbar-color: var(--secondary-color) var(--background-color);
}

a {
  color: var(--primary-color);
}

code {
  background-color: var(--tertiary-color);
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 1.5px;
}

pre:has(code) {
  background-color: var(--tertiary-color);
  padding: 8px;
  border-radius: 1.5px;
}

pre>code {
  padding: 0px;
  border-radius: 0px;
}

.main {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.vertical-bar {
  width: 1px;
  height: 100%;
  background-color: var(--secondary-color);
}

.horizontal-bar {
  height: 1px;
  width: 100%;
  background-color: var(--secondary-color);
}

div {
  /* We're crazy like this. */
  display: flex;
}

.tab-selected {
  background-color: var(--secondary-color);
}

.tab-unselected:hover {
  background-color: var(--tertiary-color);
}