@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);

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


.background_shaders {
    stroke: var(--black);
    stroke-opacity: 0;
}

.background_shader_main {
    fill: var(--grey1);
    fill-opacity: 0.85;
}

.course_map_background {
    z-index: -1;
}

.course_boundary {
    fill: var(--grey1);
    stroke: var(--orange2);
    stroke-width: 5px;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.structures_path {
    stroke: var(--black);
    fill: var(--purple);
    stroke-width: 0px;
}

.structures_text {
    fill: var(--grey3);
    font-size: 30px;
    stroke-width: 0px;
    white-space: pre;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.hole {
    stroke: var(--black);
    stroke-width: 0px;
    fill: var(--orange1);
}

.incomplete_hole {
    stroke: var(--black);
    stroke-width: 0px;
    fill: var(--grey2);
}

.hole_link {
    fill-opacity: 0;
}

.green {
    stroke: var(--black);
    stroke-width: 0px;
    fill: var(--blue2);
}

.tees {
    stroke: var(--black);
    stroke-width: 0px;
    fill: var(--blue1);
}

.hole_numbers {
    fill: var(--grey1);
    font-size: 50px;
    font-weight: 700;
    white-space: pre;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.pin {
    stroke: var(--black);
    stroke-width: 0px;
    fill: var(--orange2);
}