@font-face {
	font-family: 'nintender';
	src: url("./ressources/Nintender (WIP).ttf");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'minecraft';
	src: url("ressources/Minecraft.ttf");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'press-start';
	src: url("ressources/PressStart2P.ttf");
	font-weight: normal;
	font-style: normal;
}

html{
	--mur-width:400px;
	--menu-width:300px;
	--mur-height:400px;
	--menu-height:400px;
	--line-height:calc(var(--grille-width) / 9);
	--case-width:calc(100% / 9);
	--border-width:3px;
	--font-size:20px;
}

.mur, .param, .menu-exec, .vanne{
	image-rendering: crisp-edges;
	image-rendering: -moz-crisp-edges;          /* Firefox */
	image-rendering: -o-crisp-edges;            /* Opera */
	image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming)*/
	-ms-interpolation-mode: nearest-neighbor;   /* IE (non-standard property) */
}

.mur{
	position:relative;
	display:block;
	box-sizing:content-box;
	width:var(--mur-width);
	height:var(--mur-height);
	margin:0 auto 0px auto;
	border:solid 1px black;
	overflow:hidden;
	/* background: linear-gradient(to bottom,  */
					/* #df6812 5%, */
					/* #e77e32 5% 11%, */
					/* #fca01b 11% 20%, */
					/* #f0a73e 20% 35%, */
					/* #edaf57 35% 55%, */
					/* #eeb666 55% 85%, */
					/* #f7cd90 85% */
					/* );
	*/
 	background: linear-gradient(to bottom,  
					#e77e32,
					/* #fca01b, */
					#f7cd90
					); 
}
.vannes{
	position:absolute;
	top:-45px;
	display:block;
	z-index:10;
}

.vanne{
	position:absolute;
	top:0;
	left:0;
	margin:0 0px 0 0;
	background:url('images/tuyau.png');
	background-size:100% 100%;
	padding:auto;
	cursor:pointer;
	
}

.vanne[open='true']:before{
	content:'.';
	color:transparent;
	background:url('images/green-light.png');
	background-repeat: no-repeat;
	background-size:contain;
	background-position: center; 
}
.vanne:not([open='true']):before{
	color:transparent;
	content:'.';
	background:url('images/red-light.png');
	background-repeat: no-repeat;
	background-size:contain;
	background-position: center; 
}

.vanne:before{
	display:block;
	position:relative;
	font-size:1em;
	top:10px;
	width:100%;
	padding:auto;
	/* text-align:center; */
	font-family:monospace;
	font-weight:bold;
	/* background-repeat: no-repeat; */
}

.filet{
	position:absolute;
	/* top:30px; */
	margin:0 2px;
	background-image:url('images/bottom-water.png');
	background-repeat:repeat-x;
	/* background-size:100% auto; */
	background-position:bottom;
}

.filet:before{
	display:block;
	content:".";
	color:transparent;
	width:100%;
	height:calc(100% - 5px);
	background-color:#0850b8;
}

.param{
	font-size:15px;
	margin:20px 10px 40px 10px;
	padding:15px 5px 5px 15px;
	background:url('images/pipe-horizontal.png');
	background-size:contain;
	background-repeat:repeat-x;
	
}

.param label{
	display:inline-block;
	/* width:170px; */
}

.param div{
	display:inline-block;
	/* margin:0 25px 0 0; */
}

.param+grille{
	margin:0px;
	align-items:start!important;
	/* margin-top:-80px; */
}

.param-input{
	font-family:minecraft;
	font-size:13px;
	padding:3px;
	margin:3px;
	background-color:#f0a73e;
}

.param-input, .mur{
	border-top:none;
	border-left:2px solid #df6812;
	border-bottom:2px solid #581a0c;
	border-right:2px solid #581a0c;
}

input{
	background-color:#eeb666;
	border:2px dotted #581a0c;
}

input:invalid {
  border: 2px dashed red;
}

/* input:valid { */
  /* border: 2px solid black; */
/* } */

.commands{
	position:relative;
	width:400px;
	height:var(--mur-height);
	background-color:#6d6e71;
	border-radius:10px;
	box-sizing:border-box;
	/* border:solid 10px #bdbec0; */
	border-top:solid 2px #6d6e71;
	border-left:solid 2px #6d6e71;
	border-right:solid 2px #242425;
	border-bottom:solid 2px #242425;
	background-size:100% 100%;
}
.commands::before{
	box-sizing:border-box;
	position:absolute;
	content:".";
	color:transparent;
	display:block;
	width:calc(100% - 40px);
	height:calc(100% - 60px);
	margin:40px 20px 20px 20px;
	/* top:10px; */
	border-radius:10px;
	background-color:#3a3a3c;
	
}

textarea{
	position:relative;
	top:40px;
	display:block;
	/* opacity:0.5; */
	background-color:#bdbec0;
	width:calc(100% - 80px);
	height:calc(100% - 73px);
	padding:5px;
	margin:auto;
}

.log:not(.error){
	display:none;
}

.log.error{
	display:block;
	width:90%;
	/* height:100px; */
	background-color:#FFAAAA;
	color:red;
	padding:15px;
	font-size:18px;
	font-family:monospace;
	border-radius: 20px;
	white-space:pre-line;
	white-space:pre;
	
}


input[type="submit"]{
	display:none;
}

button.start{
	font-family:nintender;
	color:#d00d20;
	font-size:13px;
	width:65px;
	height:25px;
	background-color:#939598;
	border-radius:5px;
	margin:3px;
	padding:0;
}

form button.start[type="submit"]{
	position:absolute;
	right:30px;
	top:17px;	
	cursor:pointer;
}

.char1{
	/* color:red; */
	font-weight:bold;
	background-color:#efaa8a;
	
}

.char2{
	/* color:red; */
	font-weight:bold;
	background-color:#555;
	
}