* {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    box-sizing: border-box;
    -ms-interpolation-mode: nearest-neighbor;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: -moz-crisp-edges;
        image-rendering: pixelated;
}

html {
    color: #EEE;
    background-color: #111;
}

#frame {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    position: fixed;
    overflow: hidden;
}

@media(min-aspect-ratio: 1/1) {
    #frame {
        font-size: 100vh;
        width: 100vh;
        height: 100vh;
    }
}

@media(max-aspect-ratio: 1/1) {
    #frame {
        font-size: 100vw;
        height: 100vw;
        width: 100vw;
    }
}

canvas {
    width: 100%;
    height: 100%;
    position: absolute;
}

.hearts {
    top: 0em;
    left: 0em;
    z-index: 99;
    padding: 0.05em;
    position: absolute;
}

.heart {
    width: 0.1em;
    height: 0.1em;
    float: left;
    margin-right: 0.01em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,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);
}

.half.heart {
    background-image: url(data:image/png;base64,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);
}

#you-win {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9999;
    position: absolute;

    padding: 5em 1em;

    font-size: 0.05em;
    text-align: center;
    font-family: monospace;

    opacity: 0;
    visibility: hidden;
    -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    background-color: rgba(0, 0, 0, 0.5);
}

h1 {
    font-size: 3em;
}

#play-again {
    margin: 1em;
    display: block;
}

a {
    color: inherit;
}

a:hover {
    color: #C00;
}