:root{--iDex:calc(1vw + 1vh);--itemT:cubic-bezier(.1,.7,0,1)}

.infoT:after,.close-box:after,.item::before,.item::after{content:''}
html,body,.cil,.panes,.item,.item::before,.item::after,.panes .item:hover,.panes .item:hover + *,.panes .item:hover + * + *,.panes .item:hover + * + * + *,.panes .item:hover + * + * + * + *,.panes .item:has( + :hover),.panes .item:has( + * + :hover),.panes .item:has( + * + * + :hover),.panes .item:has( + * + * + * + :hover),.panes .item:active,.panes .item:focus{
	-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}

.infoC,.infoT{pointer-events:var(--pE)}
html,body,.infoC p,.cil,.panes,.item,.item::before,.item::after,.panes .item:hover,.panes .item:hover + *,.panes .item:hover + * + *,.panes .item:hover + * + * + *,.panes .item:hover + * + * + * + *,.panes .item:has( + :hover),.panes .item:has( + * + :hover),.panes .item:has( + * + * + :hover),.panes .item:has( + * + * + * + :hover),.panes .item:active,.panes .item:focus{
	margin:0;padding:0}
body{overflow:hidden}
.panel{overflow:visible}
.infoW,.infoBu{display:block}
.comic,.cil,.panes{display:flex}
.panel{display:inline-block}
#body,.infoC,.infoT:after,.infoBu,.comic,.text,.cil,.item::before,.item::after{position:absolute}
.infoT,.infoW,.panel{position:relative}
.panes{-webkit-perspective:var(--per);-moz-perspective:var(--per);-ms-perspective:var(--per);-o-perspective:var(--per);perspective:var(--per)}
.panel{background:var(--bkI)}
.panes .item:hover,.panes .item:hover + *,.panes .item:hover + * + *,.panes .item:hover + * + * + *,.panes .item:hover + * + * + * + *,.panes .item:has( + :hover),.panes .item:has( + * + :hover),.panes .item:has( + * + * + :hover),.panes .item:has( + * + * + * + :hover),.panes .item:active, .panes .item:focus{
	filter:inherit}
.infoT,.infoT:after,.infoC.show .infoT,.infoW,.infoC.show .infoW,.comic,.panel,.top-left,.top-right,.bottom-right,
	.cil,.item,.panes .item,.panes .item:hover + *,.panes .item:hover + * + *,.panes .item:hover + * + * + *,
	.panes .item:hover + * + * + * + *,.panes .item:has( + :hover),.panes .item:has( + * + :hover),
	.panes .item:has( + * + * + :hover),.panes .item:has( + * + * + * + :hover),.panes .item:active,
	.panes .item:focus,.item div{-webkit-transform:var(--nLab);-moz-transform:var(--nLab);-ms-transform:var(--nLab);-o-transform:var(--nLab);transform:var(--nLab)}
.infoT,.infoW,.panel,.item{-webkit-transition:var(--tran);-moz-transition:var(--tran);-o-transition:var(--tran);transition:var(--tran)}

body{background:#000;width:100vw;font-family:'Courier New',Courier,monospace}
#body{width:100vw;heigth:100vh}
.infoC{--pE:none;width:90vw;z-index:3}
.infoT{--pE:all;--nLab:translate3d(0,94vh,0)translateZ(0);--tran:transform 1s,opacity 2s;background:#fff;width:20vw;padding:.75vw;border-radius:2vw;text-align:center;z-index:12}
.infoT:after{--nLab:translate3d(-50%,-200%,0)scaleY(-1)translateZ(0);left:50%;bottom:-.833vw;width:0;height:0;border-left:1.66vw solid transparent;border-right:1.66vw solid transparent;border-top:1.66vw solid #fff;z-index:10}
.infoT p{text-decoration:underline;font-weight:600}
.infoW{--nLab:translate3d(5vw,100vh,0)translateZ(0);--tran:transform .75s ease-in-out;top:-.833vw;width:90vw;height:auto;transform-origin:bottom;color:#fff;z-index:11}
.infoCo{width:60vw;margin:auto;padding-top:2.25vw;padding-left:1.25vw;padding-right:1.25vw}
.infoBu,.panel,.infoC.show .infoT{opacity:0}
.infoBu{max-width:fit-content;right:2.5vw;color:#fff;font-size:1.66vw;font-weight:bold;text-align:right}
.interaction{cursor:pointer}
.infoC.show{--pE:all}
.infoC.show .infoT{--pE:none;--nLab:translate3d(0,110vh,0)translateZ(0);--tran:transform 1s,opacity .5s}
.infoC.show .infoW{--nLab:translate3d(5vw,0,0)translateZ(0)}
.infoC.show .infoBu{opacity:1}

.comic{--nLab:translate3d(-16vw,-12.75vw,0)translateZ(0);flex-wrap:wrap;top:0;width:90vw;padding:1vw;font-family:'Comic Sans',cursive;z-index:-1}
.panel{--nLab:translate3d(0,calc(var(--iDex)*16),0)translateZ(0)scale(var(--flipp,1),1);--tran:opacity .5s var(--tDel);flex:1 1;margin:1vmin;border:solid .166vw #000;height:10vw;box-shadow:0 0 .166vw .25vw #fff;opacity:0;z-index:auto}
.panel:nth-child(1),.panel:nth-child(8){flex-basis:33.333vw}
.panel:nth-child(2),.panel:nth-child(3),.panel:nth-child(4),.panel:nth-child(5),.panel:nth-child(6),.panel:nth-child(7),.panel:nth-child(9){flex-basis:16.667vw}
.panel:nth-child(4),.panel:nth-child(8){--flipp:-1}
.panel:nth-child(1){--bkI:radial-gradient(circle,#c29300,purple)}
.panel:nth-child(2){--bkI:radial-gradient(circle,orange,#0c2d1c)}
.panel:nth-child(3){--bkI:radial-gradient(circle,red,gray)}
.panel:nth-child(4){--bkI:radial-gradient(circle,black,coral)}
.panel:nth-child(5){--bkI:radial-gradient(circle,darkred,orange)}
.panel:nth-child(6){--bkI:radial-gradient(circle,green,brown)}
.panel:nth-child(7){--bkI:radial-gradient(circle,#000,#00008b)}
.panel:nth-child(8){--bkI:radial-gradient(circle,black,purple)}
.panel:nth-child(9){--bkI:radial-gradient(circle,green,#140d07)}

.infoC.show .panel{--tran:opacity .5s var(--tDel);opacity:1}
.infoC.show .panel:nth-child(1){--tDel:.15s}
.infoC.show .panel:nth-child(2){--tDel:.3s}
.infoC.show .panel:nth-child(3){--tDel:.45s}
.infoC.show .panel:nth-child(4){--tDel:.6s}
.infoC.show .panel:nth-child(5){--tDel:.75s}
.infoC.show .panel:nth-child(6){--tDel:.9s}
.infoC.show .panel:nth-child(7){--tDel:1.05s}
.infoC.show .panel:nth-child(8){--tDel:1.2s}
.infoC.show .panel:nth-child(9){--tDel:1.5s}

.panel:hover{z-index:2}

.text{background-color:#fff;margin:0;padding:.25vw .833vw;border:solid .166vw #000;color:#000;font-size:1vw;font-weight:900;z-index:1}
.panel:hover .text{z-index:-1}
.top-left,.top-right,.bottom-right{--nLab:skew(-15deg)}
.top-left,.top-right{top:-.925vw}
.top-left{left:-.583vw}
.top-right{right:-.583vw}
.bottom-right{right:-.583vw;bottom:-.5vw}
.panel:nth-child(4) .text,.panel:nth-child(8) .text{--nLab:scaleX(-1)skew(-15deg)}

.cil{--nLab:translate3d(calc(var(--cilOver,2.5)*1vw),-4.375vw,0)translateZ(0);height:25vw}
.panes{--per:calc(var(--iDex)*35);gap:.4vw}
.item{--nLab:translate3d(0,.75vw,calc(var(--iDex)*0))translateZ(0)scale(1,.425);--tran:transform 1.25s var(--itemT),filter 3s var(--itemT),width 1.25s var(--itemT);background-color:#222;background-size:cover;background-position:center;width:calc(var(--iDex)*3);height:calc(var(--iDex)*12);filter:grayscale(1) brightness(.5);will-change:transform,filter,rotateY,width;cursor:pointer;z-index:-1}
.item::before,.item::after{height:100%;width:1.66vw;right:calc(var(--iDex)* -1)}
.item::after{left:calc(var(--iDex)* -1)}
.panes .item:hover{--nLab:translate3d(0,0,calc(var(--iDex)*10))translateZ(0)scale(1,1);z-index:2}

.panes .item:hover + *{--nLab:translate3d(0,0,calc(var(--iDex)*8.5))translateZ(0)rotateY(35deg);z-index:-1}
.panes .item:hover + * + *{--nLab:translate3d(0,0,calc(var(--iDex)*5.6))translateZ(0)rotateY(40deg);z-index:-2}
.panes .item:hover + * + * + *{--nLab:translate3d(0,0,calc(var(--iDex)*2.5))translateZ(0)rotateY(30deg);z-index:-3}
.panes .item:hover + * + * + * + *{--nLab:translate3d(0,0,calc(var(--iDex)*.6))translateZ(0)rotateY(15deg);z-index:-4}

.panes .item:has( + :hover){--nLab:translate3d(0,0,calc(var(--iDex)*8.5))translateZ(0)rotateY(-35deg)}
.panes .item:has( + * + :hover){--nLab:translate3d(0,0,calc(var(--iDex)*5.6))translateZ(0)rotateY(-40deg)}
.panes .item:has( + * + * + :hover){--nLab:translate3d(0,0,calc(var(--iDex)*2.5))translateZ(0)rotateY(-30deg)}
.panes .item:has( + * + * + * + :hover){--nLab:translate3d(0,0,calc(var(--iDex)*.6))translateZ(0)rotateY(-15deg)}
.panes .item:active,.panes .item:focus{--nLab:translate3d(calc(var(--posPanes,0)*1vw),0,calc(var(--iDex)*10))translateZ(0);width:20vw;margin:0 .45vw}

.panel:nth-child(4) .item div,.panel:nth-child(8) .item div{--nLab:scaleX(-1)}

@media only screen and (orientation:landscape){
	body{overflow:hidden;background:blue}
	#body{width:100vw;height:100vh}
	.infoT{--nLab:translate3d(0,80vh,0)translateZ(0)}}
@media only screen and (orientation:portrait){
	body{overflow:hidden;background:red}
	#body{width:100vw;height:100vh}
	.infoT{--nLab:translate3d(0,65vh,0)translateZ(0)}}