* {
  font-family: arial;
  /* mix-blend-mode: difference; */
}

html,
body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.popup {
  border-radius: 8px;
  color: #ffffff;
  font-size: 1.2em;
  padding: 4px 6px;
  position: relative;
  text-align: center;

  ::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    /* border-top: 8px solid; // NOTE: this would be the arrow but needs coloring */
  }
}

:root {
  /* --color-base: salmon; */
  /* --color-base: brown; */

  /* "matcha" / "mint" */
  /* --color-base: #8ba888; */

  /* "lavender" */
  --color-base: #dcd0ff;
}

.color-1 {
  --color-background: oklch(from var(--color-base) l c h);
}

.color-2 {
  --color-background: oklch(from var(--color-base) calc(l + 0.1) c h);
}

.color-3 {
  --color-background: oklch(from var(--color-base) calc(l + 0.2) c h);
}

.color-4 {
  --color-background: oklch(from var(--color-base) calc(l + 0.3) c h);
}

.color-5 {
  --color-background: oklch(from var(--color-base) calc(l + 0.4) c h);
}

.color-1,
.color-2,
.color-3,
.color-4,
.color-5 {
  /* SOURCE: luma calculation from https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/ with huge rewrites */
  --color-font: rgb(
    from var(--color-background)
      calc(((((r * 299) + (g * 587) + (b * 114)) / 1000) - 128) * -1000)
      calc(((((r * 299) + (g * 587) + (b * 114)) / 1000) - 128) * -1000)
      calc(((((r * 299) + (g * 587) + (b * 114)) / 1000) - 128) * -1000)
  );

  background-color: var(--color-background);
  color: var(--color-font);
}

#map {
  height: 100%;
}

form#route-form {
  position: absolute;

  top: 10px;
  left: 10px;

  padding: 10px;
  background-color: white;

  input {
    display: block;
    width: 100%;
  }

  textarea#route-as-text {
    width: 50vw;
    height: 30vw;

    display: block;
  }
}