@font-face {
    font-family: Jost;
    src: url("Jost-Bold.ttf");
}

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    /*background-image: url("dark.jpg");*/
    /*background-color: #1a1c2c; travesol */
    /* background-color: #234e70; // lighter blue */
    /*background-color: #3f3c7e; // some blue */
    /*background-color: #00539c;*/
    /* background-color: #080819; // best yet */
    background-color: #0d0b0a;
    font-family: sans;
}

#container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    width: 100%;
    /*
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -o-crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    */
}

input {
    display: none;
    padding: 0.3em;
    font-size: 120%;
    width: 50em;
    font-family: mono;
}

span {
    font-size: 200%;
    font-family: sans;
}

#go {
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    background: #e7e7de;
    color: #0d0b0a;
    font-size: 4vw;
    /* position in center of parent */
    position: absolute;
    top: 50%;
    left: 50%;
    /* offset by half width and height */
    margin-left: -10vw;
    margin-top: -10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
}

#go:hover {
    background: #d7d7ce;
}