@import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono");

html, body {
    height : 100%;
}

body {
    background-color        : #292929;
    background-image        : radial-gradient(circle at center, #292929 0, #121212 100%);
    cursor                  : crosshair;
    font-family             : "Share Tech Mono", sans-serif;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-size               : 1.2rem;
}

@media (min-width : 600px) {
    body {
        font-size : 1.4rem;
    }
}

@media (min-width : 800px) {
    body {
        font-size : 1.8rem;
    }
}

@media (min-width : 1200px) {
    body {
        font-size : 2.2rem;
    }
}

img {
    position   : absolute;
    width      : auto;
    height     : auto;
    max-width  : 95%;
    max-height : 95%;
    top        : 50%;
    left       : 50%;
    transform  : translate(-50%, -50%);
}

button {
    -webkit-appearance : none;
    -moz-appearance    : none;
    appearance         : none;
    font-family        : "Share Tech Mono", sans-serif;
    font-size          : 2rem;
    font-weight        : 400;
    background         : #121212;
    color              : white;
    border-radius      : 4px;
    padding            : 0.5rem 1rem;
    position           : absolute;
    border             : none;
    cursor             : pointer;
    box-shadow         : 0px 2px 0px 3px #212121;
    top                : 50%;
    left               : 50%;
    transform          : translate(-50%, -50%);
}

button:hover {
    box-shadow : 0px 0px 0px 3px #212121;
    top        : calc(50% + 2px);
}

body.screenshot section {
    display : none;
}

section {
    position       : absolute;
    width          : 1200px;
    max-width      : calc(100% - 2rem);
    max-width      : calc(100% - 4rem);
    top            : 50%;
    left           : 50%;
    transform      : translate3d(-50%, -50%, 0);
    display        : flex;
    flex-direction : column;
}

section div.score,
section div.message {
    color          : white;
    line-height    : 1;
    text-transform : uppercase;
    font-weight    : 300;
    width          : 100%;
    flex-basis     : 50%;
    background     : #121212;
    box-sizing     : border-box;
    border         : 8px solid #121212;
}

section div.score {
    order     : 1;
    display   : flex;
    font-size : 1em;
}

section div.score > span {
    width           : 50%;
    text-align      : center;
    display         : flex;
    align-content   : space-between;
    justify-content : space-between;
    padding         : 0.5rem 1rem;
}

section div.score > span span:first-child {
    padding : 0.25em 0;
}

section div.score > span span:last-child {
    color         : #121212;
    background    : #f0f0f0;
    border-radius : 2px;
    padding       : 0.25em 0.25em;
}

section div.score > span:last-child {
    border-left : 8px solid #121212;
}

section div.score > span:last-child span:first-child {
    order : 2;
}

section div.score > span:last-child span:last-child {
    order : 1;
}

section div.message {
    order      : 3;
    text-align : center;
    font-size  : 0.8em;
    padding    : 0.5rem;
}

section div.message p {
    margin : 0;
}

section div.canvas {
    order        : 2;
    flex-basis   : 100%;
    width        : 100%;
    box-sizing   : border-box;
    border-left  : 8px solid #121212;
    border-right : 8px solid #121212;
}

section div.canvas canvas {
    display : block;
    width   : 100%;
    height  : auto;
    cursor  : none;
}