body {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.centered-outer {
    margin: 0 auto;
}

.centered-inner {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

:root {
    /* colors, will be initialized in js on runtime */
    --textColor: ;
    --barDefaultColor: ;
    --barSwapColor: ;
    --barCompareColor: ;
    --barSetColor: ;
    --barGetColor: ;
    --barCorrectColor: ;
    --barIncorrectColor: ;
    --canvasHeight: ;
    /* bar dynamically resizing widths */
    --widthUnit: 10px;
    --heightUnit: 10px;
}

h1 {
    color: var(--textColor);
}

p {
    color: var(--textColor);
}

rect {
    width: var(--widthUnit);
}

rect.default {
    fill: var(--barDefaultColor);
}

rect.swap {
    fill: var(--barSwapColor);
}

rect.compare {
    fill: var(--barCompareColor);
}

rect.get {
    fill: var(--barSwapColor);
}

rect.set {
    fill: var(--barCompareColor);
}

rect.correct {
    fill: var(--barCorrectColor);
}

rect.incorrect {
    fill: var(--barIncorrectColor);
}

rect.rotatable {
    transform-box: fill-box;
    transform-origin: center;
}