:root, :root.light {
  color-scheme: light dark;

  /* default light mode values */
  --body-bg: white;
  --text-color: black;
  --block-to-block-link-color: black;
  --block-description-link-color: gray;
  --block-description-bg: #f8f9fa;
  --block-miner-color: rgb(122, 122, 122);
  --node-indicatior-stroke: black;

  --tip-status-color-active: #79FF00;
  --tip-status-color-invalid: #CC203B;
  --tip-status-color-valid-fork: #3CACB5;
  --tip-status-color-valid-headers: #FF69B4;
  --tip-status-color-headers-only: #FF8800;
}

/* automatic dark mode */
/* keep the rules in sync with the manual dark mode below! */
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #202124;
    --text-color: white;
    --block-to-block-link-color: white;
    --block-description-link-color: lightgray;
    --block-description-bg: #f8f9fa;
    --node-indicatior-stroke: black;
    --block-miner-color: rgb(172, 172, 172);

    --tip-status-color-active: #79FF00;
    --tip-status-color-invalid: #CC203B;
    --tip-status-color-valid-fork: #3CACB5;
    --tip-status-color-valid-headers: #FF69B4;
    --tip-status-color-headers-only: #FF8800;
  }
  svg.invert, img.invert, .btn-close {
    -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
    filter: invert(100%);
  }
}

/* manual dark mode */
/* keep the rules in sync with the automatic dark mode above! */
:root.dark {
  --body-bg: #202124;
  --text-color: white;
  --block-to-block-link-color: white;
  --block-description-link-color: lightgray;
  --block-description-bg: #f8f9fa;
  --node-indicatior-stroke: black;
  --block-miner-color: rgb(172, 172, 172);

  --tip-status-color-active: #79FF00;
  --tip-status-color-invalid: #CC203B;
  --tip-status-color-valid-fork: #3CACB5;
  --tip-status-color-valid-headers: #FF69B4;
  --tip-status-color-headers-only: #FF8800;
  svg.invert, img.invert, .btn-close {
    -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
    filter: invert(100%);
  }
}

body, .card {
  background: var(--body-bg);
}

h1, h2, h3, h4, h5, h6, p, label, span, hr, a {
  color: var(--text-color);
}

.border {
  border-color: var(--text-color);
}

.text-color-dark {
  color: black;
}

.link {
  fill: none;
}

path.link.link-block-block {
  stroke: var(--block-to-block-link-color);
  stroke-width: 2px;
}

path.link.link-block-description {
  stroke: var(--block-description-link-color);
  stroke-width: 1px;
}

text.text-blocks-not-shown {
 fill: var(--text-color);
 text-anchor: middle;
 font-size: 12px;
}

text.block-text {
 fill: black;
 text-anchor: middle;
 font-size: 10px;
}

text.block-miner {
 fill: var(--block-miner-color);
 text-anchor: middle;
 font-size: 10px;
}

.block {
  cursor: pointer;
}

.block-description {
  cursor: grab;
}

.block-description-background {
  fill: var(--block-description-bg);
  stroke: var(--text-color);
}

.node-tip-status-indicator {
 stroke: var(--node-indicatior-stroke);
 stroke-width: 1px;
}

.node-tip-status-indicator text {
 stroke-width: 0px;
 font-size: 14px;
 text-anchor: middle;
 fill: black;
}

/* For the legend */ 
.legend-item {
  color: black;
  padding: 2px 5px;
  border-radius: 5px;
}

.tip-status-color-background-active { background-color: var(--tip-status-color-active); }
.tip-status-color-background-invalid { background-color: var(--tip-status-color-invalid); color: }
.tip-status-color-background-valid-fork { background-color: var(--tip-status-color-valid-fork); }
.tip-status-color-background-valid-headers { background-color: var(--tip-status-color-valid-headers); }
.tip-status-color-background-headers-only { background-color: var(--tip-status-color-headers-only); }


.tip-status-color-fill-active { fill: var(--tip-status-color-active); color: var(--tip-status-color-active); }
.tip-status-color-fill-invalid { fill: var(--tip-status-color-invalid); color: var(--tip-status-color-invalid); }
.tip-status-color-fill-valid-fork { fill: var(--tip-status-color-valid-fork); color: var(--tip-status-color-valid-fork); }
.tip-status-color-fill-valid-headers { fill: var(--tip-status-color-valid-headers); color: var(--tip-status-color-valid-headers); }
.tip-status-color-fill-headers-only { fill: var(--tip-status-color-headers-only); color: var(--tip-status-color-headers-only); }

#connection-status {
  animation: pulse infinite 5s;
  color: gray;
  vertical-align: text-bottom;
}

@-webkit-keyframes pulse {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}