html {
    background-color: black;
    user-select: none;
}

body {
    margin: 20px;
    font: 1.5em/1.2 sans-serif;
    text-align: center;
    
    color:white;
    position:relative;

}

figure {
    display: inline-block;
    margin: 10px;
    vertical-align: top;
    position:relative
}

graph {
    display: inline-block;
    margin: 10px;
    vertical-align: top;
    position: relative;
    cursor:crosshair;
}

#marker{
    position:absolute;
    width:100%;
    border-top: 1px solid red;
    top:50px;
    font-size:12px;
    text-align:left
}

figcaption {
    text-align: left;
    font-weight: bold;
}

.videoCanvas {
    height: 480px;
    width: 640px;
    background-color: #999;
}

video, canvas {
    /*width: 480px;
    height: 360px;*/

    /*background-color: black;*/
    
}

#graphCanvas {
    background-color: black;

}



canvas {
    image-rendering: pixelated;
}

#cam{
    position:relative;
}

svg {
    height: 480px;
    width: 640px;
    position: absolute;
    top: 0;
    left: 0;
   
}

#clipSvg {
    cursor: crosshair;
}

icon {
    display: block;
    position: absolute;
    width: 96px;
    height: 96px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA0OCA0OCIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iOTZweCIgaGVpZ2h0PSI5NnB4Ij48ZyBpZD0ic3VyZmFjZTEiPjxwYXRoIHN0eWxlPSIgZmlsbDojM0Y1MUI1OyIgZD0iTSAxOCAxMiBDIDE1LjE5OTIxOSAxMiAxMyA5LjgwMDc4MSAxMyA3IEMgMTMgNC4xOTkyMTkgMTUuMTk5MjE5IDIgMTggMiBDIDIwLjgwMDc4MSAyIDIzIDQuMTk5MjE5IDIzIDcgQyAyMyA5LjgwMDc4MSAyMC44MDA3ODEgMTIgMTggMTIgWiAiLz48cGF0aCBzdHlsZT0iIGZpbGw6IzNGNTFCNTsiIGQ9Ik0gMTAgMjIgTCAxMCAzMCBMIDEzIDMyIEwgMTQgNDYgTCAyMiA0NiBMIDIzIDMyIEwgMjYgMzAgTCAyNiAyMiBDIDI2IDE3LjYwMTU2MyAyMi4zOTg0MzggMTQgMTggMTQgQyAxMy42MDE1NjMgMTQgMTAgMTcuNjAxNTYzIDEwIDIyIFogIi8+PHBhdGggc3R5bGU9IiBmaWxsOiMxRTg4RTU7IiBkPSJNIDMwIDMzLjY5OTIxOSBMIDMwIDIyIEMgMzAgMTcuNSAyOC42MDE1NjMgMTQuNjAxNTYzIDI2IDExLjgwMDc4MSBDIDI2LjY5OTIxOSAxMC4zMDA3ODEgMjcgOC42MDE1NjMgMjcgNyBDIDI3IDUuMTk5MjE5IDI2LjYwMTU2MyAzLjUgMjUuODk4NDM4IDIgTCAyMy4xOTkyMTkgMiBDIDI0LjMwMDc4MSAzLjM5ODQzOCAyNSA1LjEwMTU2MyAyNSA3IEMgMjUgMTAgMjIuODk4NDM4IDEyLjYwMTU2MyAyMi44OTg0MzggMTIuNjAxNTYzIEMgMjIuODk4NDM4IDEyLjYwMTU2MyAyOCAxNC44MDA3ODEgMjggMjIgTCAyOCAzMS42MDE1NjMgTCAyNC44OTg0MzggMzMuNjk5MjE5IEwgMjQgNDYgTCAyNiA0NiBMIDI2LjY5OTIxOSAzNS44OTg0MzggWiAiLz48cGF0aCBzdHlsZT0iIGZpbGw6IzY0QjVGNjsiIGQ9Ik0gMjkgNyBDIDI5IDkuMzAwNzgxIDI4LjMwMDc4MSAxMS4zMDA3ODEgMjguMzAwNzgxIDExLjMwMDc4MSBDIDI4LjMwMDc4MSAxMS4zMDA3ODEgMzIgMTUuNjAxNTYzIDMyIDIyIEwgMzIgMzUuMTAxNTYzIEwgMjguNjAxNTYzIDM3LjMwMDc4MSBMIDI4IDQ2IEwgMzAgNDYgTCAzMC41IDM4LjM5ODQzOCBMIDMzLjg5ODQzOCAzNi4wOTc2NTYgTCAzMy44OTg0MzggMjIgQyAzMy44OTg0MzggMTggMzIuNjk5MjE5IDE0LjE5OTIxOSAzMC4zOTg0MzggMTAuODk4NDM4IEMgMzAuODAwNzgxIDkuNjAxNTYzIDMxIDguMzAwNzgxIDMxIDcgQyAzMSA1LjMwMDc4MSAzMC42OTkyMTkgMy42MDE1NjMgMzAuMTk5MjE5IDIgTCAyOC4xMDE1NjMgMiBDIDI4LjY5OTIxOSAzLjYwMTU2MyAyOSA1LjE5OTIxOSAyOSA3IFogIi8+PHBhdGggc3R5bGU9IiBmaWxsOiNCQkRFRkI7IiBkPSJNIDMzIDcgQyAzMyA4LjE5OTIxOSAzMi44OTg0MzggOS4zOTg0MzggMzIuNjk5MjE5IDEwLjUgQyAzNC44MDA3ODEgMTQgMzYgMTcuODk4NDM4IDM2IDIyIEwgMzYgMzcuMTk5MjE5IEwgMzIuNSAzOS41IEwgMzIgNDYgTCAzNCA0NiBMIDM0LjM5ODQzOCA0MC42OTkyMTkgTCAzOCAzOC4zMDA3ODEgTCAzOCAyMiBDIDM4IDE3LjgwMDc4MSAzNi44OTg0MzggMTMuNjk5MjE5IDM0LjgwMDc4MSAxMC4xMDE1NjMgQyAzNC44OTg0MzggOS4xMDE1NjMgMzUgOCAzNSA3IEMgMzUgNS4zMDA3ODEgMzQuODAwNzgxIDMuNjAxNTYzIDM0LjM5ODQzOCAyIEwgMzIuMzAwNzgxIDIgQyAzMi44MDA3ODEgMy42MDE1NjMgMzMgNS4zMDA3ODEgMzMgNyBaICIvPjwvZz48L3N2Zz4=);
}

.button{
    font-size:20px;
    padding:5px;
    display:inline-block;
    border: 1px solid white;
    border-radius: 3px;
    cursor:pointer;

}

.button:hover{
    background-color:white;
    color:black;
}