@font-face {
  font-family: 'LittleCharacter';
  src: url('/static/fonts/LittleCharacter-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --black: rgba(1, 1, 1, 1);
  --grey1: rgba(51, 51, 51, 1);
  --grey2: rgba(127, 127, 127, 1);
  --grey2Back: rgba(127, 127, 127, 0.75);
  --grey2Back2: rgba(127, 127, 127, 0.5);
  --grey2Back3: rgba(127, 127, 127, 0.25);
  --grey3: rgba(204, 204, 204, 1);
  --white: rgb(255, 255, 255, 1);
  --orange1: rgba(255, 164, 0, 1);
  --orange2: rgba(217, 93, 57, 1);
  --orange2Back: rgba(217, 93, 57, 0.7);
  --blue1: rgba(51, 204, 255, 1);
  --blue2: rgba(0, 136, 179, 1);
  --purple: rgba(68, 3, 129, 1);

  --brownTube: rgba(161, 134, 111, 1);

  font-family: 'Courier New', Courier, monospace;
}


.svg_background {
    stroke: var(--black);
    fill: var(--grey3);
    stroke-width: 0px;
}

.svg_tube {
    stroke: var(--black);
    fill: var(--brownTube);
}

.svg_fuel {
    stroke: var(--black);
    fill: var(--grey2);
}

.svg_fuelBack {
    stroke: var(--black);
    fill: var(--grey1);
}

.svg_nozzle {
    stroke: var(--black);
    fill: var(--orange1);
}

.svg_nozzleBack {
    stroke: var(--black);
    fill: var(--orange2);
}

.svg_arrow {
    fill: var(--purple);
    stroke: var(--purple);
    stroke-width: 1;
}

.svg_text {
    fill: var(--purple);
    white-space: pre;
    font-size: 15px;
    stroke-width: 1;
}

.svg_text_center {
    text-anchor: middle;
}