html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #0b0e1a;
    font-family: "Trebuchet MS", Verdana, sans-serif
}

canvas {
    display: block;
    touch-action: none;
    cursor: crosshair
}

#restart {
    position: fixed;
    top: 14px;
    right: 14px;
    background: rgba(10, 14, 30, .55);
    color: #ffd9a0;
    border: 1px solid rgba(255, 217, 160, .4);
    border-radius: 8px;
    padding: 8px 16px;
    font: 600 14px "Trebuchet MS", sans-serif;
    letter-spacing: .06em;
    cursor: pointer;
    backdrop-filter: blur(4px)
}

#restart:hover {
    background: rgba(255, 217, 160, .15)
}

@media (max-width:560px) {
    #restart {
        top: 10px;
        right: 10px;
        padding: 6px 11px;
        font-size: 12px
    }

    #hint {
        font-size: 11px;
        width: 90%;
        text-align: center;
        bottom: 14px
    }
}

#hint {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 240, 220, .75);
    font: 600 13px "Trebuchet MS", sans-serif;
    letter-spacing: .08em;
    pointer-events: none;
    transition: opacity 1s
}