@charset "utf-8";
:root{
	--main-txt-clr:#2fc8ff;
	--main-txt-bg:#228eb5;
}


* {box-sizing: border-box;}
html,body{overflow-x: hidden;} /* For background extenders */

body{
	font-size:20px;
	background-color:#ff9129;
	font-family: 'Patrick Hand', cursive;
}

p,img,h1,h2,h3,h4,h5,h6{
	padding-left:10px;
	padding-right:10px;
}


/*      COLOR CODES       */
strong{
	
}
p{

}
h1,h2,h3{

}
a{

}
a:active{
	
}
body > header, body > section{ /* because t-main-wrapper is not directly under body */
/*	flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. In IE 10-11, flex items ignore their parent container’s height if it’s set via the min-height property. */	
}



/*      Styles      */


/* -------------- LP  ----------------- */


#lp_wrapper{
	width:100%;
	height:100vh;
	background-color:#ededed;
	background-image:url(../images/ep_naturalwhitewhite.png);
    background-repeat: repeat;
	color:var(--main-txt-clr);
	display:grid;

}
	#lp_center{
		width: 70vw;
		place-self:center;	
		text-align:center;
	}
		#lp_center h1{
			font-family: 'Caveat Brush', cursive;
			font-size:6em;
			margin:0;padding:0;
			text-shadow: 2px 2px var(--main-txt-bg);
			cursor:default;
		}
		#lp_center p{
			color:var(--main-txt-bg);
			font-size:1.4em;
			margin:0;
		}
		#lp_center a{
			display:inline-block;
			color:white;
			text-decoration:none;
			border-radius:5px;
			background-color:var(--main-txt-clr);
			padding:10px 20px;
			margin-top:20px;
			font-size:1.4em;
			box-shadow: 2px 2px var(--main-txt-bg);
			cursor:pointer;
		}

			#lp_center a:hover{
				background-color:var(--main-txt-bg);
			}
			#lp_center al:active{
				background-color:var(--main-txt-bg);
			}


/* -------------- DATA  ----------------- */


.nota_validate ul, .nota_error ul{
	list-style-type: '✘';
	color:crimson;
}
.nota_succes ul{
	list-style-type: '✔';
	color:green;
}
.nota ul{/*display:inline-block;*/ list-style-position: inside;padding:10px 5px;margin:0;}
.nota span{padding-left:10px;}
.nota li::marker{
	 font-weight: bold;
}


header{
	width:100%;
	background-color:#ededed;
	background-image:url(../images/ep_naturalwhitewhite.png);
    background-repeat: repeat;
	color:var(--main-txt-bg);
	text-align:center;
	padding-bottom:20px;
}
	header .t-main-wrapper{}

	header h1{
		font-family: 'Caveat Brush', cursive;
		font-size:5em;
		color:var(--main-txt-clr);
		margin:0;padding:0;
		text-shadow: 2px 2px var(--main-txt-bg);
		cursor:default;
	}
		.tiny{font-size:.2em;vertical-align:super;}
		
	.header-content label{
		display:inline-block;
		color:white;
		text-decoration:none;
		border-radius:5px;
		background-color:var(--main-txt-clr);
		padding:10px 20px;
		margin-top:20px;
		font-size:1.4em;
		box-shadow: 2px 2px var(--main-txt-bg);
		cursor:pointer;
	}
		.header-content label:hover{
			background-color:var(--main-txt-bg);
		}
		.header-content label:active{
			background-color:var(--main-txt-bg);
		}
		#chb-guess,#chb-guessfr{
			display:none;
		}
			#chb-guess:checked + .form,#chb-guessfr:checked + .form{
				max-height:850px;
			}
			/*#chb-guess:checked + .form > *{margin-top:0;}*/
	
	.form{
		overflow:hidden;
		max-height:0;
		transition:max-height 1s ease-in-out;
		padding-bottom:10px;
	}
		/*.form > * {margin-top:400px;transition:margin-top 1s ease-in-out;}*/

	.form .t-flex{
			gap:20px;
		}
		.form .t-flex > div{max-width:calc(50% - 10px);}
	
		.form label{display:block;margin-top:20px;}		
			.form > div > div > div > div:first-child label{margin-top:0;}
			
		.form input[type="text"]{
			padding:4px 5px;
			border-radius:5px;
			border:1px solid darkgrey;
			width:100%;
			max-width:250px;
		}
			.req{display:none;}
		.form input[type="hidden"]{
			display:none;
		}
		.form input[type="submit"]{
			overflow:visible;
			padding:10px 14px;
			margin-top:30px;
			margin-left:30px;
			margin-bottom:10px;
			font-family: 'Patrick Hand', cursive;
			font-size:1em;
			cursor:pointer;
			border:none;
			border-radius:5px;
			background-color:var(--main-txt-clr);
			box-shadow: 2px 2px var(--main-txt-bg);
			color:white;
	
		}
		.form input[type="submit"]:hover{
			background-color:var(--main-txt-bg);
		}
		.form input[type="submit"]:active{
			background-color:var(--main-txt-bg);
		}
		.form h4{margin-bottom:7px;}
		.form ul{list-style-type: none;}
		
		
					
		.range-wrap {
		  max-width:250px;
		  position: relative;
		  margin: 0 auto 3rem;
		  margin:30px 0 0 auto;
		}
		.range-wrap-left-align{margin:30px auto 0 0;}
		.range-wrap-right-align{margin:30px 0 0 auto;}
		.range {
		  width: 100%;
		  -webkit-appearance: none;
		}
			.range:focus{outline:none;}
			.range::-webkit-slider-runnable-track {
			  width: 100%;
			  height: 5px;
			  cursor: pointer;
			  animate: 0.2s;
			  box-shadow: 0px 0px 0px #000000;
			  background: var(--main-txt-clr);
			  border-radius: 1px;
			  border: 0px solid #000000;
			}
			.range::-webkit-slider-thumb {
			  box-shadow: 0px 0px 0px var(--main-txt-bg);
			  border: 1px solid var(--main-txt-bg);
			  height: 23px;
			  width: 14px;
			  border-radius: 18px;
			  background: var(--main-txt-clr);
			  cursor: pointer;
			  -webkit-appearance: none;
			  margin-top: -9.5px;
			}
			.range:focus::-webkit-slider-runnable-track {
			  background: var(--main-txt-clr);
			}
			.range::-moz-range-track {
			  width: 100%;
			  height: 5px;
			  cursor: pointer;
			  animate: 0.2s;
			  box-shadow: 0px 0px 0px #000000;
			  background: var(--main-txt-clr);
			  border-radius: 1px;
			  border: 0px solid #000000;
			}
			.range::-moz-range-thumb {
			  box-shadow: 0px 0px 0px var(--main-txt-bg);
			  border: 1px solid var(--main-txt-bg);
			  height: 23px;
			  width: 14px;
			  border-radius: 18px;
			  background: var(--main-txt-clr);
			  cursor: pointer;
			}
			.range::-ms-track {
			  width: 100%;
			  height: 5px;
			  cursor: pointer;
			  animate: 0.2s;
			  background: transparent;
			  border-color: transparent;
			  color: transparent;
			}
			.range::-ms-fill-lower {
			  background: var(--main-txt-clr);
			  border: 0px solid #000000;
			  border-radius: 2px;
			  box-shadow: 0px 0px 0px #000000;
			}
			.range::-ms-fill-upper {
			  background: var(--main-txt-clr);
			  border: 0px solid #000000;
			  border-radius: 2px;
			  box-shadow: 0px 0px 0px #000000;
			}
			.range::-ms-thumb {
			  margin-top: 1px;
			  box-shadow: 0px 0px 0px var(--main-txt-bg);
			  border: 1px solid var(--main-txt-bg);
			  height: 23px;
			  width: 14px;
			  border-radius: 18px;
			  background: var(--main-txt-clr);
			  cursor: pointer;
			}
			.range:focus::-ms-fill-lower {
			  background: var(--main-txt-clr);
			}
			.range:focus::-ms-fill-upper {
			  background: var(--main-txt-clr);
			}
	
		.bubble {
		  background: var(--main-txt-bg);
		  color: white;
		  padding: 4px 12px;
		  position: absolute;
		  border-radius: 4px;
		  left: 50%;
		  bottom:100%;
		  transform: translateX(-50%);
		  font-size:0.9rem;
		}
		.bubble::after {
		  content: "";
		  position: absolute;
		  width: 2px;
		  height: 4px;
		  background: var(--main-txt-bg);
		  bottom: -2px;
		  left: 50%;
		}




section{
	padding-top:50px;
	padding-bottom:50px;
	position:relative;
}
	#star-text{
		position:absolute;
		bottom:5px;
		left:10px;
		font-size:0.8em;
		color:#ededed;
	}
		#star-text span{
			color:var(--main-txt-bg);
			font-size:1.6em !important;
			line-height:10px;
			vertical-align:bottom;
			text-shadow: 1px 1px black;
		}

	.labels{
		display:flex;
		flex-wrap:wrap;
		gap:10px;
		justify-content:center;
	}
		.labels img:nth-child(2){display:none;}
	
		.d-5col{
			display:block;
			width:60px;
			flex:1;
			text-align:center;
			color:#ededed;
			flex-grow:0;
			cursor:pointer;
			border-bottom:5px dashed transparent;
			font-size:0.8em;
		}
		/*.t-main-wrapper .d-5col:nth-child(4){flex-grow: 1;flex-shrink: 0;}
			.t-main-wrapper .d-5col:nth-child(4) img{max-width:80px;}*/
			.d-5col img{
				width:60px;
			}
			.d-5col:hover img:nth-child(1){
				display:none;
			}			
			.d-5col:hover img:nth-child(2){
				display:block;
			}

		.d-6col{
			display:flex;
			align-items:center;
			flex-direction:column;
			width:60px;
			flex:1;
			text-align:center;
			color:#ededed;
			flex-grow:0;
			cursor:pointer;
			border-bottom:5px dashed transparent;
			font-size:0.9em;
		}
		/*.t-main-wrapper .d-6col:nth-child(4){flex-grow: 1;flex-shrink: 0;}
			.t-main-wrapper .d-6col:nth-child(4) img{max-width:80px;}*/
			.d-6col img{
				width:60px;
				margin:auto;
			}
			.d-6col:hover img:nth-child(1){
				display:none;
			}			
			.d-6col:hover img:nth-child(2){
				display:block;
			}



	.data-wrap{
		margin-top:20px;
		display:flex;

		/*justify-content:center;*/
	}
		input[type="radio"]{
			display:none;
		}
			.data{
				max-height:300px;
				overflow-x:hidden;
				overflow-y:auto;
				display:flex;
				justify-content:center;
				align-items:flex-start;
				flex-basis:100%;
				flex-grow:0.0001;
				flex-shrink:1;
				opacity:0;
				transition:opacity 1s ease-in-out, flex-shrink 1s ease-in-out;		
			}
			#cup:checked ~ .data-wrap #data-cup{overflow-x:auto;}
			
		table{
			overflow:hidden;
			border-spacing:0px 10px;
	
		
		}
		
		tr{
			background-color:#ededed;
			opacity:0.7;
		}
		
		td{padding:10px 20px;color:var(--main-txt-bg);white-space: nowrap;}
		tr td:nth-child(1){
			border-top-left-radius:10px;
			border-bottom-left-radius:10px;
		}
		tr td:nth-child(2){
			border-top-right-radius:10px;
			border-bottom-right-radius:10px;
		}	
		#data-cup table tr:first-child td{color:black;font-size:0.8em;}
		#data-cup tr td:nth-child(2){border-radius:0;}
		#data-cup tr td:nth-child(7),#data-cup tr th:nth-child(7){
			border-top-right-radius:10px;
			border-bottom-right-radius:10px;}
		#data-cup tr td{font-size:0.9em;padding:10px 5px;}
		#data-cup tr th{font-size:0.7em;padding-top:10px;padding-bottom:10px;}
			#data-cup tr th:nth-child(1){
				border-top-left-radius:10px;
				border-bottom-left-radius:10px;
				text-align:left;
				padding-left:10px;
			}
		
	#weight:checked ~ .labels #lbl-weight,
	#length:checked ~ .labels #lbl-length,
	#name:checked ~ .labels #lbl-name,
	#date:checked ~ .labels #lbl-date,
	#clock:checked ~ .labels #lbl-clock{
		
	}
	
	#weight:checked ~ .labels #lbl-weight img:nth-child(1),
	#length:checked ~ .labels #lbl-length img:nth-child(1),
	#name:checked ~ .labels #lbl-name img:nth-child(1),
	#date:checked ~ .labels #lbl-date img:nth-child(1),
	#clock:checked ~ .labels #lbl-clock img:nth-child(1),
	#cup:checked ~ .labels #lbl-cup img:nth-child(1){
		display:none;
	}
	
	#weight:checked ~ .labels #lbl-weight img:nth-child(2),
	#length:checked ~ .labels #lbl-length img:nth-child(2),
	#name:checked ~ .labels #lbl-name img:nth-child(2),
	#date:checked ~ .labels #lbl-date img:nth-child(2),
	#clock:checked ~ .labels #lbl-clock img:nth-child(2),
	#cup:checked ~ .labels #lbl-cup img:nth-child(2){
		display:block;
	}
	
	#weight:checked ~ .data-wrap #data-weight,
	#length:checked ~ .data-wrap #data-length,
	#name:checked ~ .data-wrap #data-name,
	#date:checked ~ .data-wrap #data-date,
	#clock:checked ~ .data-wrap #data-clock,
	#cup:checked ~ .data-wrap #data-cup{
		flex-grow: 1;flex-shrink: 0;opacity:1;
	}

@media screen and (min-width: 576px){
	header h1,	#lp_center h1{
		font-size:10em;
	}
		#lp_center a:first-child{margin-right:30px;}

	
		.form .t-flex{
			gap:40px;
			
		}
		
			#chb-guess:checked + .form,#chb-guessfr:checked + .form{
				max-height:650px;
			}
		
.d-5col{
	width:90px;
	font-size:1em;
}
	.d-5col img{
		width:70px;
	}
}


@media screen and (min-width : 700px){
.data{
	max-height:initial;
}
}