body {
    font-family: 'Roboto', sans-serif;
    padding: 10px 20px;
}


h1 {
    font-family: pixelfont, sans-serif;
}

h2 {
    color: #990000;
}

canvas {
    -moz-image-rendering: crisp-edges;
    image-rendering: crisp-edges;
}

.pf-header {
    margin-bottom: 30px;
}

.pf-bottomBorder {
    border-bottom: 1px solid #DDD;
    margin-bottom: 10px;
    padding-bottom: 10px;

}

.pf-inlineList {
    list-style: none;
    padding: 0;
}
.pf-inlineList li {
    display: inline-block;
    margin-bottom: 5px;
}
.pf-inlineList a {
    display: inline-block;
}
.pf-button {
    border: 0;
    background: #333;
    transition: all 0.2s;
    color: white;
    padding: 8px 12px;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}
.pf-button--active {
    cursor: default;
}
.pf-button:hover, .pf-button--active {
    background: none;
    color: #333;
    outline: solid 1px #333;
}

.pf-label {
    margin-bottom: 10px;
    color: #999;
}

.pf-cells {
    display: flex;
    flex-wrap: wrap;
}

.pf-cells canvas {
    margin-bottom: 5px;
    margin-right: 5px;
    outline: 1px solid #eee;
    image-rendering: pixelated;
    cursor: crosshair;
}

.pf-text {
    font-family: pixelfont, sans-serif;
    font-kerning: normal;
    font-variant-ligatures: no-common-ligatures;
    border-bottom: 1px solid #DDD;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.pf-text--colrcolor {
    font-family: pixelfontcolrcolor, sans-serif;
}

.pf-text--color {
    font-family: pixelfontcolor, sans-serif;
}

.pf-text--smp {
    font-family: pixelfontsmp, sans-serif;
}

.pf-text--gsub {
     font-family: pixelfontgsub, sans-serif;
 }

.pf-text--liga {
    font-family: pixelfontliga, sans-serif;
}

.pf-text--comp {
    font-family: pixelfontcomp, sans-serif;
}

.pf-text--unkerned {
    font-kerning: none !important;
}

.pf-label {
    margin-bottom: 10px;
}

.pf-canvas {
    display: none;
}