html,body,div,form,fieldset,label,input,span,p,ul,li,img,a,strong,small {
	margin:0;
	padding:0;
}

body,input {
	font-family:'Mouse Memoirs';
	font-weight: normal;
	font-size:20px;
	color:#ffffff;
}

body {
	background: url(../images/bg_1920.jpg) no-repeat center center fixed #000000;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	text-align: center;
	 letter-spacing: 0.1em;


  width: 100vw;
  height: 100vh;

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

  overflow-x: hidden;
  background-color: rgb(0,0,0);

  transition: all 1s;
  /*font-family: "Playwrite IN", serif;
  font-optical-sizing: auto;*/

}

.grid { margin:0px; padding: 0px 0px 0px 0px; width:100%; min-width: 320px; min-height:100%; }
.g1440 { margin:0; max-width:1440px; width:100%; }
.row { width:100%; margin:0 auto; }
.c1 { width:8.33333333%; }
	.c2 { width:16.66666666%; }
	.c3 { width:25.0%; }
	.c4 { width:33.33333333%; }
	.c5 { width:41.66666666%; }
	.c6 { width:50.0%; }
	.c7 { width:58.33333333%; }
	.c8 { width:66.66666666%; }
	.c9 { width:75.0%; }
	.c10 { width:83.33333333%; }
	.c11 { width:91.66666666%; }
	.c12 { width:100%; min-height:1px; float:left; position:relative; }
	.c1-5 { width:20%; }
	.c1-8 { width:12.5%; }
	.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c1-5,.c1-8 { min-height:1px; float:left; padding-left:0px; padding-right:0px; position:relative; }
	.c1.first,.c2.first,.c3.first,.c4.first,.c5.first,.c6.first,.c7.first,.c8.first,.c9.first,.c10.first,.c11.first,.c1-5.first,.c1-8.first { padding-left: 0; position:relative; }
	.c1.last,.c2.last,.c3.last,.c4.last,.c5.last,.c6.last,.c7.last,.c8.last,.c9.last,.c10.last,.c11.last,.c1-5.last,.c1-8.last { padding-right: 0; position:relative; }
	.demo { background-color: aqua; }
	.centered { float: none; margin: auto; }

	a,a:link,a:active,a:visited,a:hover { color:#0000ff; text-decoration:none; }

	._tt img { width: 100%; height: auto; max-width: 400px; }
	._inst { width: 100%; text-align: center; }
	._inst h1 { width: 100%; text-align: center; font-size: 32px; line-height: 26px; font-weight: 500; line-height:1.2em; letter-spacing: 0.03em; color:#ffd800; text-shadow: -1px -1px 0 #cb0000, 1px -1px 0 #cb0000, -1px 1px 0 #cb0000, 1px 1px 0 #cb0000, -2px 0px 0 #cb0000, 2px 0px 0 #cb0000, 0px -2px 0 #cb0000, 0px 2px 0 #cb0000; }
	._inst p { width: 100%; text-align: center; font-size: 26px; line-height: 30px; color: #000000; text-shadow: 1px 1px 6px #ffffff;}

	button { margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; width: 100%; max-width: 400px; text-align: center; font-family:'Mouse Memoirs'; font-weight: 500; font-size: 24px; letter-spacing: 0.05em; line-height: 24px; color: #ffd800; background-color: #cb0000; border: 2px solid #ffd800; border-radius:10px; cursor: pointer; }
	button:hover { color: #cb0000; background-color: #ffd800; border: 2px solid #cb0000; }

	#div_config { display: none; position: absolute; top: 20px; left: 0; right: 0; margin: 0px auto 20px auto; padding: 40px 10px 20px 10px; width: 100%; max-width: 650px; background: rgba(0,0,0,0.8); border-radius:10px; z-index: 999; }
	#btn_close, #btn_peview { position: absolute; top:20px; right: 20px; width:30px; height:30px; cursor: pointer; }
	#btn_peview { top:60px; height:auto; cursor:help; }
	#btn_close img { width:100%; height:auto; }
	#div_config form p { margin: 30px 0px 20px 0px; width: 100%; text-align: center; font-size: 20px; line-height: 20px; color: #ffffff; text-shadow: 1px 1px 6px #000000; }

	#ok_play { position: absolute; top:0px; left: 0; right: 0; margin: auto; padding: 20px; width: 100%; max-width: 650px; border: 6px solid rgba(255,255,255,0.5); border-radius:10px; z-index: 999;
		text-align: center; color: #ffffff; font-optical-sizing: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
  
	background: url(../images/bg_1920.jpg) no-repeat center center fixed #000000;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	}

	#_preview { display: none; position: absolute; margin: auto; padding: 0px; width:300px; height:300px; border: 10px solid rgba(255,255,255,0.5); border-radius:10px; z-index: 9999;
	top: 50%; left: 50%; transform: translate(-50%,-50%); }
	
	#_ab { position: absolute; right:10px; bottom:10px; margin: auto; padding: 0px; font-size: 6px; z-index: 9999999; }

	/* The container must be positioned relative: */
	.txt_select { position: relative; margin: 10px auto;  width: 100%; max-width: 400px; height: 40px; font-family: 'Mouse Memoirs'; font-weight: 700; color: #ffffff; text-shadow: 0px 0px 8px #666666; background-color: #03037b; border-radius:10px; }
	.txt_select select { display: none; /*hide original SELECT element: */ }

	.select-selected { background-color: #0000ff; height: 20px; }

	/* Style the arrow inside the select element: */
	.select-selected:after { position: absolute; content: ""; top: 15px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #ffffff transparent transparent transparent; }

	/* Point the arrow upwards when the select box is open (active): */
	.select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; }

/* style the items (options), including the selected item: */
.select-items div, .select-selected {
 color: #ffffff;
 padding: 4px 16px 10px 16px;
 border: 1px solid transparent;
 border-color: transparent transparent rgba(0, 0, 0, 0.0) transparent;
 cursor: pointer;
 border-radius:10px;
}

/* Style items (options): */
.select-items {
 position: absolute;
 background-color: #1e90ff;
 top: 100%;
 left: 0;
 right: 0;
 z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
 display: none;
}

.select-items div:hover, .same-as-selected {
 background-color: rgba(0, 0, 0, 0.1);
}


input[type=radio] { display:none; }

input#th_0[type=radio] + label { background-image: url("../images/th_0.jpg"); }
input#th_1[type=radio] + label { background-image: url("../images/th_1.jpg"); }
input#th_2[type=radio] + label { background-image: url("../images/th_2.jpg"); }
input#th_3[type=radio] + label { background-image: url("../images/th_3.jpg"); }
input#th_4[type=radio] + label { background-image: url("../images/th_4.jpg"); }
input#th_5[type=radio] + label { background-image: url("../images/th_5.jpg"); }
input#th_6[type=radio] + label { background-image: url("../images/th_6.jpg"); }
input#th_7[type=radio] + label { background-image: url("../images/th_7.jpg"); }
input#th_8[type=radio] + label { background-image: url("../images/th_8.jpg"); }
/*input#th_9[type=radio] + label { background-image: url("../images/th_9.jpg"); }
input#th_10[type=radio] + label { background-image: url("../images/th_10.jpg"); }
input#th_11[type=radio] + label { background-image: url("../images/th_11.jpg"); }
input#th_12[type=radio] + label { background-image: url("../images/th_12.jpg"); }
input#th_13[type=radio] + label { background-image: url("../images/th_13.jpg"); }
input#th_14[type=radio] + label { background-image: url("../images/th_14.jpg"); }
input#th_15[type=radio] + label { background-image: url("../images/th_15.jpg"); }
input#th_16[type=radio] + label { background-image: url("../images/th_16.jpg"); }*/

input#th_0[type=radio] + label, input#th_1[type=radio] + label, input#th_2[type=radio] + label, input#th_3[type=radio] + label, input#th_4[type=radio] + label, input#th_5[type=radio] + label, input#th_6[type=radio] + label, input#th_7[type=radio] + label, input#th_8[type=radio] + label, input#th_9[type=radio] + label, input#th_10[type=radio] + label, input#th_11[type=radio] + label, input#th_12[type=radio] + label, input#th_13[type=radio] + label, input#th_14[type=radio] + label, input#th_15[type=radio] + label, input#th_16[type=radio] + label { display:inline-block; margin: 1px; padding: 0px; width: 200px; height: 200px; border: 2px solid #000000; cursor:pointer;  background-size: cover; }

input#th_0[type=radio]:checked + label, input#th_1[type=radio]:checked + label, input#th_2[type=radio]:checked + label, input#th_3[type=radio]:checked + label, input#th_4[type=radio]:checked + label, input#th_5[type=radio]:checked + label, input#th_6[type=radio]:checked + label, input#th_7[type=radio]:checked + label, input#th_8[type=radio]:checked + label, input#th_9[type=radio]:checked + label, input#th_10[type=radio]:checked + label, input#th_11[type=radio]:checked + label, input#th_12[type=radio]:checked + label, input#th_13[type=radio]:checked + label, input#th_14[type=radio]:checked + label, input#th_15[type=radio]:checked + label, input#th_16[type=radio]:checked + label { border: 2px solid #0000ff; }




	#content { display: none; position: relative; margin: 30px auto 40px auto; padding: 10px; width: 90%; /* max-width: 620px; */ background: rgba(0,0,0,0.6); border: 0px solid #000000; border-radius: 10px; }
	#puz1_alert { display: none; position:absolute; top:250px; left: 0; right: 0; margin: 0px auto; padding:20px; width: 80%;  background-color: #0000ff; border:1px solid #0000ff; border-radius: 10px; z-index: 999;}
	#puz1_alert h1 { width: 100%; text-align: center; font-size: 26px; line-height: 26px; color: #ffffff; /*text-shadow: 1px 1px 6px #000000;*/ }
	#puz1_alert h1 { width: 100%; text-align: center; font-size: 26px; line-height: 26px; color: #ffffff; /*text-shadow: 1px 1px 6px #000000;*/ }
	#puz1_alert p { width: 100%; text-align: center; font-size: 20px; line-height: 20px; color: #000000; /*text-shadow: 1px 1px 6px #ff6600;*/  }

	#puz1_inst { width: 100%; text-align: center; font-size: 14px; line-height: 20px; color: #999999; }





#container {
  position: relative;
  width: fit-content;
  height: fit-content;

  display: grid;
  /*grid-template-columns: repeat(6, 1fr);
  border: 6px double rgb(255, 145, 0);*/
}

#title {
  color: white;
  transform: rotateZ(-90deg);
  
  margin-left: -20%;
  margin-right: -15%;
  
  width: 40%;
  height: 15%;

  display: flex;
  justify-content: center;
  align-items: end;
  font-size: 16px;
}

.gradient-border {
  --borderWidth: 10px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


@media (max-width: 1200px) {
  #title {
    margin-right: -12%;
    font-size: 14px;
  }
}

@media (max-width: 1000px) {
  #title {
    margin-right: -12%;
    font-size: 12px;
  }
}

@media (max-width: 800px) {
  #title {
    margin-right: -10%;
    font-size: 10px;
  }
}

@media (max-width: 500px) {
  #title {
    margin-right: -10%;
    font-size: 8px;
  }
}


.piece {
  /*width: 15vh;*/
  aspect-ratio: 1 / 1;
  background-size: 100%;

  transition: 1s all;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top {
  width: 60%;
  height: 15%;
  top: 0%;
  border-radius: 0 0 10px 10px;

  background-image: url("up.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30%;
}

.botm {
  width: 60%;
  height: 15%;
  bottom: 0%;
  border-radius: 10px 10px 0 0;

  background-image: url("down.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30%;
}

.left {
  width: 15%;
  height: 60%;
  left: 0%;
  border-radius: 0 10px 10px 0 ;

  background-image: url("left.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 120%;
}

.right {
  width: 15%;
  height: 60%;
  right: 0%;
  border-radius: 10px 0 0 10px;

  background-image: url("right.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 120%;
}

.side {
  transition: all 0.5s;
  position: absolute;
  background-color: rgba(251,232,204,0.8) /* white*/;
  opacity: 0%;
}

.side:hover {

  cursor: pointer;
  opacity: 65%;

}

.center {
  width: 40%;
  height: 40%;

  transition: all 0.5s;

  background-image: url("rotate.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;

  background-color: rgba(251,232,204,0.8) /* white*/;
  opacity: 0%;
  border-radius: 50%;
}

.center:hover {
  cursor: pointer;
  opacity: 65%;
}

#rotateBody {
  margin-right: 2%;
  animation: blinkBack 2s infinite;
  transform: scale(1.2);
  position: relative;
}

#rotateBody::before{
  /*content: "(click me)";*/
  position: absolute;
  font-size: 0.4em;
  bottom: -20%;
  left: 22%;

}

#rotateBody:hover {
  cursor: pointer;
}

@keyframes blinkBack {
  0% {
    color: white;
  }
  50% {
    color: rgb(255, 145, 0);
  }
  100% {
    color: white;
  }
}


















	/* Parent element that contains puzzle game */
	.puzelm {
	position:relative;
	margin:1px auto;
	padding:1px;
	text-align:center;
	}

	/* Canvas with puzzle */
	.puzcnv {
	display:block;
	margin:2px auto 29px auto;
	}

	/* Mini-image that shows original image */
	.puzimg {
	position:absolute;
	left:15px;
	right:0;
	left:0;
	bottom:0;
	margin:0 auto 0 2px;
	width:72px;
	height:56px;
	cursor: nesw-resize;
	border:1px solid #0000ff;
	}
	.puzimg:hover {
	width:450px;
	height:auto;
	background:#fff;
	border:1px solid #0000ff;
	}

	/* Button that auto-solves the puzzle */
	.puzsolve { display:block; margin: 5px 0px 5px auto; padding: 5px; width: 100%; max-width: 250px; text-align: center; font-family:'Mouse Memoirs'; font-weight: 400; font-size: 20px; line-height: 20px; color: #ffffff; text-shadow: 0px 0px 8px #666666; background-color: #0000ff; border: 2px solid #03037b; cursor: pointer; }



		@media only screen and (max-width: 1440px) {
			body { background: url(../images/bg_1440.jpg) no-repeat center center fixed #000000; }
		}

		@media only screen and (max-width: 1024px) {
			body { background: url(../images/bg_1024.jpg) no-repeat center center fixed #000000; }
		}

		@media only screen and (max-width: 800px) and (orientation:portrait) {
			body { background: url(../images/bg_800_p.jpg) no-repeat center center fixed #000000; }
		}

		@media only screen and (max-width: 800px) and (orientation:landscape) {
			body { background: url(../images/bg_800_l.jpg) no-repeat center center fixed #000000; }
		}

		@media only screen and (max-width: 650px) {
			._inst { width: 90%; }
			._inst h1 { width: 100%; text-align: center; font-size: 26px; line-height: 26px; color: #ffffff; text-shadow: 1px 1px 6px #000000; }
			._inst p { width: 100%; text-align: center; font-size: 20px; line-height: 24px; color: #0000ff; text-shadow: 1px 1px 6px #000000;  }

			button { width: 90%; }

		}