/*@font-face {
  font-family: 'Open Sans';
  src: url('https://cdn.glitch.global/72e3c3dc-3d13-4d00-bd9c-92bb0f63325b/opensans?v=1651679325518') format('woff2');
}*/

body, html {
  margin: 0;
  font-family: monospace;
}

body, #canvas-container {
  display: flex;
  flex-direction: row;
/*  justify-content: stretch;*/
/*  align-content: stretch;  */
  background-image: linear-gradient(90deg, #fccdcd 10%, #fff 600px);  
}
body{
  overflow: hidden;
  padding: 50 0 0 0;
}



#canvas-container, #svg-container {
/*  background: radial-gradient(ellipse at center, #FFFFFF, #ECFFF1);*/
  height: initial !important;
    margin-top: 50px;
      position: relative;
    #label {
      position: absolute;
      bottom: 50px; 
      z-index: 2;
      left: 0;
      right: 0;
      margin: 0;
      text-align: center;
    }
}

canvas {
  aspect-ratio: initial;
  margin-top: 0 !important;
}
canvas[resize] {
    width: 100%;
    height: 100%;
}

text {
  font-size: 6px;
}

.noDisplay {
  display: none;
}

path.toColor {
/*   stroke: #D254A5; */
  fill: transparent;
/*  stroke: #000;*/
/*  stroke: url(#line-gradient);*/
}

circle {
  fill: transparent;
}

circle.toColor {
/*  fill: url(#berryGradient);*/
  fill: #3a112c;
}


.tp-dfwv {
  top: 60px !important;
  border: 0.5px solid #333;
  position: initial;
  z-index: 2;
}