@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal; 
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: normal;
  font-style: italic; 
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: bold;
  font-style: normal; 
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: bold;
  font-style: italic; 
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('./fonts/RobotoMono-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal; 
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('./fonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: italic; 
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('./fonts/RobotoMono-VariableFont_wght.ttf') format('truetype');
  font-weight: bold;
  font-style: normal; 
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('./fonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: bold;
  font-style: italic; 
}

html {
  --background-col: #333333;
  --primary-text-col: #d9d9d9;
  --button-background-col: #aeaeae;
  --button-bacgkround-col-hl: white;
  --button-text-col: #4d4d4d;
  --button-text-col-hl: #313131;
  --editor-background-color: #262626;
  --editor-text-area-background-color: #151515;
  --sidebar-entry-background-color: #181818;
  --sidebar-entry-background-color-hl: #009d47;
  --sidebar-entry-background-color-pt: #007936;
  --sidebar-entry-inner-background-color-hl: #111111;

  --tab-background-color: #414141;
  --tab-unsaved-color: #e85f04;
  --tab-new-color: #b70a0a;

  --grid-editor-border-color: #aeaeae;
  --grid-editor-dropdown-background-color: #4d4d4d;
  --grid-editor-picker-text-color: #696969;
  --grid-editor-hover-background-color: rgba(255, 255, 255, 0.08);
  --grid-editor-selected-background-color: #0e2e51;
  --grid-editor-selected-hover-background-color: #144273;

  --ge-seamless-input-hover: rgba(0, 0, 0, 0.25);
  --ge-seamless-input-focus: rgba(0, 0, 0, 0.5);
  
  --ge-highlight-background-color: #ffc228;
  --ge-highlight-text-color: #111111;

  --ge-object-background-color: #ffc228;
  --ge-array-background-color: #28adff;
  --ge-object-text-color: #111111;
  --ge-array-text-color: #111111;

  --ge-string-color: #e0752e;
  --ge-number-color: #53c3ff;
  --ge-null-color: #a1a1a1;
  --ge-empty-color: #a1a1a1;
  --ge-undefined-color: #696969;
  --ge-boolean-true-color: #139e01;
  --ge-boolean-false-color: #da3507;

  --ge-grip-background-color: #313131;
}

* {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background-col);
  color: var(--primary-text-col);
}

h1 {
  font-size: 1.5em;
  margin-top: 0;
}

h2 {
  font-size: 1.25em;
  margin-top: 0;
}

h3 {
  font-size: 1em;
  margin-top: 0;
}

p {
  margin-top: 0;
}

strong {
  color: var(--sidebar-entry-background-color-hl);
  font-weight: bold;
}

article {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 2em;
}

main {
  max-width: 800px;
}