*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 512px;
    height: 512px;
    background: url(gfx/clouds.png);
    background-size: cover;
    overflow: hidden;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.pinkie {
    position: absolute;
    width: 140px;
    height: 126px;
    top: 276px;
    left: 64px;
    background: url(gfx/pie-dash.gif);
}

.pinkie.jumping {
    background: url(gfx/pie-jump.gif) !important;
}

.pinkie.gameover {
    background: url(gfx/pie-oops.gif) !important;
}

.ground {
    position: absolute;
    width: 3840px;
    height: 256px;
    top: 384px;
    left: -128px;
    background: url(gfx/map.png);
    z-index: -1;
}

.hater {
    position: absolute;
    width: 150px;
    height: 113px;
    left: -512px;
    background: url(gfx/trollface.gif);
}

.coin {
    position: absolute;
    width: 128px;
    height: 128px;
    left: -512px;
    background: url(gfx/coin.gif);
}
