.graph {
  height: 100vh;
  background: url(img/gplaypattern.png);

  svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .link {
    stroke-opacity: 0.8;

    line {
      stroke-width: 2.5px;
      cursor: pointer;
    }

    &.highlight line {
      stroke-width: 7px;
      stroke-dasharray: 10, 10;
      opacity: 1;
    }
  }

  .node {
    fill: #fff;
    stroke-width: 2.5px;
    stroke: #AEC7E8;
    
    &:not(.unknown) {
      cursor: pointer;
    }

    &.highlight {
      stroke: #FFD486;
      stroke-width: 6px;
      fill: orange;
      point-order: stroke;
    }

    &.unknown {
      stroke: #d00000;
    }
  }

  .label {
    text {
      font-size: 0.8em;
    }

    rect {
      fill: rgba(255, 255, 255, 0.8);
    }
  }
}  

@media screen and (max-width: $minscreenwidth) {
  .graph {
    height: 60vh;
  }
}