#grid-graph { text-align: center; }

svg .axis { stroke-width: 7px; }
svg .edge, svg .axis { stroke: hsl(160, 30%, 50%); }
svg .edge.highlight { stroke: hsl(160, 50%, 60%); }

svg .node, svg .tile { fill: hsl(230, 50%, 60%); stroke: hsl(230, 30%, 50%); }
svg .node.highlight { fill: hsl(230, 60%, 70%); }

svg .nodelabel { fill: hsl(0, 0%, 100%); }

#graph-description .edge { color: hsl(160, 30%, 50%); padding: 0 0.2em; margin: 0 0.4em; }
#graph-description .edge.highlight { color: hsl(160, 50%, 60%); }

#graph-description .node { background: hsl(230, 50%, 60%); border: 1px solid hsl(230, 30%, 50%); color: hsl(0, 0%, 100%); text-align: center; padding: 0 0.2em; margin: 0 0.2em; border-radius: 8px; }
#graph-description .node.highlight { background: hsl(230, 60%, 70%); }

.var_edge { color: hsl(160, 50%, 40%); font-weight: bold; font-style: normal; }
.var_node { color: hsl(230, 50%, 55%); font-weight: bold; font-style: normal; }