*
{
user-drag: none; 
-webkit-user-drag:none;
user-select: none;
touch-action: none;
overscroll-behavior: none;
box-sizing:border-box;
}

html, body
{

}

#svgCanvas
{
width:100vw;
height:100vw;
background:#000000;
display:block;
}

#canvasControls
{
display:flex;
}

#tutorial
{
display:flex;
flex-grow:1;
justify-content:center;
font-size:20px;
line-height:24px;
}

#tutorial svg
{
margin-top:-0.2em;
}

#erase, #send
{
text-align:center;
font-size:12px;
}

#markerEraser, #sendDrawing
{
width:64px;
height:64px;
line-height:48px;
text-align:center;
border-radius:50%;
padding:16px;
overflow:hidden;
margin:0 15px;
}

#markerEraser svg, #sendDrawing svg
{
width:32px;
height:32px;
display:block;
}

#markerEraser svg path, #sendDrawing svg path
{
fill:#ffffff;
}


#sendDrawing:not(.sending) #sentIcon
{
display:none;
}

#sendDrawing.sending #sendIcon
{
display:none;
}


#sentIcon
{
animation: 0.3s linear infinite pulse;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.25);
  }
  
  100% {
    transform: scale(1);
  }
}



#markerEraser
{
background:#aa0000;
left:4px;
}

#sendDrawing
{
right:4px;
background:#00aa00;
}