/* Color and fonts */
@font-face {
    font-family: 'Arial Black';
    src: url('fonts/arial-black.ttf');
}
	body{
		/*font-family:'Open Sans', sans-serif;*/
		/*font-family:'Gayathri', sans-serif;*/
		/*font-family:'PT Sans', sans-serif;*/
		/*font-family:'Quicksand', sans-serif;*/
		font-family: "Arial";
		--backgroundcolor:#303530;/*mediumseagreen*/
		--fontcolor:white; 
		--figcolor:#669999;/**/
		--dirichlet:#999900;
		--meshcolor:red;
		background-color:var(--backgroundcolor);
		color:var(--fontcolor);}
	#slides>section {font-size:calc(6 * 0.7vw);}
	.Huge {font-size:calc(36 * 0.7vw);}
	.big{font-size:calc(10 * 0.7vw);}
	.normal{font-size:calc(6 * 0.7vw);}
	.small {font-size:calc(4 * 0.7vw);}
	.tiny {font-size:calc(3 * 0.7vw);}
/* section */
	#colors {
		background-color: var(--figcolor);
		color:var(--meshcolor);

	}
	section {
		text-align:center;
	}
	
	.middle	
		{top: 50%; transform: translateY(-50%); position:absolute;}
	.center	
		{left:50%; transform: translateX(-50%); position:absolute;}
	.middle.center	
		{top: 50%; left:50%;transform: translate(-50%,-50%); position:absolute;}
	.middle.right	
		{top: 50%; right:0%;transform: translate(0%,-50%); position:absolute;}
	
	.centerText
	{display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;}
	.middle.center.null	
		{top: 50%; left:50%;transform: translate(-50%,-50%) scale(0); position:absolute;}
	.null {
		transform:scale(0);
	}
	.boxed {
		background-color:var(--backgroundcolor);
		padding:0.5em;
		border:calc(2 / 680 * 100vw) var(--fontcolor) solid;
		border-radius:0.5em;
	}
	.hidden {
		opacity:0;
	}
	.full {
		width:100%;
	}
	.removed {
		display:none !important; 
	}
	.red {
		color:red;
	}
	.darkblue {
		color:darkblue;
	}
	.blue {
		color:blue;
	}
	.green {
		color:green;
	}
	.bottom{
		transform:translateY(100vh);
	}
	.blur {
		filter:blur(3px);
	}
/* misc */
	#logo {
		position:fixed; width:10vw; top:0;right:0; margin:calc( 30 / 140 * 10vw);
		z-index:1000;
	}
	#foot {
		position:fixed; bottom:0;
		font-size:calc(3 * 0.7vw);
		margin:1em;
		z-index:1000;
	}
	#foot sup {
		font-size:calc(1.5 0.7vw);
	}
	#Metti {
		font-family:'Arial Black';
		color:#2F5496;
	}
	#slides {
		counter-reset:page;
	}
	#slides section::after {
		counter-increment:page;
		position:absolute; bottom:0;right:0;
		font-size:calc(3 * 0.7vw);
		margin:calc(3 * 0.7vw);
		content:counter(page);
	}
	body.navigate #slides section::after {
		font-size:calc(50 / 680 * 100vw);
		z-index:100;
		background-color:var(--backgroundcolor);
		padding:0.25em;
		border: calc(4 / 680 * 100vw) white solid;
	}
	.BC {
		 position:absolute;
		 pointer-events: none;
		 transform:translateX(calc(-100vh * 20 / 680));
	}
	.domain {
		border:calc(1 / 680 * 100vw) solid white;
	}
	.hyperzoom {
		transform: scale(10);
	}
	.mesh {fill:var(--figcolor);stroke:var(--meshcolor); stroke-width:0;  stroke-linejoin:round;}
	.showmesh {stroke-width:1;}
	ol {
	    padding-inline-start: 1.5em;
	    text-align: left;
	}
    .mediumseagreen {
    	color:mediumseagreen;
    }
    .gold {
    	color:gold;
    }
    .aqua {
    	color:aqua;
    }
    #Grid1 {
    	--epsilon:0.005;
    }
	#Grid1.zoomGrid {
		--epsilon:0.125;
		
		/*transform:scale(30);*/
	}
	#Cell {
		--epsilon:0.125;
		width:calc(var(--epsilon) * 200vw);
		transform: translate(50%,50%);
	}
	#CellContainer.translate {
		transform:translate(calc(-50vw + 1em),calc(-0.125 * 100vw));
	}
	#CellLegend {
		--epsilon:0.125;
		position:absolute;
		bottom:calc(50vh + var(--epsilon) * 100vw + 0.5em); 
		left:calc(1em + var(--epsilon) * 100vw);
		transform:translateX(-50%);
	}
	.periodic-Background img{
					position:absolute;
					--nx:0;
					--ny:0;
					left:calc(var(--nx) * (245 / 680) * 60vw);
					top:calc(var(--ny) * (245 / 680) * 60vw);
					width:calc(300 / 680 * 60vw);
	}
	.rotunit {
			transform:rotate(30deg);
		}
	#Th {
		--n:0;
	}
	#help {
		position:absolute;font-size:calc(2 * 0.7vw);
		padding:1em;
		margin:1em;
		border:0.1em solid;
		border-radius:1em;
		width:30em;
		z-index:10000;
		background-color:var(--backgroundcolor);

	}
	a, a:visited {
		color:var(--fontcolor);
		text-decoration:none;
	}