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;
  
  }




  .container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	font-family: "PixelFont", sans-serif; /* Replace "PixelFont" with the desired pixel font */
  }
  
  .menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column; /* Adjusts the menu to be vertical */
	align-items: center;
  }
  
  .menu li {
	margin: 10px 0; /* Adds vertical spacing between menu items */
  }
  
  .menu li a {
	text-decoration: none;
	color: #000;
	padding: 8px 16px;
	border: 1px solid #000;
	border-radius: 4px;
	font-size: 12px; /* Adjust the font size to your preference */
  }
  
  .menu li a:hover {
	background-color: #000;
	color: #fff;
  }