/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-3x3-slide-puzzle-updated.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#outer {width:320px; margin:30px auto;
--pic: url(slide.jpg);
}
#slide {width:300px; height:300px; border:5px solid #000; position:relative; margin:20px auto 50px auto; background:#0003; overflow:hidden; border-radius:15px; box-shadow: 5px 5px 6px 0 #0008; z-index:1;}
#slide #back {display:block; position:absolute; left:0; top:0; opacity:0.3; z-index:-1; transition:1s; content: var(--pic); border-radius:10px; background:#fff;}
#slide div {width:100px; height:100px; position:absolute; top:0; left:0; transition:0.25s; border-radius:10px;}
#slide div span {display:block; width:98px; height:98px; position:absolute; left:0; top:0; background:#fff var(--pic); z-index:100; border-radius:8px; box-shadow: 0 0 6px 0 #0008 inset; border:1px solid #555;}
#slide div#b span {background-position:-100px 0;}
#slide div#c span {background-position:-200px 0;}
#slide div#d span {background-position:0px -100px;}
#slide div#e span {background-position:-100px -100px;}
#slide div#f span {background-position:-200px -100px;}
#slide div#g span {background-position:0px -200px;}
#slide div#h span {background-position:-100px -200px;}


#slide div input  {
	display:none; appearance: none; position:absolute; cursor:pointer; z-index:200;
	left: -4px;
	top: -2px;
    width: 230px;
    height: 100px;
    background: #0000;
	border-radius:0;
}

#slide div input:checked {display:none;}



#slide div:has(input[id*="1"]:checked) {top:0px; left:0px;}
#slide div:has(input[id*="2"]:checked) {top:0px; left:100px;}
#slide div:has(input[id*="3"]:checked) {top:0px; left:200px;}
#slide div:has(input[id*="4"]:checked) {top:100px; left:0px;}
#slide div:has(input[id*="5"]:checked) {top:100px; left:100px;}
#slide div:has(input[id*="6"]:checked) {top:100px; left:200px;}
#slide div:has(input[id*="7"]:checked) {top:200px; left:0px;}
#slide div:has(input[id*="8"]:checked) {top:200px; left:100px;}
#slide div:has(input[id*="9"]:checked) {top:200px; left:200px;}



#slide:not(:has([id*="1"]:checked)) #i {left:0px; top:0px;}
#slide:not(:has([id*="2"]:checked)) #i {left:100px; top:0px;}
#slide:not(:has([id*="3"]:checked)) #i {left:200px; top:0px;}
#slide:not(:has([id*="4"]:checked)) #i {left:0px; top:100px;}
#slide:not(:has([id*="5"]:checked)) #i {left:100px; top:100px;}
#slide:not(:has([id*="6"]:checked)) #i {left:200px; top:100px;}
#slide:not(:has([id*="7"]:checked)) #i {left:0px; top:200px;}
#slide:not(:has([id*="8"]:checked)) #i {left:100px; top:200px;}
#slide:not(:has([id*="9"]:checked)) #i {left:200px; top:200px;}

/* this does the calculations */
#slide:not(:has([id*="9"]:checked)) div:has([id*="8"]:checked)  [id*="9"],
#slide:not(:has([id*="9"]:checked)) div:has([id*="6"]:checked)  [id*="9"],

#slide:not(:has([id*="8"]:checked)) div:has([id*="5"]:checked)  [id*="8"],
#slide:not(:has([id*="8"]:checked)) div:has([id*="7"]:checked)  [id*="8"],
#slide:not(:has([id*="8"]:checked)) div:has([id*="9"]:checked)  [id*="8"],

#slide:not(:has([id*="7"]:checked)) div:has([id*="4"]:checked)  [id*="7"],
#slide:not(:has([id*="7"]:checked)) div:has([id*="8"]:checked)  [id*="7"],

#slide:not(:has([id*="6"]:checked)) div:has([id*="3"]:checked)  [id*="6"],
#slide:not(:has([id*="6"]:checked)) div:has([id*="5"]:checked)  [id*="6"],
#slide:not(:has([id*="6"]:checked)) div:has([id*="9"]:checked)  [id*="6"],

#slide:not(:has([id*="5"]:checked)) div:has([id*="2"]:checked)  [id*="5"],
#slide:not(:has([id*="5"]:checked)) div:has([id*="4"]:checked)  [id*="5"],
#slide:not(:has([id*="5"]:checked)) div:has([id*="6"]:checked)  [id*="5"],
#slide:not(:has([id*="5"]:checked)) div:has([id*="8"]:checked)  [id*="5"],

#slide:not(:has([id*="4"]:checked)) div:has([id*="1"]:checked)  [id*="4"],
#slide:not(:has([id*="4"]:checked)) div:has([id*="5"]:checked)  [id*="4"],
#slide:not(:has([id*="4"]:checked)) div:has([id*="7"]:checked)  [id*="4"],

#slide:not(:has([id*="3"]:checked)) div:has([id*="2"]:checked)  [id*="3"],
#slide:not(:has([id*="3"]:checked)) div:has([id*="6"]:checked)  [id*="3"],

#slide:not(:has([id*="2"]:checked)) div:has([id*="1"]:checked)  [id*="2"],
#slide:not(:has([id*="2"]:checked)) div:has([id*="3"]:checked)  [id*="2"],
#slide:not(:has([id*="2"]:checked)) div:has([id*="5"]:checked)  [id*="2"],

#slide:not(:has([id*="1"]:checked)) div:has([id*="2"]:checked)  [id*="1"],
#slide:not(:has([id*="1"]:checked)) div:has([id*="4"]:checked)  [id*="1"] {display:block;}

h2#solved {display:none; font:600 40px/80px 'Raleway', arial, sans-serif; color:#c00; text-align:center;}


h2#solved span {display:block; font:400 20px/30px 'Raleway', arial, sans-serif; color:#000; text-align:center;}
#slide:has(#a1:checked):has(#b2:checked):has(#c3:checked):has(#d4:checked):has(#e5:checked):has(#f6:checked):has(#g7:checked):has(#h8:checked) ~ h2#solved {display:block;}
#slide:has(#a1:checked):has(#b2:checked):has(#c3:checked):has(#d4:checked):has(#e5:checked):has(#f6:checked):has(#g7:checked):has(#h8:checked) #back {opacity:1; z-index:100;}

#slide input[type="reset"] {position:absolute; bottom:-60px; left:37%; width:240px; margin-left:-75px; font:600 25px/40px 'Raleway', arial, sans-serif; color:gold; background:#c00; border:none; border-radius:8px;}
#slide:has(#a1:checked):has(#b2:checked):has(#c3:checked):has(#d4:checked):has(#e5:checked):has(#f6:checked):has(#g7:checked):has(#h8:checked) {overflow:visible;}

#outer:has(#pic1:checked) {--pic: url(slide5.jpg);}
#outer:has(#pic2:checked) {--pic: url(slide6.jpg);}
#outer:has(#pic3:checked) {--pic: url(slide4.jpg);}
#outer:has(#pic4:checked) {--pic: url(slide7.jpg);}

#outer input[name="choice"] {
	appearance: none; cursor:pointer;
    width: 60px;
    height: 60px;
	border:3px solid #000;
	border-radius:8px;
	padding:0; margin:8px;
	box-shadow: 3px 3px 4px 0 #0008;
	}
#outer #pic1 {background: url(slide5.jpg); background-size:contain;}
#outer #pic2 {background: url(slide6.jpg); background-size:contain;}
#outer #pic3 {background: url(slide4.jpg); background-size:contain;}
#outer #pic4 {background: url(slide7.jpg); background-size:contain;}

#slide div:has(input[id*="1"]:checked) {top:0px; left:0px;}