body {
  background-color: #DFD8CE;
  font-family:sans-serif;
  /*overflow: hidden;*/

  display: flex;
  justify-content: center;
  align-items: center;  

  --bodymargin : 20px;
  /*
  --wContent: calc(100vw - 2*var(--bodymargin));
  --hContent: calc(100vh - 2*var(--bodymargin));*/

  margin:0;
  padding:0;
  height:100vh;
  /*background:url(noise.svg);*/
}


  @font-face {
  font-family: 'Electroharmonix';
  src: url('electroharmonix.woff2') format('opentype');
  font-style: normal;
  font-weight: 200;
  }

  
.font-preload{
  font-family:"Electroharmonix" !important;
}

body,html{
-webkit-user-drag: none;
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;

}

#mycanvas2.hidden{
  display: none

}

.hidden{
  animation: fadeOut 0.5s ease-out;

}


@keyframes fadeOut {
  0% {

      opacity: 1;
  }


  100% {
  
      opacity: 0.25;
  }
}

#container
{
 /*display : inline-block;*/
 display:grid;
  
}

.loader-container {
  position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index:9999;

background-color: rgba(255,255,255,0.6);
font-family: font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
font-weight:600;
padding:0.5em 1.5em;
border-radius:50px;
font-size:0.875rem;
}


svg,canvas
{
  grid-column: 1/1;
  grid-row: 1/1;
  display: block;
  max-width: 90vw;
  height: auto;
  max-height:90vh;
  width: auto;

  /*order*/
 /* box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);*/
/* background-color: #eee;
  padding: 32px;*/
}

.shadow{
  box-shadow: 0 1px 6px rgb(0 0 0 / 6%), 4px 32px 32px rgb(0 0 0 / 16%), 8px 50px 64px rgb(0 0 0 / 35%);
}



@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


#signature{
  position:absolute;
  left:10px;
  bottom:10px;

  color:#000;
  writing-mode: vertical-rl;
 /* background-color: #fff;;*/
  font-family: 'electroharmonix';
}


#debug{
  position:fixed;
  left:20px;
  bottom:20px;
  background-color: #fff;
  color:#000;
  padding:10px;
  display: none;

}