body {
  background-color: #555;
  font-family:sans-serif;
  --bodymargin : 10px;
  padding:var(--bodymargin);
  margin:0;
}

#stencil,#mask
{
  display:inline-block;
}
#stencil canvas,#mask canvas
{
  max-width : 200px;
}
#outputImage
{
  text-align: center;
}
#outputImage canvas
{
  max-width: calc(100vw - 2*var(--bodymargin));
  max-height:calc(100vh - 2*var(--bodymargin));
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .2);

}
h4
{
  font-size: 12px;
}
#logContainer
{
  position:absolute;
  top:0; left:0;
  z-index:1;
  background-color:rgba(255,255,255,0.6);
  font-size:10px;
  max-width: 420px;
}
#ARTWORK
{
  position:relative;
  top:0;
  left:0;
}
a.btnSVG
{ position:absolute;
  z-index: 1;
  bottom : 8px;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  display: inline-block;
  line-height:20px;
  padding: 4px;
  color : black;
  text-decoration:none;
  cursor:pointer;
  width:fit-content;
  background : rgba(106,158,44,0.3);
  border-radius: 10px;
}
a.btnSVG:hover
{
  background : rgba(255,255,255,0.9);

}