styles.css

text {
    font-family: Verdana, Georgia, sans-serif;
    font-size: 14px;
    font-weight: normal;
}

.panel__inner {
    fill: #fff;
}
.panel__outer {
    fill: #333;
}


.pinlabel__leader{
    stroke-width: 2;
    fill: none;
}

.pinlabel__text{
    dominant-baseline: central;
    fill: #fff;
    
    font-weight: bold;
    stroke-width: 0;
    text-anchor: middle;
}



.pin-id .pinlabel__body{
    fill: rgb(110, 110, 110);
}
.pin-id .pinlabel__leader{
    stroke: rgb(110, 110, 110);
}
.pin-id .swatch__body {
    fill: rgb(110, 110, 110);
}
.comms .pinlabel__body{
    fill: rgb(84, 161, 145);
}
.comms .pinlabel__leader{
    stroke: rgb(84, 161, 145);
}
.comms .swatch__body {
    fill: rgb(4, 44, 17);
}
.pwr .pinlabel__body{
    fill: rgb(195, 18, 87);
}
.pwr .pinlabel__leader{
    stroke: rgb(195, 18, 87);
}
.pwr .swatch__body {
    fill: rgb(195, 18, 87);
}
.gnd .pinlabel__body{
    fill: rgb(0, 0, 0);
}
.gnd .pinlabel__leader{
    stroke: rgb(0, 0, 0);
}
.gnd .swatch__body {
    fill: rgb(0, 0, 0);
}
.led .pinlabel__body{
    fill: rgb(216, 100, 252);
}
.led .pinlabel__leader{
    stroke: rgb(216, 100, 252);
}
.led .swatch__body {
    fill: rgb(216, 100, 252);
}



.legendentry text {
    dominant-baseline: central;
}

.h1 {
    font-size: 26px;
    font-weight: bold;
    font-style: italic;
}
.italic{
    font-style: italic;
}
.strong{
    font-weight: bold;
}

.panel--info .panel__inner{
    fill: #f4f4f4;
}

.annotation__body {
    fill: rgb(253, 203, 36);
    stroke-width: 0;
}
.annotation__text {
    dominant-baseline: central;
    font-size: 14px;
    font-weight: bold;
    fill: rgb(63, 40, 6);
    text-anchor: middle;
}
.annotation__target {
    fill: none;
    stroke: rgb(253, 203, 36);
    stroke-width: 4px;
}
.annotation__leaderline {
    stroke: rgb(253, 203, 36);
    stroke-width: 4px;
    fill: none;
}