:root {
    /* 4bff27b4 */
  --white: #f9e957d5;
  --offwhite: #00ff00b4;
  --dimmed: #4bff2775;
  --green: #00FF00;
  --pink: #FF00FF;
}





/* Completely hide all scrollbars */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

.nodata {
  display: block;
  color: white;

  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: normal;
}



.node {
    fill: steelblue;
    cursor: pointer;
}
/* 
.link {
    stroke: rgb(255, 255, 255);
    stroke-width: 1px;
} */

.temp-link {
    stroke: grey;
    stroke-width: 2px;
    stroke-dasharray: 4, 4;
    z-index: -100;
}

.node.fixed circle {
    stroke-width: 3px;
    stroke: #ff0000;
}





.link {
  stroke: rgb(90, 90, 90);
  stroke-width: 2;
  transition: stroke 0.2s ease, filter 0.2s ease;
}

.link:hover {
  stroke: #00ff00;
  filter: drop-shadow(0 0 6px #ffffff);
}

.link.small {
  stroke: var(--white);
  filter: drop-shadow(0 0 6px var(--white));
}

.node.small{
  background-color: var(--white);
  filter: drop-shadow(0 0 12px var(--white));
}

#reset-zoom-button {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  font-size: larger;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 40px;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease-in-out;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: larger;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

#reset-zoom-button:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.4);
  transform: translateX(-50%) scale(1.1);
}