styles.css

body {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    overflow: hidden;
    background: black;
}

header {
    background: #c9c9c9;
}

header::after {
    content: '';
    display: table;
    clear: both;
}

nav {
    float: center;
    font-family: monospace;
}

nav a {
    color: #363636;
    text-transform: uppercase;
    font-size: 14px;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-right: 10px;
    color: #363636;
    text-transform: uppercase;
    font-size: 14px;
}

path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4
}

text {
    fill: white;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.box {
    fill: #ffffff;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

#box-border {
    stroke-width: 4;
    stroke: #ffffff;
}

#box-border-starter {
    stroke-width: 4;
    stroke: #b2ffb2;
}

#box-border-respected {
    stroke-width: 4;
    stroke: #e39400;
}

.title {
    fill: #000090;
    font-size: 1em;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.info-text {
    fill: #6c6c6c;
    font-size: 0.5em;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.item-text-common {
    fill: #bababa;
    font-size: 0.5em;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.item-text-uncommon {
    fill: #48b948;
    font-size: 0.5em;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.item-text-rare {
    fill: #2828f8;
    font-size: 0.5em;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.item-text-epic {
    fill: #8d008d;
    font-size: 0.5em;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.item-text-legendary {
    fill: #e09200;
    font-size: 0.5em;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.item-text-mythic {
    fill: #ff57d4;
    font-size: 0.5em;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.item-text-divine {
    fill: #33aec3;
    font-size: 0.5em;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.item-text-special {
    fill: #ff0000;
    font-size: 0.5em;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.item-text-very-special {
    fill: #ff0000;
    font-size: 0.5em;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Consolas', serif;
}

.income-text {
    @extend .info-text;
    fill: black;
    font-size: 0.5em;
    text-anchor: middle;
}

.note-text {
    @extend .info-text;
    fill: #6c6c6c;
    font-size: 0.5em;
    text-anchor: middle;
}