@charset "utf-8";

/*------------------------------------------------------------------------------------------- パズル -----

/*----------------------------------------
    画像 & 各種配色設定
----------------------------------------*/
/* パズル画像 */
.panelGraphic {
    background-image: url("../images/img_puzzle-original.jpg");
}
/* 画面の背景色 */
.container{
    background: #00234f;
}
/* パズルボディの色と影 */
.puzzleBody {
    background: linear-gradient(145deg, #002555, #002047);
    box-shadow: 25px 25px 50px #001938, -25px -25px 50px #002d66;
}
/* パズルのタイトル文字色 */
.puzzleBody .header {
    color: #fff;
}
/* パズルエリアの背景色 */
.puzzleBody .puzzleArea {
    background: #00142e;
}
/* 選択中パネルフォーカスラインの色 */
.panelGraphic::before {
    border-color: #c6a726;
}
/* 移動方向ナビゲーション（矢印）の色 */
.panelMoveArea .label::before {
    background: #c6a726;
}
/*----------------------------------------


    本体のスタイル


----------------------------------------*/
* {
    box-sizing: border-box;
}
.container {
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
}
.puzzleBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 1/1.25;
    border-radius: 24px;
}
.puzzleBody .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    font-weight: bold;
    font-family: "Anton", sans-serif;
    line-height : 1.5 ;
    aspect-ratio: 1/0.35;
    letter-spacing: 0.2em;
}
.puzzleBody .header .title_main {
    font-size: clamp(14px, 6vw, 30px);
}
.puzzleBody .header .title_sub {
    font-size: clamp(18px, 9vw, 54px);
}
.puzzleBody .puzzleArea {
    position: relative;
    width: 80%;
    aspect-ratio: 1/1;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
}
.puzzleBody .puzzleArea::before,
.puzzleBody .puzzleArea::after {
    content: "";
    position: absolute;
    z-index: 11;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
}
.puzzleBody .puzzleArea::before {
    top: -10%;
    left: 0;
    width: 100%;
    height: 10%;
}
.puzzleBody .puzzleArea::after {
    top: 0;
    left: -10%;
    width: 10%;
    height: 100%;
}
.puzzleBody .puzzleArea .puzzleAreaShadow {
    position: absolute;
    z-index: 11;
    top: 0;
    right: -10%;
    width: 10%;
    height: 100%;
}
.puzzleBody .puzzleArea .puzzleAreaShadow::before,
.puzzleBody .puzzleArea .puzzleAreaShadow::after {
    content: "";
    position: absolute;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
}
.puzzleBody .puzzleArea .puzzleAreaShadow::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.puzzleBody .puzzleArea .puzzleAreaShadow::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: bottom right;
    transform: rotate(-90deg);
}
.panelMoveArea {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 25%;
    aspect-ratio: 1/1;
    transition: all ease 0.4s;
    overflow: hidden;
}
.panelMoveArea .label,
.panelMoveArea .panelGraphic {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    aspect-ratio: 1/1;
}
.panelMoveArea .label {
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}
.panelMoveArea .label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 60%;
    height: 60%;
    clip-path: polygon(0% 20%, 50% 20%, 50% 0%, 100% 50%, 50% 100%, 50% 80%, 0% 80%);
}
.panelMoveArea .panelGraphic {
    z-index: 2;
    background-size: 400%;
    background-repeat: no-repeat;
}
.panelMoveArea .panelPosition--1 {
    background-position: 0 0;
}
.panelMoveArea .panelPosition--2 {
    background-position: 33.333333333% 0;
}
.panelMoveArea .panelPosition--3 {
    background-position: 66.666666666% 0;
}
.panelMoveArea .panelPosition--4 {
    background-position: 100% 0;
}
.panelMoveArea .panelPosition--5 {
    background-position: 0 33.333333333%;
}
.panelMoveArea .panelPosition--6 {
    background-position: 33.333333333% 33.333333333%;
}
.panelMoveArea .panelPosition--7 {
    background-position: 66.666666666% 33.333333333%;
}
.panelMoveArea .panelPosition--8 {
    background-position: 100% 33.333333333%;
}
.panelMoveArea .panelPosition--9 {
    background-position: 0 66.666666666%;
}
.panelMoveArea .panelPosition--10 {
    background-position: 33.333333333% 66.666666666%;
}
.panelMoveArea .panelPosition--11 {
    background-position: 66.666666666% 66.666666666%;
}
.panelMoveArea .panelPosition--12 {
    background-position: 100% 66.666666666%;
}
.panelMoveArea .panelPosition--13 {
    background-position: 0 100%;
}
.panelMoveArea .panelPosition--14 {
    background-position: 33.333333333% 100%;
}
.panelMoveArea .panelPosition--15 {
    background-position: 66.666666666% 100%;
}

.checkPanelMove,
.panelController {
    display: none;
}

#panelMove-1:checked ~ .puzzleBody .panelMoveArea--1 {
    z-index: 1;
    overflow: visible;
}
#panelMove-1:checked ~ .puzzleBody .panelMoveArea--1 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-1-A:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 0;
    left: 0;
}
#panel-1-A:checked ~ .puzzleBody .panelMoveArea--1 .label--B {
    left: auto;
    right: -100%;
}
#panel-1-A:checked ~ .puzzleBody .panelMoveArea--1 .label--B::before {
    transform: rotate(0);
}
#panel-1-A:checked ~ .puzzleBody .panelMoveArea--1 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-1-A:checked ~ .puzzleBody .panelMoveArea--1 .label--E::before {
    transform: rotate(90deg);
}

#panel-1-B:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 0;
    left: 25%;
}
#panel-1-B:checked ~ .puzzleBody .panelMoveArea--1 .label--A {
    left: -100%;
    right: auto;
}
#panel-1-B:checked ~ .puzzleBody .panelMoveArea--1 .label--A::before {
    transform: rotate(180deg);
}
#panel-1-B:checked ~ .puzzleBody .panelMoveArea--1 .label--C {
    left: auto;
    right: -100%;
}
#panel-1-B:checked ~ .puzzleBody .panelMoveArea--1 .label--C::before {
    transform: rotate(0);
}
#panel-1-B:checked ~ .puzzleBody .panelMoveArea--1 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-1-B:checked ~ .puzzleBody .panelMoveArea--1 .label--F::before {
    transform: rotate(90deg);
}

#panel-1-C:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 0;
    left: 50%;
}
#panel-1-C:checked ~ .puzzleBody .panelMoveArea--1 .label--B {
    left: -100%;
    right: auto;
}
#panel-1-C:checked ~ .puzzleBody .panelMoveArea--1 .label--B::before {
    transform: rotate(180deg);
}
#panel-1-C:checked ~ .puzzleBody .panelMoveArea--1 .label--D {
    left: auto;
    right: -100%;
}
#panel-1-C:checked ~ .puzzleBody .panelMoveArea--1 .label--D::before {
    transform: rotate(0);
}
#panel-1-C:checked ~ .puzzleBody .panelMoveArea--1 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-1-C:checked ~ .puzzleBody .panelMoveArea--1 .label--G::before {
    transform: rotate(90deg);
}

#panel-1-D:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 0;
    left: 75%;
}
#panel-1-D:checked ~ .puzzleBody .panelMoveArea--1 .label--C {
    left: -100%;
    right: auto;
}
#panel-1-D:checked ~ .puzzleBody .panelMoveArea--1 .label--C::before {
    transform: rotate(180deg);
}
#panel-1-D:checked ~ .puzzleBody .panelMoveArea--1 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-1-D:checked ~ .puzzleBody .panelMoveArea--1 .label--H::before {
    transform: rotate(90deg);
}

#panel-1-E:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 25%;
    left: 0;
}
#panel-1-E:checked ~ .puzzleBody .panelMoveArea--1 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-1-E:checked ~ .puzzleBody .panelMoveArea--1 .label--A::before {
    transform: rotate(-90deg);
}
#panel-1-E:checked ~ .puzzleBody .panelMoveArea--1 .label--F {
    left: auto;
    right: -100%;
}
#panel-1-E:checked ~ .puzzleBody .panelMoveArea--1 .label--F::before {
    transform: rotate(0);
}
#panel-1-E:checked ~ .puzzleBody .panelMoveArea--1 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-1-E:checked ~ .puzzleBody .panelMoveArea--1 .label--I::before {
    transform: rotate(90deg);
}

#panel-1-F:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 25%;
    left: 25%;
}
#panel-1-F:checked ~ .puzzleBody .panelMoveArea--1 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-1-F:checked ~ .puzzleBody .panelMoveArea--1 .label--B::before {
    transform: rotate(-90deg);
}
#panel-1-F:checked ~ .puzzleBody .panelMoveArea--1 .label--E {
    left: -100%;
    right: auto;
}
#panel-1-F:checked ~ .puzzleBody .panelMoveArea--1 .label--E::before {
    transform: rotate(180deg);
}
#panel-1-F:checked ~ .puzzleBody .panelMoveArea--1 .label--G {
    left: auto;
    right: -100%;
}
#panel-1-F:checked ~ .puzzleBody .panelMoveArea--1 .label--G::before {
    transform: rotate(0);
}
#panel-1-F:checked ~ .puzzleBody .panelMoveArea--1 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-1-F:checked ~ .puzzleBody .panelMoveArea--1 .label--J::before {
    transform: rotate(90deg);
}

#panel-1-G:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 25%;
    left: 50%;
}
#panel-1-G:checked ~ .puzzleBody .panelMoveArea--1 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-1-G:checked ~ .puzzleBody .panelMoveArea--1 .label--C::before {
    transform: rotate(-90deg);
}
#panel-1-G:checked ~ .puzzleBody .panelMoveArea--1 .label--F {
    left: -100%;
    right: auto;
}
#panel-1-G:checked ~ .puzzleBody .panelMoveArea--1 .label--F::before {
    transform: rotate(180deg);
}
#panel-1-G:checked ~ .puzzleBody .panelMoveArea--1 .label--H {
    left: auto;
    right: -100%;
}
#panel-1-G:checked ~ .puzzleBody .panelMoveArea--1 .label--H::before {
    transform: rotate(0);
}
#panel-1-G:checked ~ .puzzleBody .panelMoveArea--1 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-1-G:checked ~ .puzzleBody .panelMoveArea--1 .label--K::before {
    transform: rotate(90deg);
}

#panel-1-H:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 25%;
    left: 75%;
}
#panel-1-H:checked ~ .puzzleBody .panelMoveArea--1 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-1-H:checked ~ .puzzleBody .panelMoveArea--1 .label--D::before {
    transform: rotate(-90deg);
}
#panel-1-H:checked ~ .puzzleBody .panelMoveArea--1 .label--G {
    left: -100%;
    right: auto;
}
#panel-1-H:checked ~ .puzzleBody .panelMoveArea--1 .label--G::before {
    transform: rotate(180deg);
}
#panel-1-H:checked ~ .puzzleBody .panelMoveArea--1 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-1-H:checked ~ .puzzleBody .panelMoveArea--1 .label--L::before {
    transform: rotate(90deg);
}

#panel-1-I:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 50%;
    left: 0;
}
#panel-1-I:checked ~ .puzzleBody .panelMoveArea--1 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-1-I:checked ~ .puzzleBody .panelMoveArea--1 .label--E::before {
    transform: rotate(-90deg);
}
#panel-1-I:checked ~ .puzzleBody .panelMoveArea--1 .label--J {
    left: auto;
    right: -100%;
}
#panel-1-I:checked ~ .puzzleBody .panelMoveArea--1 .label--J::before {
    transform: rotate(0);
}
#panel-1-I:checked ~ .puzzleBody .panelMoveArea--1 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-1-I:checked ~ .puzzleBody .panelMoveArea--1 .label--M::before {
    transform: rotate(90deg);
}

#panel-1-J:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 50%;
    left: 25%;
}
#panel-1-J:checked ~ .puzzleBody .panelMoveArea--1 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-1-J:checked ~ .puzzleBody .panelMoveArea--1 .label--F::before {
    transform: rotate(-90deg);
}
#panel-1-J:checked ~ .puzzleBody .panelMoveArea--1 .label--I {
    left: -100%;
    right: auto;
}
#panel-1-J:checked ~ .puzzleBody .panelMoveArea--1 .label--I::before {
    transform: rotate(180deg);
}
#panel-1-J:checked ~ .puzzleBody .panelMoveArea--1 .label--K {
    left: auto;
    right: -100%;
}
#panel-1-J:checked ~ .puzzleBody .panelMoveArea--1 .label--K::before {
    transform: rotate(0);
}
#panel-1-J:checked ~ .puzzleBody .panelMoveArea--1 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-1-J:checked ~ .puzzleBody .panelMoveArea--1 .label--N::before {
    transform: rotate(90deg);
}

#panel-1-K:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 50%;
    left: 50%;
}
#panel-1-K:checked ~ .puzzleBody .panelMoveArea--1 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-1-K:checked ~ .puzzleBody .panelMoveArea--1 .label--G::before {
    transform: rotate(-90deg);
}
#panel-1-K:checked ~ .puzzleBody .panelMoveArea--1 .label--J {
    left: -100%;
    right: auto;
}
#panel-1-K:checked ~ .puzzleBody .panelMoveArea--1 .label--J::before {
    transform: rotate(180deg);
}
#panel-1-K:checked ~ .puzzleBody .panelMoveArea--1 .label--L {
    left: auto;
    right: -100%;
}
#panel-1-K:checked ~ .puzzleBody .panelMoveArea--1 .label--L::before {
    transform: rotate(0);
}
#panel-1-K:checked ~ .puzzleBody .panelMoveArea--1 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-1-K:checked ~ .puzzleBody .panelMoveArea--1 .label--O::before {
    transform: rotate(90deg);
}

#panel-1-L:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 50%;
    left: 75%;
}
#panel-1-L:checked ~ .puzzleBody .panelMoveArea--1 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-1-L:checked ~ .puzzleBody .panelMoveArea--1 .label--H::before {
    transform: rotate(-90deg);
}
#panel-1-L:checked ~ .puzzleBody .panelMoveArea--1 .label--K {
    left: -100%;
    right: auto;
}
#panel-1-L:checked ~ .puzzleBody .panelMoveArea--1 .label--K::before {
    transform: rotate(180deg);
}
#panel-1-L:checked ~ .puzzleBody .panelMoveArea--1 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-1-L:checked ~ .puzzleBody .panelMoveArea--1 .label--P::before {
    transform: rotate(90deg);
}

#panel-1-M:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 75%;
    left: 0;
}
#panel-1-M:checked ~ .puzzleBody .panelMoveArea--1 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-1-M:checked ~ .puzzleBody .panelMoveArea--1 .label--I::before {
    transform: rotate(-90deg);
}
#panel-1-M:checked ~ .puzzleBody .panelMoveArea--1 .label--N {
    left: auto;
    right: -100%;
}
#panel-1-M:checked ~ .puzzleBody .panelMoveArea--1 .label--N::before {
    transform: rotate(0);
}

#panel-1-N:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 75%;
    left: 25%;
}
#panel-1-N:checked ~ .puzzleBody .panelMoveArea--1 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-1-N:checked ~ .puzzleBody .panelMoveArea--1 .label--J::before {
    transform: rotate(-90deg);
}
#panel-1-N:checked ~ .puzzleBody .panelMoveArea--1 .label--M {
    left: -100%;
    right: auto;
}
#panel-1-N:checked ~ .puzzleBody .panelMoveArea--1 .label--M::before {
    transform: rotate(180deg);
}
#panel-1-N:checked ~ .puzzleBody .panelMoveArea--1 .label--O {
    left: auto;
    right: -100%;
}
#panel-1-N:checked ~ .puzzleBody .panelMoveArea--1 .label--O::before {
    transform: rotate(0);
}

#panel-1-O:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 75%;
    left: 50%;
}
#panel-1-O:checked ~ .puzzleBody .panelMoveArea--1 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-1-O:checked ~ .puzzleBody .panelMoveArea--1 .label--K::before {
    transform: rotate(-90deg);
}
#panel-1-O:checked ~ .puzzleBody .panelMoveArea--1 .label--N {
    left: -100%;
    right: auto;
}
#panel-1-O:checked ~ .puzzleBody .panelMoveArea--1 .label--N::before {
    transform: rotate(180deg);
}
#panel-1-O:checked ~ .puzzleBody .panelMoveArea--1 .label--P {
    left: auto;
    right: -100%;
}
#panel-1-O:checked ~ .puzzleBody .panelMoveArea--1 .label--P::before {
    transform: rotate(0);
}

#panel-1-P:checked ~ .puzzleBody .panelMoveArea--1 {
    top: 75%;
    left: 75%;
}
#panel-1-P:checked ~ .puzzleBody .panelMoveArea--1 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-1-P:checked ~ .puzzleBody .panelMoveArea--1 .label--L::before {
    transform: rotate(-90deg);
}
#panel-1-P:checked ~ .puzzleBody .panelMoveArea--1 .label--O {
    left: -100%;
    right: auto;
}
#panel-1-P:checked ~ .puzzleBody .panelMoveArea--1 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-2:checked ~ .puzzleBody .panelMoveArea--2 {
    z-index: 1;
    overflow: visible;
}
#panelMove-2:checked ~ .puzzleBody .panelMoveArea--2 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-2-A:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 0;
    left: 0;
}
#panel-2-A:checked ~ .puzzleBody .panelMoveArea--2 .label--B {
    left: auto;
    right: -100%;
}
#panel-2-A:checked ~ .puzzleBody .panelMoveArea--2 .label--B::before {
    transform: rotate(0);
}
#panel-2-A:checked ~ .puzzleBody .panelMoveArea--2 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-2-A:checked ~ .puzzleBody .panelMoveArea--2 .label--E::before {
    transform: rotate(90deg);
}

#panel-2-B:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 0;
    left: 25%;
}
#panel-2-B:checked ~ .puzzleBody .panelMoveArea--2 .label--A {
    left: -100%;
    right: auto;
}
#panel-2-B:checked ~ .puzzleBody .panelMoveArea--2 .label--A::before {
    transform: rotate(180deg);
}
#panel-2-B:checked ~ .puzzleBody .panelMoveArea--2 .label--C {
    left: auto;
    right: -100%;
}
#panel-2-B:checked ~ .puzzleBody .panelMoveArea--2 .label--C::before {
    transform: rotate(0);
}
#panel-2-B:checked ~ .puzzleBody .panelMoveArea--2 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-2-B:checked ~ .puzzleBody .panelMoveArea--2 .label--F::before {
    transform: rotate(90deg);
}

#panel-2-C:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 0;
    left: 50%;
}
#panel-2-C:checked ~ .puzzleBody .panelMoveArea--2 .label--B {
    left: -100%;
    right: auto;
}
#panel-2-C:checked ~ .puzzleBody .panelMoveArea--2 .label--B::before {
    transform: rotate(180deg);
}
#panel-2-C:checked ~ .puzzleBody .panelMoveArea--2 .label--D {
    left: auto;
    right: -100%;
}
#panel-2-C:checked ~ .puzzleBody .panelMoveArea--2 .label--D::before {
    transform: rotate(0);
}
#panel-2-C:checked ~ .puzzleBody .panelMoveArea--2 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-2-C:checked ~ .puzzleBody .panelMoveArea--2 .label--G::before {
    transform: rotate(90deg);
}

#panel-2-D:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 0;
    left: 75%;
}
#panel-2-D:checked ~ .puzzleBody .panelMoveArea--2 .label--C {
    left: -100%;
    right: auto;
}
#panel-2-D:checked ~ .puzzleBody .panelMoveArea--2 .label--C::before {
    transform: rotate(180deg);
}
#panel-2-D:checked ~ .puzzleBody .panelMoveArea--2 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-2-D:checked ~ .puzzleBody .panelMoveArea--2 .label--H::before {
    transform: rotate(90deg);
}

#panel-2-E:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 25%;
    left: 0;
}
#panel-2-E:checked ~ .puzzleBody .panelMoveArea--2 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-2-E:checked ~ .puzzleBody .panelMoveArea--2 .label--A::before {
    transform: rotate(-90deg);
}
#panel-2-E:checked ~ .puzzleBody .panelMoveArea--2 .label--F {
    left: auto;
    right: -100%;
}
#panel-2-E:checked ~ .puzzleBody .panelMoveArea--2 .label--F::before {
    transform: rotate(0);
}
#panel-2-E:checked ~ .puzzleBody .panelMoveArea--2 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-2-E:checked ~ .puzzleBody .panelMoveArea--2 .label--I::before {
    transform: rotate(90deg);
}

#panel-2-F:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 25%;
    left: 25%;
}
#panel-2-F:checked ~ .puzzleBody .panelMoveArea--2 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-2-F:checked ~ .puzzleBody .panelMoveArea--2 .label--B::before {
    transform: rotate(-90deg);
}
#panel-2-F:checked ~ .puzzleBody .panelMoveArea--2 .label--E {
    left: -100%;
    right: auto;
}
#panel-2-F:checked ~ .puzzleBody .panelMoveArea--2 .label--E::before {
    transform: rotate(180deg);
}
#panel-2-F:checked ~ .puzzleBody .panelMoveArea--2 .label--G {
    left: auto;
    right: -100%;
}
#panel-2-F:checked ~ .puzzleBody .panelMoveArea--2 .label--G::before {
    transform: rotate(0);
}
#panel-2-F:checked ~ .puzzleBody .panelMoveArea--2 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-2-F:checked ~ .puzzleBody .panelMoveArea--2 .label--J::before {
    transform: rotate(90deg);
}

#panel-2-G:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 25%;
    left: 50%;
}
#panel-2-G:checked ~ .puzzleBody .panelMoveArea--2 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-2-G:checked ~ .puzzleBody .panelMoveArea--2 .label--C::before {
    transform: rotate(-90deg);
}
#panel-2-G:checked ~ .puzzleBody .panelMoveArea--2 .label--F {
    left: -100%;
    right: auto;
}
#panel-2-G:checked ~ .puzzleBody .panelMoveArea--2 .label--F::before {
    transform: rotate(180deg);
}
#panel-2-G:checked ~ .puzzleBody .panelMoveArea--2 .label--H {
    left: auto;
    right: -100%;
}
#panel-2-G:checked ~ .puzzleBody .panelMoveArea--2 .label--H::before {
    transform: rotate(0);
}
#panel-2-G:checked ~ .puzzleBody .panelMoveArea--2 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-2-G:checked ~ .puzzleBody .panelMoveArea--2 .label--K::before {
    transform: rotate(90deg);
}

#panel-2-H:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 25%;
    left: 75%;
}
#panel-2-H:checked ~ .puzzleBody .panelMoveArea--2 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-2-H:checked ~ .puzzleBody .panelMoveArea--2 .label--D::before {
    transform: rotate(-90deg);
}
#panel-2-H:checked ~ .puzzleBody .panelMoveArea--2 .label--G {
    left: -100%;
    right: auto;
}
#panel-2-H:checked ~ .puzzleBody .panelMoveArea--2 .label--G::before {
    transform: rotate(180deg);
}
#panel-2-H:checked ~ .puzzleBody .panelMoveArea--2 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-2-H:checked ~ .puzzleBody .panelMoveArea--2 .label--L::before {
    transform: rotate(90deg);
}

#panel-2-I:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 50%;
    left: 0;
}
#panel-2-I:checked ~ .puzzleBody .panelMoveArea--2 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-2-I:checked ~ .puzzleBody .panelMoveArea--2 .label--E::before {
    transform: rotate(-90deg);
}
#panel-2-I:checked ~ .puzzleBody .panelMoveArea--2 .label--J {
    left: auto;
    right: -100%;
}
#panel-2-I:checked ~ .puzzleBody .panelMoveArea--2 .label--J::before {
    transform: rotate(0);
}
#panel-2-I:checked ~ .puzzleBody .panelMoveArea--2 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-2-I:checked ~ .puzzleBody .panelMoveArea--2 .label--M::before {
    transform: rotate(90deg);
}

#panel-2-J:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 50%;
    left: 25%;
}
#panel-2-J:checked ~ .puzzleBody .panelMoveArea--2 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-2-J:checked ~ .puzzleBody .panelMoveArea--2 .label--F::before {
    transform: rotate(-90deg);
}
#panel-2-J:checked ~ .puzzleBody .panelMoveArea--2 .label--I {
    left: -100%;
    right: auto;
}
#panel-2-J:checked ~ .puzzleBody .panelMoveArea--2 .label--I::before {
    transform: rotate(180deg);
}
#panel-2-J:checked ~ .puzzleBody .panelMoveArea--2 .label--K {
    left: auto;
    right: -100%;
}
#panel-2-J:checked ~ .puzzleBody .panelMoveArea--2 .label--K::before {
    transform: rotate(0);
}
#panel-2-J:checked ~ .puzzleBody .panelMoveArea--2 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-2-J:checked ~ .puzzleBody .panelMoveArea--2 .label--N::before {
    transform: rotate(90deg);
}

#panel-2-K:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 50%;
    left: 50%;
}
#panel-2-K:checked ~ .puzzleBody .panelMoveArea--2 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-2-K:checked ~ .puzzleBody .panelMoveArea--2 .label--G::before {
    transform: rotate(-90deg);
}
#panel-2-K:checked ~ .puzzleBody .panelMoveArea--2 .label--J {
    left: -100%;
    right: auto;
}
#panel-2-K:checked ~ .puzzleBody .panelMoveArea--2 .label--J::before {
    transform: rotate(180deg);
}
#panel-2-K:checked ~ .puzzleBody .panelMoveArea--2 .label--L {
    left: auto;
    right: -100%;
}
#panel-2-K:checked ~ .puzzleBody .panelMoveArea--2 .label--L::before {
    transform: rotate(0);
}
#panel-2-K:checked ~ .puzzleBody .panelMoveArea--2 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-2-K:checked ~ .puzzleBody .panelMoveArea--2 .label--O::before {
    transform: rotate(90deg);
}

#panel-2-L:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 50%;
    left: 75%;
}
#panel-2-L:checked ~ .puzzleBody .panelMoveArea--2 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-2-L:checked ~ .puzzleBody .panelMoveArea--2 .label--H::before {
    transform: rotate(-90deg);
}
#panel-2-L:checked ~ .puzzleBody .panelMoveArea--2 .label--K {
    left: -100%;
    right: auto;
}
#panel-2-L:checked ~ .puzzleBody .panelMoveArea--2 .label--K::before {
    transform: rotate(180deg);
}
#panel-2-L:checked ~ .puzzleBody .panelMoveArea--2 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-2-L:checked ~ .puzzleBody .panelMoveArea--2 .label--P::before {
    transform: rotate(90deg);
}

#panel-2-M:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 75%;
    left: 0;
}
#panel-2-M:checked ~ .puzzleBody .panelMoveArea--2 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-2-M:checked ~ .puzzleBody .panelMoveArea--2 .label--I::before {
    transform: rotate(-90deg);
}
#panel-2-M:checked ~ .puzzleBody .panelMoveArea--2 .label--N {
    left: auto;
    right: -100%;
}
#panel-2-M:checked ~ .puzzleBody .panelMoveArea--2 .label--N::before {
    transform: rotate(0);
}

#panel-2-N:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 75%;
    left: 25%;
}
#panel-2-N:checked ~ .puzzleBody .panelMoveArea--2 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-2-N:checked ~ .puzzleBody .panelMoveArea--2 .label--J::before {
    transform: rotate(-90deg);
}
#panel-2-N:checked ~ .puzzleBody .panelMoveArea--2 .label--M {
    left: -100%;
    right: auto;
}
#panel-2-N:checked ~ .puzzleBody .panelMoveArea--2 .label--M::before {
    transform: rotate(180deg);
}
#panel-2-N:checked ~ .puzzleBody .panelMoveArea--2 .label--O {
    left: auto;
    right: -100%;
}
#panel-2-N:checked ~ .puzzleBody .panelMoveArea--2 .label--O::before {
    transform: rotate(0);
}

#panel-2-O:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 75%;
    left: 50%;
}
#panel-2-O:checked ~ .puzzleBody .panelMoveArea--2 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-2-O:checked ~ .puzzleBody .panelMoveArea--2 .label--K::before {
    transform: rotate(-90deg);
}
#panel-2-O:checked ~ .puzzleBody .panelMoveArea--2 .label--N {
    left: -100%;
    right: auto;
}
#panel-2-O:checked ~ .puzzleBody .panelMoveArea--2 .label--N::before {
    transform: rotate(180deg);
}
#panel-2-O:checked ~ .puzzleBody .panelMoveArea--2 .label--P {
    left: auto;
    right: -100%;
}
#panel-2-O:checked ~ .puzzleBody .panelMoveArea--2 .label--P::before {
    transform: rotate(0);
}

#panel-2-P:checked ~ .puzzleBody .panelMoveArea--2 {
    top: 75%;
    left: 75%;
}
#panel-2-P:checked ~ .puzzleBody .panelMoveArea--2 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-2-P:checked ~ .puzzleBody .panelMoveArea--2 .label--L::before {
    transform: rotate(-90deg);
}
#panel-2-P:checked ~ .puzzleBody .panelMoveArea--2 .label--O {
    left: -100%;
    right: auto;
}
#panel-2-P:checked ~ .puzzleBody .panelMoveArea--2 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-3:checked ~ .puzzleBody .panelMoveArea--3 {
    z-index: 1;
    overflow: visible;
}
#panelMove-3:checked ~ .puzzleBody .panelMoveArea--3 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-3-A:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 0;
    left: 0;
}
#panel-3-A:checked ~ .puzzleBody .panelMoveArea--3 .label--B {
    left: auto;
    right: -100%;
}
#panel-3-A:checked ~ .puzzleBody .panelMoveArea--3 .label--B::before {
    transform: rotate(0);
}
#panel-3-A:checked ~ .puzzleBody .panelMoveArea--3 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-3-A:checked ~ .puzzleBody .panelMoveArea--3 .label--E::before {
    transform: rotate(90deg);
}

#panel-3-B:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 0;
    left: 25%;
}
#panel-3-B:checked ~ .puzzleBody .panelMoveArea--3 .label--A {
    left: -100%;
    right: auto;
}
#panel-3-B:checked ~ .puzzleBody .panelMoveArea--3 .label--A::before {
    transform: rotate(180deg);
}
#panel-3-B:checked ~ .puzzleBody .panelMoveArea--3 .label--C {
    left: auto;
    right: -100%;
}
#panel-3-B:checked ~ .puzzleBody .panelMoveArea--3 .label--C::before {
    transform: rotate(0);
}
#panel-3-B:checked ~ .puzzleBody .panelMoveArea--3 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-3-B:checked ~ .puzzleBody .panelMoveArea--3 .label--F::before {
    transform: rotate(90deg);
}

#panel-3-C:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 0;
    left: 50%;
}
#panel-3-C:checked ~ .puzzleBody .panelMoveArea--3 .label--B {
    left: -100%;
    right: auto;
}
#panel-3-C:checked ~ .puzzleBody .panelMoveArea--3 .label--B::before {
    transform: rotate(180deg);
}
#panel-3-C:checked ~ .puzzleBody .panelMoveArea--3 .label--D {
    left: auto;
    right: -100%;
}
#panel-3-C:checked ~ .puzzleBody .panelMoveArea--3 .label--D::before {
    transform: rotate(0);
}
#panel-3-C:checked ~ .puzzleBody .panelMoveArea--3 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-3-C:checked ~ .puzzleBody .panelMoveArea--3 .label--G::before {
    transform: rotate(90deg);
}

#panel-3-D:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 0;
    left: 75%;
}
#panel-3-D:checked ~ .puzzleBody .panelMoveArea--3 .label--C {
    left: -100%;
    right: auto;
}
#panel-3-D:checked ~ .puzzleBody .panelMoveArea--3 .label--C::before {
    transform: rotate(180deg);
}
#panel-3-D:checked ~ .puzzleBody .panelMoveArea--3 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-3-D:checked ~ .puzzleBody .panelMoveArea--3 .label--H::before {
    transform: rotate(90deg);
}

#panel-3-E:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 25%;
    left: 0;
}
#panel-3-E:checked ~ .puzzleBody .panelMoveArea--3 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-3-E:checked ~ .puzzleBody .panelMoveArea--3 .label--A::before {
    transform: rotate(-90deg);
}
#panel-3-E:checked ~ .puzzleBody .panelMoveArea--3 .label--F {
    left: auto;
    right: -100%;
}
#panel-3-E:checked ~ .puzzleBody .panelMoveArea--3 .label--F::before {
    transform: rotate(0);
}
#panel-3-E:checked ~ .puzzleBody .panelMoveArea--3 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-3-E:checked ~ .puzzleBody .panelMoveArea--3 .label--I::before {
    transform: rotate(90deg);
}

#panel-3-F:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 25%;
    left: 25%;
}
#panel-3-F:checked ~ .puzzleBody .panelMoveArea--3 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-3-F:checked ~ .puzzleBody .panelMoveArea--3 .label--B::before {
    transform: rotate(-90deg);
}
#panel-3-F:checked ~ .puzzleBody .panelMoveArea--3 .label--E {
    left: -100%;
    right: auto;
}
#panel-3-F:checked ~ .puzzleBody .panelMoveArea--3 .label--E::before {
    transform: rotate(180deg);
}
#panel-3-F:checked ~ .puzzleBody .panelMoveArea--3 .label--G {
    left: auto;
    right: -100%;
}
#panel-3-F:checked ~ .puzzleBody .panelMoveArea--3 .label--G::before {
    transform: rotate(0);
}
#panel-3-F:checked ~ .puzzleBody .panelMoveArea--3 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-3-F:checked ~ .puzzleBody .panelMoveArea--3 .label--J::before {
    transform: rotate(90deg);
}

#panel-3-G:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 25%;
    left: 50%;
}
#panel-3-G:checked ~ .puzzleBody .panelMoveArea--3 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-3-G:checked ~ .puzzleBody .panelMoveArea--3 .label--C::before {
    transform: rotate(-90deg);
}
#panel-3-G:checked ~ .puzzleBody .panelMoveArea--3 .label--F {
    left: -100%;
    right: auto;
}
#panel-3-G:checked ~ .puzzleBody .panelMoveArea--3 .label--F::before {
    transform: rotate(180deg);
}
#panel-3-G:checked ~ .puzzleBody .panelMoveArea--3 .label--H {
    left: auto;
    right: -100%;
}
#panel-3-G:checked ~ .puzzleBody .panelMoveArea--3 .label--H::before {
    transform: rotate(0);
}
#panel-3-G:checked ~ .puzzleBody .panelMoveArea--3 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-3-G:checked ~ .puzzleBody .panelMoveArea--3 .label--K::before {
    transform: rotate(90deg);
}

#panel-3-H:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 25%;
    left: 75%;
}
#panel-3-H:checked ~ .puzzleBody .panelMoveArea--3 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-3-H:checked ~ .puzzleBody .panelMoveArea--3 .label--D::before {
    transform: rotate(-90deg);
}
#panel-3-H:checked ~ .puzzleBody .panelMoveArea--3 .label--G {
    left: -100%;
    right: auto;
}
#panel-3-H:checked ~ .puzzleBody .panelMoveArea--3 .label--G::before {
    transform: rotate(180deg);
}
#panel-3-H:checked ~ .puzzleBody .panelMoveArea--3 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-3-H:checked ~ .puzzleBody .panelMoveArea--3 .label--L::before {
    transform: rotate(90deg);
}

#panel-3-I:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 50%;
    left: 0;
}
#panel-3-I:checked ~ .puzzleBody .panelMoveArea--3 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-3-I:checked ~ .puzzleBody .panelMoveArea--3 .label--E::before {
    transform: rotate(-90deg);
}
#panel-3-I:checked ~ .puzzleBody .panelMoveArea--3 .label--J {
    left: auto;
    right: -100%;
}
#panel-3-I:checked ~ .puzzleBody .panelMoveArea--3 .label--J::before {
    transform: rotate(0);
}
#panel-3-I:checked ~ .puzzleBody .panelMoveArea--3 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-3-I:checked ~ .puzzleBody .panelMoveArea--3 .label--M::before {
    transform: rotate(90deg);
}

#panel-3-J:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 50%;
    left: 25%;
}
#panel-3-J:checked ~ .puzzleBody .panelMoveArea--3 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-3-J:checked ~ .puzzleBody .panelMoveArea--3 .label--F::before {
    transform: rotate(-90deg);
}
#panel-3-J:checked ~ .puzzleBody .panelMoveArea--3 .label--I {
    left: -100%;
    right: auto;
}
#panel-3-J:checked ~ .puzzleBody .panelMoveArea--3 .label--I::before {
    transform: rotate(180deg);
}
#panel-3-J:checked ~ .puzzleBody .panelMoveArea--3 .label--K {
    left: auto;
    right: -100%;
}
#panel-3-J:checked ~ .puzzleBody .panelMoveArea--3 .label--K::before {
    transform: rotate(0);
}
#panel-3-J:checked ~ .puzzleBody .panelMoveArea--3 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-3-J:checked ~ .puzzleBody .panelMoveArea--3 .label--N::before {
    transform: rotate(90deg);
}

#panel-3-K:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 50%;
    left: 50%;
}
#panel-3-K:checked ~ .puzzleBody .panelMoveArea--3 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-3-K:checked ~ .puzzleBody .panelMoveArea--3 .label--G::before {
    transform: rotate(-90deg);
}
#panel-3-K:checked ~ .puzzleBody .panelMoveArea--3 .label--J {
    left: -100%;
    right: auto;
}
#panel-3-K:checked ~ .puzzleBody .panelMoveArea--3 .label--J::before {
    transform: rotate(180deg);
}
#panel-3-K:checked ~ .puzzleBody .panelMoveArea--3 .label--L {
    left: auto;
    right: -100%;
}
#panel-3-K:checked ~ .puzzleBody .panelMoveArea--3 .label--L::before {
    transform: rotate(0);
}
#panel-3-K:checked ~ .puzzleBody .panelMoveArea--3 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-3-K:checked ~ .puzzleBody .panelMoveArea--3 .label--O::before {
    transform: rotate(90deg);
}

#panel-3-L:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 50%;
    left: 75%;
}
#panel-3-L:checked ~ .puzzleBody .panelMoveArea--3 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-3-L:checked ~ .puzzleBody .panelMoveArea--3 .label--H::before {
    transform: rotate(-90deg);
}
#panel-3-L:checked ~ .puzzleBody .panelMoveArea--3 .label--K {
    left: -100%;
    right: auto;
}
#panel-3-L:checked ~ .puzzleBody .panelMoveArea--3 .label--K::before {
    transform: rotate(180deg);
}
#panel-3-L:checked ~ .puzzleBody .panelMoveArea--3 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-3-L:checked ~ .puzzleBody .panelMoveArea--3 .label--P::before {
    transform: rotate(90deg);
}

#panel-3-M:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 75%;
    left: 0;
}
#panel-3-M:checked ~ .puzzleBody .panelMoveArea--3 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-3-M:checked ~ .puzzleBody .panelMoveArea--3 .label--I::before {
    transform: rotate(-90deg);
}
#panel-3-M:checked ~ .puzzleBody .panelMoveArea--3 .label--N {
    left: auto;
    right: -100%;
}
#panel-3-M:checked ~ .puzzleBody .panelMoveArea--3 .label--N::before {
    transform: rotate(0);
}

#panel-3-N:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 75%;
    left: 25%;
}
#panel-3-N:checked ~ .puzzleBody .panelMoveArea--3 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-3-N:checked ~ .puzzleBody .panelMoveArea--3 .label--J::before {
    transform: rotate(-90deg);
}
#panel-3-N:checked ~ .puzzleBody .panelMoveArea--3 .label--M {
    left: -100%;
    right: auto;
}
#panel-3-N:checked ~ .puzzleBody .panelMoveArea--3 .label--M::before {
    transform: rotate(180deg);
}
#panel-3-N:checked ~ .puzzleBody .panelMoveArea--3 .label--O {
    left: auto;
    right: -100%;
}
#panel-3-N:checked ~ .puzzleBody .panelMoveArea--3 .label--O::before {
    transform: rotate(0);
}

#panel-3-O:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 75%;
    left: 50%;
}
#panel-3-O:checked ~ .puzzleBody .panelMoveArea--3 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-3-O:checked ~ .puzzleBody .panelMoveArea--3 .label--K::before {
    transform: rotate(-90deg);
}
#panel-3-O:checked ~ .puzzleBody .panelMoveArea--3 .label--N {
    left: -100%;
    right: auto;
}
#panel-3-O:checked ~ .puzzleBody .panelMoveArea--3 .label--N::before {
    transform: rotate(180deg);
}
#panel-3-O:checked ~ .puzzleBody .panelMoveArea--3 .label--P {
    left: auto;
    right: -100%;
}
#panel-3-O:checked ~ .puzzleBody .panelMoveArea--3 .label--P::before {
    transform: rotate(0);
}

#panel-3-P:checked ~ .puzzleBody .panelMoveArea--3 {
    top: 75%;
    left: 75%;
}
#panel-3-P:checked ~ .puzzleBody .panelMoveArea--3 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-3-P:checked ~ .puzzleBody .panelMoveArea--3 .label--L::before {
    transform: rotate(-90deg);
}
#panel-3-P:checked ~ .puzzleBody .panelMoveArea--3 .label--O {
    left: -100%;
    right: auto;
}
#panel-3-P:checked ~ .puzzleBody .panelMoveArea--3 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-4:checked ~ .puzzleBody .panelMoveArea--4 {
    z-index: 1;
    overflow: visible;
}
#panelMove-4:checked ~ .puzzleBody .panelMoveArea--4 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-4-A:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 0;
    left: 0;
}
#panel-4-A:checked ~ .puzzleBody .panelMoveArea--4 .label--B {
    left: auto;
    right: -100%;
}
#panel-4-A:checked ~ .puzzleBody .panelMoveArea--4 .label--B::before {
    transform: rotate(0);
}
#panel-4-A:checked ~ .puzzleBody .panelMoveArea--4 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-4-A:checked ~ .puzzleBody .panelMoveArea--4 .label--E::before {
    transform: rotate(90deg);
}

#panel-4-B:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 0;
    left: 25%;
}
#panel-4-B:checked ~ .puzzleBody .panelMoveArea--4 .label--A {
    left: -100%;
    right: auto;
}
#panel-4-B:checked ~ .puzzleBody .panelMoveArea--4 .label--A::before {
    transform: rotate(180deg);
}
#panel-4-B:checked ~ .puzzleBody .panelMoveArea--4 .label--C {
    left: auto;
    right: -100%;
}
#panel-4-B:checked ~ .puzzleBody .panelMoveArea--4 .label--C::before {
    transform: rotate(0);
}
#panel-4-B:checked ~ .puzzleBody .panelMoveArea--4 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-4-B:checked ~ .puzzleBody .panelMoveArea--4 .label--F::before {
    transform: rotate(90deg);
}

#panel-4-C:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 0;
    left: 50%;
}
#panel-4-C:checked ~ .puzzleBody .panelMoveArea--4 .label--B {
    left: -100%;
    right: auto;
}
#panel-4-C:checked ~ .puzzleBody .panelMoveArea--4 .label--B::before {
    transform: rotate(180deg);
}
#panel-4-C:checked ~ .puzzleBody .panelMoveArea--4 .label--D {
    left: auto;
    right: -100%;
}
#panel-4-C:checked ~ .puzzleBody .panelMoveArea--4 .label--D::before {
    transform: rotate(0);
}
#panel-4-C:checked ~ .puzzleBody .panelMoveArea--4 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-4-C:checked ~ .puzzleBody .panelMoveArea--4 .label--G::before {
    transform: rotate(90deg);
}

#panel-4-D:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 0;
    left: 75%;
}
#panel-4-D:checked ~ .puzzleBody .panelMoveArea--4 .label--C {
    left: -100%;
    right: auto;
}
#panel-4-D:checked ~ .puzzleBody .panelMoveArea--4 .label--C::before {
    transform: rotate(180deg);
}
#panel-4-D:checked ~ .puzzleBody .panelMoveArea--4 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-4-D:checked ~ .puzzleBody .panelMoveArea--4 .label--H::before {
    transform: rotate(90deg);
}

#panel-4-E:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 25%;
    left: 0;
}
#panel-4-E:checked ~ .puzzleBody .panelMoveArea--4 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-4-E:checked ~ .puzzleBody .panelMoveArea--4 .label--A::before {
    transform: rotate(-90deg);
}
#panel-4-E:checked ~ .puzzleBody .panelMoveArea--4 .label--F {
    left: auto;
    right: -100%;
}
#panel-4-E:checked ~ .puzzleBody .panelMoveArea--4 .label--F::before {
    transform: rotate(0);
}
#panel-4-E:checked ~ .puzzleBody .panelMoveArea--4 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-4-E:checked ~ .puzzleBody .panelMoveArea--4 .label--I::before {
    transform: rotate(90deg);
}

#panel-4-F:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 25%;
    left: 25%;
}
#panel-4-F:checked ~ .puzzleBody .panelMoveArea--4 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-4-F:checked ~ .puzzleBody .panelMoveArea--4 .label--B::before {
    transform: rotate(-90deg);
}
#panel-4-F:checked ~ .puzzleBody .panelMoveArea--4 .label--E {
    left: -100%;
    right: auto;
}
#panel-4-F:checked ~ .puzzleBody .panelMoveArea--4 .label--E::before {
    transform: rotate(180deg);
}
#panel-4-F:checked ~ .puzzleBody .panelMoveArea--4 .label--G {
    left: auto;
    right: -100%;
}
#panel-4-F:checked ~ .puzzleBody .panelMoveArea--4 .label--G::before {
    transform: rotate(0);
}
#panel-4-F:checked ~ .puzzleBody .panelMoveArea--4 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-4-F:checked ~ .puzzleBody .panelMoveArea--4 .label--J::before {
    transform: rotate(90deg);
}

#panel-4-G:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 25%;
    left: 50%;
}
#panel-4-G:checked ~ .puzzleBody .panelMoveArea--4 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-4-G:checked ~ .puzzleBody .panelMoveArea--4 .label--C::before {
    transform: rotate(-90deg);
}
#panel-4-G:checked ~ .puzzleBody .panelMoveArea--4 .label--F {
    left: -100%;
    right: auto;
}
#panel-4-G:checked ~ .puzzleBody .panelMoveArea--4 .label--F::before {
    transform: rotate(180deg);
}
#panel-4-G:checked ~ .puzzleBody .panelMoveArea--4 .label--H {
    left: auto;
    right: -100%;
}
#panel-4-G:checked ~ .puzzleBody .panelMoveArea--4 .label--H::before {
    transform: rotate(0);
}
#panel-4-G:checked ~ .puzzleBody .panelMoveArea--4 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-4-G:checked ~ .puzzleBody .panelMoveArea--4 .label--K::before {
    transform: rotate(90deg);
}

#panel-4-H:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 25%;
    left: 75%;
}
#panel-4-H:checked ~ .puzzleBody .panelMoveArea--4 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-4-H:checked ~ .puzzleBody .panelMoveArea--4 .label--D::before {
    transform: rotate(-90deg);
}
#panel-4-H:checked ~ .puzzleBody .panelMoveArea--4 .label--G {
    left: -100%;
    right: auto;
}
#panel-4-H:checked ~ .puzzleBody .panelMoveArea--4 .label--G::before {
    transform: rotate(180deg);
}
#panel-4-H:checked ~ .puzzleBody .panelMoveArea--4 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-4-H:checked ~ .puzzleBody .panelMoveArea--4 .label--L::before {
    transform: rotate(90deg);
}

#panel-4-I:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 50%;
    left: 0;
}
#panel-4-I:checked ~ .puzzleBody .panelMoveArea--4 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-4-I:checked ~ .puzzleBody .panelMoveArea--4 .label--E::before {
    transform: rotate(-90deg);
}
#panel-4-I:checked ~ .puzzleBody .panelMoveArea--4 .label--J {
    left: auto;
    right: -100%;
}
#panel-4-I:checked ~ .puzzleBody .panelMoveArea--4 .label--J::before {
    transform: rotate(0);
}
#panel-4-I:checked ~ .puzzleBody .panelMoveArea--4 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-4-I:checked ~ .puzzleBody .panelMoveArea--4 .label--M::before {
    transform: rotate(90deg);
}

#panel-4-J:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 50%;
    left: 25%;
}
#panel-4-J:checked ~ .puzzleBody .panelMoveArea--4 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-4-J:checked ~ .puzzleBody .panelMoveArea--4 .label--F::before {
    transform: rotate(-90deg);
}
#panel-4-J:checked ~ .puzzleBody .panelMoveArea--4 .label--I {
    left: -100%;
    right: auto;
}
#panel-4-J:checked ~ .puzzleBody .panelMoveArea--4 .label--I::before {
    transform: rotate(180deg);
}
#panel-4-J:checked ~ .puzzleBody .panelMoveArea--4 .label--K {
    left: auto;
    right: -100%;
}
#panel-4-J:checked ~ .puzzleBody .panelMoveArea--4 .label--K::before {
    transform: rotate(0);
}
#panel-4-J:checked ~ .puzzleBody .panelMoveArea--4 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-4-J:checked ~ .puzzleBody .panelMoveArea--4 .label--N::before {
    transform: rotate(90deg);
}

#panel-4-K:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 50%;
    left: 50%;
}
#panel-4-K:checked ~ .puzzleBody .panelMoveArea--4 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-4-K:checked ~ .puzzleBody .panelMoveArea--4 .label--G::before {
    transform: rotate(-90deg);
}
#panel-4-K:checked ~ .puzzleBody .panelMoveArea--4 .label--J {
    left: -100%;
    right: auto;
}
#panel-4-K:checked ~ .puzzleBody .panelMoveArea--4 .label--J::before {
    transform: rotate(180deg);
}
#panel-4-K:checked ~ .puzzleBody .panelMoveArea--4 .label--L {
    left: auto;
    right: -100%;
}
#panel-4-K:checked ~ .puzzleBody .panelMoveArea--4 .label--L::before {
    transform: rotate(0);
}
#panel-4-K:checked ~ .puzzleBody .panelMoveArea--4 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-4-K:checked ~ .puzzleBody .panelMoveArea--4 .label--O::before {
    transform: rotate(90deg);
}

#panel-4-L:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 50%;
    left: 75%;
}
#panel-4-L:checked ~ .puzzleBody .panelMoveArea--4 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-4-L:checked ~ .puzzleBody .panelMoveArea--4 .label--H::before {
    transform: rotate(-90deg);
}
#panel-4-L:checked ~ .puzzleBody .panelMoveArea--4 .label--K {
    left: -100%;
    right: auto;
}
#panel-4-L:checked ~ .puzzleBody .panelMoveArea--4 .label--K::before {
    transform: rotate(180deg);
}
#panel-4-L:checked ~ .puzzleBody .panelMoveArea--4 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-4-L:checked ~ .puzzleBody .panelMoveArea--4 .label--P::before {
    transform: rotate(90deg);
}

#panel-4-M:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 75%;
    left: 0;
}
#panel-4-M:checked ~ .puzzleBody .panelMoveArea--4 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-4-M:checked ~ .puzzleBody .panelMoveArea--4 .label--I::before {
    transform: rotate(-90deg);
}
#panel-4-M:checked ~ .puzzleBody .panelMoveArea--4 .label--N {
    left: auto;
    right: -100%;
}
#panel-4-M:checked ~ .puzzleBody .panelMoveArea--4 .label--N::before {
    transform: rotate(0);
}

#panel-4-N:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 75%;
    left: 25%;
}
#panel-4-N:checked ~ .puzzleBody .panelMoveArea--4 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-4-N:checked ~ .puzzleBody .panelMoveArea--4 .label--J::before {
    transform: rotate(-90deg);
}
#panel-4-N:checked ~ .puzzleBody .panelMoveArea--4 .label--M {
    left: -100%;
    right: auto;
}
#panel-4-N:checked ~ .puzzleBody .panelMoveArea--4 .label--M::before {
    transform: rotate(180deg);
}
#panel-4-N:checked ~ .puzzleBody .panelMoveArea--4 .label--O {
    left: auto;
    right: -100%;
}
#panel-4-N:checked ~ .puzzleBody .panelMoveArea--4 .label--O::before {
    transform: rotate(0);
}

#panel-4-O:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 75%;
    left: 50%;
}
#panel-4-O:checked ~ .puzzleBody .panelMoveArea--4 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-4-O:checked ~ .puzzleBody .panelMoveArea--4 .label--K::before {
    transform: rotate(-90deg);
}
#panel-4-O:checked ~ .puzzleBody .panelMoveArea--4 .label--N {
    left: -100%;
    right: auto;
}
#panel-4-O:checked ~ .puzzleBody .panelMoveArea--4 .label--N::before {
    transform: rotate(180deg);
}
#panel-4-O:checked ~ .puzzleBody .panelMoveArea--4 .label--P {
    left: auto;
    right: -100%;
}
#panel-4-O:checked ~ .puzzleBody .panelMoveArea--4 .label--P::before {
    transform: rotate(0);
}

#panel-4-P:checked ~ .puzzleBody .panelMoveArea--4 {
    top: 75%;
    left: 75%;
}
#panel-4-P:checked ~ .puzzleBody .panelMoveArea--4 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-4-P:checked ~ .puzzleBody .panelMoveArea--4 .label--L::before {
    transform: rotate(-90deg);
}
#panel-4-P:checked ~ .puzzleBody .panelMoveArea--4 .label--O {
    left: -100%;
    right: auto;
}
#panel-4-P:checked ~ .puzzleBody .panelMoveArea--4 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-5:checked ~ .puzzleBody .panelMoveArea--5 {
    z-index: 1;
    overflow: visible;
}
#panelMove-5:checked ~ .puzzleBody .panelMoveArea--5 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-5-A:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 0;
    left: 0;
}
#panel-5-A:checked ~ .puzzleBody .panelMoveArea--5 .label--B {
    left: auto;
    right: -100%;
}
#panel-5-A:checked ~ .puzzleBody .panelMoveArea--5 .label--B::before {
    transform: rotate(0);
}
#panel-5-A:checked ~ .puzzleBody .panelMoveArea--5 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-5-A:checked ~ .puzzleBody .panelMoveArea--5 .label--E::before {
    transform: rotate(90deg);
}

#panel-5-B:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 0;
    left: 25%;
}
#panel-5-B:checked ~ .puzzleBody .panelMoveArea--5 .label--A {
    left: -100%;
    right: auto;
}
#panel-5-B:checked ~ .puzzleBody .panelMoveArea--5 .label--A::before {
    transform: rotate(180deg);
}
#panel-5-B:checked ~ .puzzleBody .panelMoveArea--5 .label--C {
    left: auto;
    right: -100%;
}
#panel-5-B:checked ~ .puzzleBody .panelMoveArea--5 .label--C::before {
    transform: rotate(0);
}
#panel-5-B:checked ~ .puzzleBody .panelMoveArea--5 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-5-B:checked ~ .puzzleBody .panelMoveArea--5 .label--F::before {
    transform: rotate(90deg);
}

#panel-5-C:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 0;
    left: 50%;
}
#panel-5-C:checked ~ .puzzleBody .panelMoveArea--5 .label--B {
    left: -100%;
    right: auto;
}
#panel-5-C:checked ~ .puzzleBody .panelMoveArea--5 .label--B::before {
    transform: rotate(180deg);
}
#panel-5-C:checked ~ .puzzleBody .panelMoveArea--5 .label--D {
    left: auto;
    right: -100%;
}
#panel-5-C:checked ~ .puzzleBody .panelMoveArea--5 .label--D::before {
    transform: rotate(0);
}
#panel-5-C:checked ~ .puzzleBody .panelMoveArea--5 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-5-C:checked ~ .puzzleBody .panelMoveArea--5 .label--G::before {
    transform: rotate(90deg);
}

#panel-5-D:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 0;
    left: 75%;
}
#panel-5-D:checked ~ .puzzleBody .panelMoveArea--5 .label--C {
    left: -100%;
    right: auto;
}
#panel-5-D:checked ~ .puzzleBody .panelMoveArea--5 .label--C::before {
    transform: rotate(180deg);
}
#panel-5-D:checked ~ .puzzleBody .panelMoveArea--5 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-5-D:checked ~ .puzzleBody .panelMoveArea--5 .label--H::before {
    transform: rotate(90deg);
}

#panel-5-E:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 25%;
    left: 0;
}
#panel-5-E:checked ~ .puzzleBody .panelMoveArea--5 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-5-E:checked ~ .puzzleBody .panelMoveArea--5 .label--A::before {
    transform: rotate(-90deg);
}
#panel-5-E:checked ~ .puzzleBody .panelMoveArea--5 .label--F {
    left: auto;
    right: -100%;
}
#panel-5-E:checked ~ .puzzleBody .panelMoveArea--5 .label--F::before {
    transform: rotate(0);
}
#panel-5-E:checked ~ .puzzleBody .panelMoveArea--5 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-5-E:checked ~ .puzzleBody .panelMoveArea--5 .label--I::before {
    transform: rotate(90deg);
}

#panel-5-F:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 25%;
    left: 25%;
}
#panel-5-F:checked ~ .puzzleBody .panelMoveArea--5 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-5-F:checked ~ .puzzleBody .panelMoveArea--5 .label--B::before {
    transform: rotate(-90deg);
}
#panel-5-F:checked ~ .puzzleBody .panelMoveArea--5 .label--E {
    left: -100%;
    right: auto;
}
#panel-5-F:checked ~ .puzzleBody .panelMoveArea--5 .label--E::before {
    transform: rotate(180deg);
}
#panel-5-F:checked ~ .puzzleBody .panelMoveArea--5 .label--G {
    left: auto;
    right: -100%;
}
#panel-5-F:checked ~ .puzzleBody .panelMoveArea--5 .label--G::before {
    transform: rotate(0);
}
#panel-5-F:checked ~ .puzzleBody .panelMoveArea--5 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-5-F:checked ~ .puzzleBody .panelMoveArea--5 .label--J::before {
    transform: rotate(90deg);
}

#panel-5-G:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 25%;
    left: 50%;
}
#panel-5-G:checked ~ .puzzleBody .panelMoveArea--5 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-5-G:checked ~ .puzzleBody .panelMoveArea--5 .label--C::before {
    transform: rotate(-90deg);
}
#panel-5-G:checked ~ .puzzleBody .panelMoveArea--5 .label--F {
    left: -100%;
    right: auto;
}
#panel-5-G:checked ~ .puzzleBody .panelMoveArea--5 .label--F::before {
    transform: rotate(180deg);
}
#panel-5-G:checked ~ .puzzleBody .panelMoveArea--5 .label--H {
    left: auto;
    right: -100%;
}
#panel-5-G:checked ~ .puzzleBody .panelMoveArea--5 .label--H::before {
    transform: rotate(0);
}
#panel-5-G:checked ~ .puzzleBody .panelMoveArea--5 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-5-G:checked ~ .puzzleBody .panelMoveArea--5 .label--K::before {
    transform: rotate(90deg);
}

#panel-5-H:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 25%;
    left: 75%;
}
#panel-5-H:checked ~ .puzzleBody .panelMoveArea--5 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-5-H:checked ~ .puzzleBody .panelMoveArea--5 .label--D::before {
    transform: rotate(-90deg);
}
#panel-5-H:checked ~ .puzzleBody .panelMoveArea--5 .label--G {
    left: -100%;
    right: auto;
}
#panel-5-H:checked ~ .puzzleBody .panelMoveArea--5 .label--G::before {
    transform: rotate(180deg);
}
#panel-5-H:checked ~ .puzzleBody .panelMoveArea--5 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-5-H:checked ~ .puzzleBody .panelMoveArea--5 .label--L::before {
    transform: rotate(90deg);
}

#panel-5-I:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 50%;
    left: 0;
}
#panel-5-I:checked ~ .puzzleBody .panelMoveArea--5 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-5-I:checked ~ .puzzleBody .panelMoveArea--5 .label--E::before {
    transform: rotate(-90deg);
}
#panel-5-I:checked ~ .puzzleBody .panelMoveArea--5 .label--J {
    left: auto;
    right: -100%;
}
#panel-5-I:checked ~ .puzzleBody .panelMoveArea--5 .label--J::before {
    transform: rotate(0);
}
#panel-5-I:checked ~ .puzzleBody .panelMoveArea--5 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-5-I:checked ~ .puzzleBody .panelMoveArea--5 .label--M::before {
    transform: rotate(90deg);
}

#panel-5-J:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 50%;
    left: 25%;
}
#panel-5-J:checked ~ .puzzleBody .panelMoveArea--5 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-5-J:checked ~ .puzzleBody .panelMoveArea--5 .label--F::before {
    transform: rotate(-90deg);
}
#panel-5-J:checked ~ .puzzleBody .panelMoveArea--5 .label--I {
    left: -100%;
    right: auto;
}
#panel-5-J:checked ~ .puzzleBody .panelMoveArea--5 .label--I::before {
    transform: rotate(180deg);
}
#panel-5-J:checked ~ .puzzleBody .panelMoveArea--5 .label--K {
    left: auto;
    right: -100%;
}
#panel-5-J:checked ~ .puzzleBody .panelMoveArea--5 .label--K::before {
    transform: rotate(0);
}
#panel-5-J:checked ~ .puzzleBody .panelMoveArea--5 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-5-J:checked ~ .puzzleBody .panelMoveArea--5 .label--N::before {
    transform: rotate(90deg);
}

#panel-5-K:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 50%;
    left: 50%;
}
#panel-5-K:checked ~ .puzzleBody .panelMoveArea--5 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-5-K:checked ~ .puzzleBody .panelMoveArea--5 .label--G::before {
    transform: rotate(-90deg);
}
#panel-5-K:checked ~ .puzzleBody .panelMoveArea--5 .label--J {
    left: -100%;
    right: auto;
}
#panel-5-K:checked ~ .puzzleBody .panelMoveArea--5 .label--J::before {
    transform: rotate(180deg);
}
#panel-5-K:checked ~ .puzzleBody .panelMoveArea--5 .label--L {
    left: auto;
    right: -100%;
}
#panel-5-K:checked ~ .puzzleBody .panelMoveArea--5 .label--L::before {
    transform: rotate(0);
}
#panel-5-K:checked ~ .puzzleBody .panelMoveArea--5 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-5-K:checked ~ .puzzleBody .panelMoveArea--5 .label--O::before {
    transform: rotate(90deg);
}

#panel-5-L:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 50%;
    left: 75%;
}
#panel-5-L:checked ~ .puzzleBody .panelMoveArea--5 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-5-L:checked ~ .puzzleBody .panelMoveArea--5 .label--H::before {
    transform: rotate(-90deg);
}
#panel-5-L:checked ~ .puzzleBody .panelMoveArea--5 .label--K {
    left: -100%;
    right: auto;
}
#panel-5-L:checked ~ .puzzleBody .panelMoveArea--5 .label--K::before {
    transform: rotate(180deg);
}
#panel-5-L:checked ~ .puzzleBody .panelMoveArea--5 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-5-L:checked ~ .puzzleBody .panelMoveArea--5 .label--P::before {
    transform: rotate(90deg);
}

#panel-5-M:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 75%;
    left: 0;
}
#panel-5-M:checked ~ .puzzleBody .panelMoveArea--5 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-5-M:checked ~ .puzzleBody .panelMoveArea--5 .label--I::before {
    transform: rotate(-90deg);
}
#panel-5-M:checked ~ .puzzleBody .panelMoveArea--5 .label--N {
    left: auto;
    right: -100%;
}
#panel-5-M:checked ~ .puzzleBody .panelMoveArea--5 .label--N::before {
    transform: rotate(0);
}

#panel-5-N:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 75%;
    left: 25%;
}
#panel-5-N:checked ~ .puzzleBody .panelMoveArea--5 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-5-N:checked ~ .puzzleBody .panelMoveArea--5 .label--J::before {
    transform: rotate(-90deg);
}
#panel-5-N:checked ~ .puzzleBody .panelMoveArea--5 .label--M {
    left: -100%;
    right: auto;
}
#panel-5-N:checked ~ .puzzleBody .panelMoveArea--5 .label--M::before {
    transform: rotate(180deg);
}
#panel-5-N:checked ~ .puzzleBody .panelMoveArea--5 .label--O {
    left: auto;
    right: -100%;
}
#panel-5-N:checked ~ .puzzleBody .panelMoveArea--5 .label--O::before {
    transform: rotate(0);
}

#panel-5-O:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 75%;
    left: 50%;
}
#panel-5-O:checked ~ .puzzleBody .panelMoveArea--5 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-5-O:checked ~ .puzzleBody .panelMoveArea--5 .label--K::before {
    transform: rotate(-90deg);
}
#panel-5-O:checked ~ .puzzleBody .panelMoveArea--5 .label--N {
    left: -100%;
    right: auto;
}
#panel-5-O:checked ~ .puzzleBody .panelMoveArea--5 .label--N::before {
    transform: rotate(180deg);
}
#panel-5-O:checked ~ .puzzleBody .panelMoveArea--5 .label--P {
    left: auto;
    right: -100%;
}
#panel-5-O:checked ~ .puzzleBody .panelMoveArea--5 .label--P::before {
    transform: rotate(0);
}

#panel-5-P:checked ~ .puzzleBody .panelMoveArea--5 {
    top: 75%;
    left: 75%;
}
#panel-5-P:checked ~ .puzzleBody .panelMoveArea--5 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-5-P:checked ~ .puzzleBody .panelMoveArea--5 .label--L::before {
    transform: rotate(-90deg);
}
#panel-5-P:checked ~ .puzzleBody .panelMoveArea--5 .label--O {
    left: -100%;
    right: auto;
}
#panel-5-P:checked ~ .puzzleBody .panelMoveArea--5 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-6:checked ~ .puzzleBody .panelMoveArea--6 {
    z-index: 1;
    overflow: visible;
}
#panelMove-6:checked ~ .puzzleBody .panelMoveArea--6 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-6-A:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 0;
    left: 0;
}
#panel-6-A:checked ~ .puzzleBody .panelMoveArea--6 .label--B {
    left: auto;
    right: -100%;
}
#panel-6-A:checked ~ .puzzleBody .panelMoveArea--6 .label--B::before {
    transform: rotate(0);
}
#panel-6-A:checked ~ .puzzleBody .panelMoveArea--6 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-6-A:checked ~ .puzzleBody .panelMoveArea--6 .label--E::before {
    transform: rotate(90deg);
}

#panel-6-B:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 0;
    left: 25%;
}
#panel-6-B:checked ~ .puzzleBody .panelMoveArea--6 .label--A {
    left: -100%;
    right: auto;
}
#panel-6-B:checked ~ .puzzleBody .panelMoveArea--6 .label--A::before {
    transform: rotate(180deg);
}
#panel-6-B:checked ~ .puzzleBody .panelMoveArea--6 .label--C {
    left: auto;
    right: -100%;
}
#panel-6-B:checked ~ .puzzleBody .panelMoveArea--6 .label--C::before {
    transform: rotate(0);
}
#panel-6-B:checked ~ .puzzleBody .panelMoveArea--6 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-6-B:checked ~ .puzzleBody .panelMoveArea--6 .label--F::before {
    transform: rotate(90deg);
}

#panel-6-C:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 0;
    left: 50%;
}
#panel-6-C:checked ~ .puzzleBody .panelMoveArea--6 .label--B {
    left: -100%;
    right: auto;
}
#panel-6-C:checked ~ .puzzleBody .panelMoveArea--6 .label--B::before {
    transform: rotate(180deg);
}
#panel-6-C:checked ~ .puzzleBody .panelMoveArea--6 .label--D {
    left: auto;
    right: -100%;
}
#panel-6-C:checked ~ .puzzleBody .panelMoveArea--6 .label--D::before {
    transform: rotate(0);
}
#panel-6-C:checked ~ .puzzleBody .panelMoveArea--6 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-6-C:checked ~ .puzzleBody .panelMoveArea--6 .label--G::before {
    transform: rotate(90deg);
}

#panel-6-D:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 0;
    left: 75%;
}
#panel-6-D:checked ~ .puzzleBody .panelMoveArea--6 .label--C {
    left: -100%;
    right: auto;
}
#panel-6-D:checked ~ .puzzleBody .panelMoveArea--6 .label--C::before {
    transform: rotate(180deg);
}
#panel-6-D:checked ~ .puzzleBody .panelMoveArea--6 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-6-D:checked ~ .puzzleBody .panelMoveArea--6 .label--H::before {
    transform: rotate(90deg);
}

#panel-6-E:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 25%;
    left: 0;
}
#panel-6-E:checked ~ .puzzleBody .panelMoveArea--6 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-6-E:checked ~ .puzzleBody .panelMoveArea--6 .label--A::before {
    transform: rotate(-90deg);
}
#panel-6-E:checked ~ .puzzleBody .panelMoveArea--6 .label--F {
    left: auto;
    right: -100%;
}
#panel-6-E:checked ~ .puzzleBody .panelMoveArea--6 .label--F::before {
    transform: rotate(0);
}
#panel-6-E:checked ~ .puzzleBody .panelMoveArea--6 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-6-E:checked ~ .puzzleBody .panelMoveArea--6 .label--I::before {
    transform: rotate(90deg);
}

#panel-6-F:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 25%;
    left: 25%;
}
#panel-6-F:checked ~ .puzzleBody .panelMoveArea--6 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-6-F:checked ~ .puzzleBody .panelMoveArea--6 .label--B::before {
    transform: rotate(-90deg);
}
#panel-6-F:checked ~ .puzzleBody .panelMoveArea--6 .label--E {
    left: -100%;
    right: auto;
}
#panel-6-F:checked ~ .puzzleBody .panelMoveArea--6 .label--E::before {
    transform: rotate(180deg);
}
#panel-6-F:checked ~ .puzzleBody .panelMoveArea--6 .label--G {
    left: auto;
    right: -100%;
}
#panel-6-F:checked ~ .puzzleBody .panelMoveArea--6 .label--G::before {
    transform: rotate(0);
}
#panel-6-F:checked ~ .puzzleBody .panelMoveArea--6 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-6-F:checked ~ .puzzleBody .panelMoveArea--6 .label--J::before {
    transform: rotate(90deg);
}

#panel-6-G:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 25%;
    left: 50%;
}
#panel-6-G:checked ~ .puzzleBody .panelMoveArea--6 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-6-G:checked ~ .puzzleBody .panelMoveArea--6 .label--C::before {
    transform: rotate(-90deg);
}
#panel-6-G:checked ~ .puzzleBody .panelMoveArea--6 .label--F {
    left: -100%;
    right: auto;
}
#panel-6-G:checked ~ .puzzleBody .panelMoveArea--6 .label--F::before {
    transform: rotate(180deg);
}
#panel-6-G:checked ~ .puzzleBody .panelMoveArea--6 .label--H {
    left: auto;
    right: -100%;
}
#panel-6-G:checked ~ .puzzleBody .panelMoveArea--6 .label--H::before {
    transform: rotate(0);
}
#panel-6-G:checked ~ .puzzleBody .panelMoveArea--6 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-6-G:checked ~ .puzzleBody .panelMoveArea--6 .label--K::before {
    transform: rotate(90deg);
}

#panel-6-H:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 25%;
    left: 75%;
}
#panel-6-H:checked ~ .puzzleBody .panelMoveArea--6 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-6-H:checked ~ .puzzleBody .panelMoveArea--6 .label--D::before {
    transform: rotate(-90deg);
}
#panel-6-H:checked ~ .puzzleBody .panelMoveArea--6 .label--G {
    left: -100%;
    right: auto;
}
#panel-6-H:checked ~ .puzzleBody .panelMoveArea--6 .label--G::before {
    transform: rotate(180deg);
}
#panel-6-H:checked ~ .puzzleBody .panelMoveArea--6 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-6-H:checked ~ .puzzleBody .panelMoveArea--6 .label--L::before {
    transform: rotate(90deg);
}

#panel-6-I:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 50%;
    left: 0;
}
#panel-6-I:checked ~ .puzzleBody .panelMoveArea--6 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-6-I:checked ~ .puzzleBody .panelMoveArea--6 .label--E::before {
    transform: rotate(-90deg);
}
#panel-6-I:checked ~ .puzzleBody .panelMoveArea--6 .label--J {
    left: auto;
    right: -100%;
}
#panel-6-I:checked ~ .puzzleBody .panelMoveArea--6 .label--J::before {
    transform: rotate(0);
}
#panel-6-I:checked ~ .puzzleBody .panelMoveArea--6 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-6-I:checked ~ .puzzleBody .panelMoveArea--6 .label--M::before {
    transform: rotate(90deg);
}

#panel-6-J:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 50%;
    left: 25%;
}
#panel-6-J:checked ~ .puzzleBody .panelMoveArea--6 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-6-J:checked ~ .puzzleBody .panelMoveArea--6 .label--F::before {
    transform: rotate(-90deg);
}
#panel-6-J:checked ~ .puzzleBody .panelMoveArea--6 .label--I {
    left: -100%;
    right: auto;
}
#panel-6-J:checked ~ .puzzleBody .panelMoveArea--6 .label--I::before {
    transform: rotate(180deg);
}
#panel-6-J:checked ~ .puzzleBody .panelMoveArea--6 .label--K {
    left: auto;
    right: -100%;
}
#panel-6-J:checked ~ .puzzleBody .panelMoveArea--6 .label--K::before {
    transform: rotate(0);
}
#panel-6-J:checked ~ .puzzleBody .panelMoveArea--6 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-6-J:checked ~ .puzzleBody .panelMoveArea--6 .label--N::before {
    transform: rotate(90deg);
}

#panel-6-K:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 50%;
    left: 50%;
}
#panel-6-K:checked ~ .puzzleBody .panelMoveArea--6 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-6-K:checked ~ .puzzleBody .panelMoveArea--6 .label--G::before {
    transform: rotate(-90deg);
}
#panel-6-K:checked ~ .puzzleBody .panelMoveArea--6 .label--J {
    left: -100%;
    right: auto;
}
#panel-6-K:checked ~ .puzzleBody .panelMoveArea--6 .label--J::before {
    transform: rotate(180deg);
}
#panel-6-K:checked ~ .puzzleBody .panelMoveArea--6 .label--L {
    left: auto;
    right: -100%;
}
#panel-6-K:checked ~ .puzzleBody .panelMoveArea--6 .label--L::before {
    transform: rotate(0);
}
#panel-6-K:checked ~ .puzzleBody .panelMoveArea--6 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-6-K:checked ~ .puzzleBody .panelMoveArea--6 .label--O::before {
    transform: rotate(90deg);
}

#panel-6-L:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 50%;
    left: 75%;
}
#panel-6-L:checked ~ .puzzleBody .panelMoveArea--6 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-6-L:checked ~ .puzzleBody .panelMoveArea--6 .label--H::before {
    transform: rotate(-90deg);
}
#panel-6-L:checked ~ .puzzleBody .panelMoveArea--6 .label--K {
    left: -100%;
    right: auto;
}
#panel-6-L:checked ~ .puzzleBody .panelMoveArea--6 .label--K::before {
    transform: rotate(180deg);
}
#panel-6-L:checked ~ .puzzleBody .panelMoveArea--6 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-6-L:checked ~ .puzzleBody .panelMoveArea--6 .label--P::before {
    transform: rotate(90deg);
}

#panel-6-M:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 75%;
    left: 0;
}
#panel-6-M:checked ~ .puzzleBody .panelMoveArea--6 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-6-M:checked ~ .puzzleBody .panelMoveArea--6 .label--I::before {
    transform: rotate(-90deg);
}
#panel-6-M:checked ~ .puzzleBody .panelMoveArea--6 .label--N {
    left: auto;
    right: -100%;
}
#panel-6-M:checked ~ .puzzleBody .panelMoveArea--6 .label--N::before {
    transform: rotate(0);
}

#panel-6-N:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 75%;
    left: 25%;
}
#panel-6-N:checked ~ .puzzleBody .panelMoveArea--6 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-6-N:checked ~ .puzzleBody .panelMoveArea--6 .label--J::before {
    transform: rotate(-90deg);
}
#panel-6-N:checked ~ .puzzleBody .panelMoveArea--6 .label--M {
    left: -100%;
    right: auto;
}
#panel-6-N:checked ~ .puzzleBody .panelMoveArea--6 .label--M::before {
    transform: rotate(180deg);
}
#panel-6-N:checked ~ .puzzleBody .panelMoveArea--6 .label--O {
    left: auto;
    right: -100%;
}
#panel-6-N:checked ~ .puzzleBody .panelMoveArea--6 .label--O::before {
    transform: rotate(0);
}

#panel-6-O:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 75%;
    left: 50%;
}
#panel-6-O:checked ~ .puzzleBody .panelMoveArea--6 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-6-O:checked ~ .puzzleBody .panelMoveArea--6 .label--K::before {
    transform: rotate(-90deg);
}
#panel-6-O:checked ~ .puzzleBody .panelMoveArea--6 .label--N {
    left: -100%;
    right: auto;
}
#panel-6-O:checked ~ .puzzleBody .panelMoveArea--6 .label--N::before {
    transform: rotate(180deg);
}
#panel-6-O:checked ~ .puzzleBody .panelMoveArea--6 .label--P {
    left: auto;
    right: -100%;
}
#panel-6-O:checked ~ .puzzleBody .panelMoveArea--6 .label--P::before {
    transform: rotate(0);
}

#panel-6-P:checked ~ .puzzleBody .panelMoveArea--6 {
    top: 75%;
    left: 75%;
}
#panel-6-P:checked ~ .puzzleBody .panelMoveArea--6 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-6-P:checked ~ .puzzleBody .panelMoveArea--6 .label--L::before {
    transform: rotate(-90deg);
}
#panel-6-P:checked ~ .puzzleBody .panelMoveArea--6 .label--O {
    left: -100%;
    right: auto;
}
#panel-6-P:checked ~ .puzzleBody .panelMoveArea--6 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-7:checked ~ .puzzleBody .panelMoveArea--7 {
    z-index: 1;
    overflow: visible;
}
#panelMove-7:checked ~ .puzzleBody .panelMoveArea--7 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-7-A:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 0;
    left: 0;
}
#panel-7-A:checked ~ .puzzleBody .panelMoveArea--7 .label--B {
    left: auto;
    right: -100%;
}
#panel-7-A:checked ~ .puzzleBody .panelMoveArea--7 .label--B::before {
    transform: rotate(0);
}
#panel-7-A:checked ~ .puzzleBody .panelMoveArea--7 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-7-A:checked ~ .puzzleBody .panelMoveArea--7 .label--E::before {
    transform: rotate(90deg);
}

#panel-7-B:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 0;
    left: 25%;
}
#panel-7-B:checked ~ .puzzleBody .panelMoveArea--7 .label--A {
    left: -100%;
    right: auto;
}
#panel-7-B:checked ~ .puzzleBody .panelMoveArea--7 .label--A::before {
    transform: rotate(180deg);
}
#panel-7-B:checked ~ .puzzleBody .panelMoveArea--7 .label--C {
    left: auto;
    right: -100%;
}
#panel-7-B:checked ~ .puzzleBody .panelMoveArea--7 .label--C::before {
    transform: rotate(0);
}
#panel-7-B:checked ~ .puzzleBody .panelMoveArea--7 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-7-B:checked ~ .puzzleBody .panelMoveArea--7 .label--F::before {
    transform: rotate(90deg);
}

#panel-7-C:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 0;
    left: 50%;
}
#panel-7-C:checked ~ .puzzleBody .panelMoveArea--7 .label--B {
    left: -100%;
    right: auto;
}
#panel-7-C:checked ~ .puzzleBody .panelMoveArea--7 .label--B::before {
    transform: rotate(180deg);
}
#panel-7-C:checked ~ .puzzleBody .panelMoveArea--7 .label--D {
    left: auto;
    right: -100%;
}
#panel-7-C:checked ~ .puzzleBody .panelMoveArea--7 .label--D::before {
    transform: rotate(0);
}
#panel-7-C:checked ~ .puzzleBody .panelMoveArea--7 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-7-C:checked ~ .puzzleBody .panelMoveArea--7 .label--G::before {
    transform: rotate(90deg);
}

#panel-7-D:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 0;
    left: 75%;
}
#panel-7-D:checked ~ .puzzleBody .panelMoveArea--7 .label--C {
    left: -100%;
    right: auto;
}
#panel-7-D:checked ~ .puzzleBody .panelMoveArea--7 .label--C::before {
    transform: rotate(180deg);
}
#panel-7-D:checked ~ .puzzleBody .panelMoveArea--7 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-7-D:checked ~ .puzzleBody .panelMoveArea--7 .label--H::before {
    transform: rotate(90deg);
}

#panel-7-E:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 25%;
    left: 0;
}
#panel-7-E:checked ~ .puzzleBody .panelMoveArea--7 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-7-E:checked ~ .puzzleBody .panelMoveArea--7 .label--A::before {
    transform: rotate(-90deg);
}
#panel-7-E:checked ~ .puzzleBody .panelMoveArea--7 .label--F {
    left: auto;
    right: -100%;
}
#panel-7-E:checked ~ .puzzleBody .panelMoveArea--7 .label--F::before {
    transform: rotate(0);
}
#panel-7-E:checked ~ .puzzleBody .panelMoveArea--7 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-7-E:checked ~ .puzzleBody .panelMoveArea--7 .label--I::before {
    transform: rotate(90deg);
}

#panel-7-F:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 25%;
    left: 25%;
}
#panel-7-F:checked ~ .puzzleBody .panelMoveArea--7 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-7-F:checked ~ .puzzleBody .panelMoveArea--7 .label--B::before {
    transform: rotate(-90deg);
}
#panel-7-F:checked ~ .puzzleBody .panelMoveArea--7 .label--E {
    left: -100%;
    right: auto;
}
#panel-7-F:checked ~ .puzzleBody .panelMoveArea--7 .label--E::before {
    transform: rotate(180deg);
}
#panel-7-F:checked ~ .puzzleBody .panelMoveArea--7 .label--G {
    left: auto;
    right: -100%;
}
#panel-7-F:checked ~ .puzzleBody .panelMoveArea--7 .label--G::before {
    transform: rotate(0);
}
#panel-7-F:checked ~ .puzzleBody .panelMoveArea--7 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-7-F:checked ~ .puzzleBody .panelMoveArea--7 .label--J::before {
    transform: rotate(90deg);
}

#panel-7-G:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 25%;
    left: 50%;
}
#panel-7-G:checked ~ .puzzleBody .panelMoveArea--7 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-7-G:checked ~ .puzzleBody .panelMoveArea--7 .label--C::before {
    transform: rotate(-90deg);
}
#panel-7-G:checked ~ .puzzleBody .panelMoveArea--7 .label--F {
    left: -100%;
    right: auto;
}
#panel-7-G:checked ~ .puzzleBody .panelMoveArea--7 .label--F::before {
    transform: rotate(180deg);
}
#panel-7-G:checked ~ .puzzleBody .panelMoveArea--7 .label--H {
    left: auto;
    right: -100%;
}
#panel-7-G:checked ~ .puzzleBody .panelMoveArea--7 .label--H::before {
    transform: rotate(0);
}
#panel-7-G:checked ~ .puzzleBody .panelMoveArea--7 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-7-G:checked ~ .puzzleBody .panelMoveArea--7 .label--K::before {
    transform: rotate(90deg);
}

#panel-7-H:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 25%;
    left: 75%;
}
#panel-7-H:checked ~ .puzzleBody .panelMoveArea--7 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-7-H:checked ~ .puzzleBody .panelMoveArea--7 .label--D::before {
    transform: rotate(-90deg);
}
#panel-7-H:checked ~ .puzzleBody .panelMoveArea--7 .label--G {
    left: -100%;
    right: auto;
}
#panel-7-H:checked ~ .puzzleBody .panelMoveArea--7 .label--G::before {
    transform: rotate(180deg);
}
#panel-7-H:checked ~ .puzzleBody .panelMoveArea--7 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-7-H:checked ~ .puzzleBody .panelMoveArea--7 .label--L::before {
    transform: rotate(90deg);
}

#panel-7-I:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 50%;
    left: 0;
}
#panel-7-I:checked ~ .puzzleBody .panelMoveArea--7 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-7-I:checked ~ .puzzleBody .panelMoveArea--7 .label--E::before {
    transform: rotate(-90deg);
}
#panel-7-I:checked ~ .puzzleBody .panelMoveArea--7 .label--J {
    left: auto;
    right: -100%;
}
#panel-7-I:checked ~ .puzzleBody .panelMoveArea--7 .label--J::before {
    transform: rotate(0);
}
#panel-7-I:checked ~ .puzzleBody .panelMoveArea--7 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-7-I:checked ~ .puzzleBody .panelMoveArea--7 .label--M::before {
    transform: rotate(90deg);
}

#panel-7-J:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 50%;
    left: 25%;
}
#panel-7-J:checked ~ .puzzleBody .panelMoveArea--7 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-7-J:checked ~ .puzzleBody .panelMoveArea--7 .label--F::before {
    transform: rotate(-90deg);
}
#panel-7-J:checked ~ .puzzleBody .panelMoveArea--7 .label--I {
    left: -100%;
    right: auto;
}
#panel-7-J:checked ~ .puzzleBody .panelMoveArea--7 .label--I::before {
    transform: rotate(180deg);
}
#panel-7-J:checked ~ .puzzleBody .panelMoveArea--7 .label--K {
    left: auto;
    right: -100%;
}
#panel-7-J:checked ~ .puzzleBody .panelMoveArea--7 .label--K::before {
    transform: rotate(0);
}
#panel-7-J:checked ~ .puzzleBody .panelMoveArea--7 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-7-J:checked ~ .puzzleBody .panelMoveArea--7 .label--N::before {
    transform: rotate(90deg);
}

#panel-7-K:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 50%;
    left: 50%;
}
#panel-7-K:checked ~ .puzzleBody .panelMoveArea--7 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-7-K:checked ~ .puzzleBody .panelMoveArea--7 .label--G::before {
    transform: rotate(-90deg);
}
#panel-7-K:checked ~ .puzzleBody .panelMoveArea--7 .label--J {
    left: -100%;
    right: auto;
}
#panel-7-K:checked ~ .puzzleBody .panelMoveArea--7 .label--J::before {
    transform: rotate(180deg);
}
#panel-7-K:checked ~ .puzzleBody .panelMoveArea--7 .label--L {
    left: auto;
    right: -100%;
}
#panel-7-K:checked ~ .puzzleBody .panelMoveArea--7 .label--L::before {
    transform: rotate(0);
}
#panel-7-K:checked ~ .puzzleBody .panelMoveArea--7 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-7-K:checked ~ .puzzleBody .panelMoveArea--7 .label--O::before {
    transform: rotate(90deg);
}

#panel-7-L:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 50%;
    left: 75%;
}
#panel-7-L:checked ~ .puzzleBody .panelMoveArea--7 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-7-L:checked ~ .puzzleBody .panelMoveArea--7 .label--H::before {
    transform: rotate(-90deg);
}
#panel-7-L:checked ~ .puzzleBody .panelMoveArea--7 .label--K {
    left: -100%;
    right: auto;
}
#panel-7-L:checked ~ .puzzleBody .panelMoveArea--7 .label--K::before {
    transform: rotate(180deg);
}
#panel-7-L:checked ~ .puzzleBody .panelMoveArea--7 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-7-L:checked ~ .puzzleBody .panelMoveArea--7 .label--P::before {
    transform: rotate(90deg);
}

#panel-7-M:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 75%;
    left: 0;
}
#panel-7-M:checked ~ .puzzleBody .panelMoveArea--7 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-7-M:checked ~ .puzzleBody .panelMoveArea--7 .label--I::before {
    transform: rotate(-90deg);
}
#panel-7-M:checked ~ .puzzleBody .panelMoveArea--7 .label--N {
    left: auto;
    right: -100%;
}
#panel-7-M:checked ~ .puzzleBody .panelMoveArea--7 .label--N::before {
    transform: rotate(0);
}

#panel-7-N:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 75%;
    left: 25%;
}
#panel-7-N:checked ~ .puzzleBody .panelMoveArea--7 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-7-N:checked ~ .puzzleBody .panelMoveArea--7 .label--J::before {
    transform: rotate(-90deg);
}
#panel-7-N:checked ~ .puzzleBody .panelMoveArea--7 .label--M {
    left: -100%;
    right: auto;
}
#panel-7-N:checked ~ .puzzleBody .panelMoveArea--7 .label--M::before {
    transform: rotate(180deg);
}
#panel-7-N:checked ~ .puzzleBody .panelMoveArea--7 .label--O {
    left: auto;
    right: -100%;
}
#panel-7-N:checked ~ .puzzleBody .panelMoveArea--7 .label--O::before {
    transform: rotate(0);
}

#panel-7-O:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 75%;
    left: 50%;
}
#panel-7-O:checked ~ .puzzleBody .panelMoveArea--7 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-7-O:checked ~ .puzzleBody .panelMoveArea--7 .label--K::before {
    transform: rotate(-90deg);
}
#panel-7-O:checked ~ .puzzleBody .panelMoveArea--7 .label--N {
    left: -100%;
    right: auto;
}
#panel-7-O:checked ~ .puzzleBody .panelMoveArea--7 .label--N::before {
    transform: rotate(180deg);
}
#panel-7-O:checked ~ .puzzleBody .panelMoveArea--7 .label--P {
    left: auto;
    right: -100%;
}
#panel-7-O:checked ~ .puzzleBody .panelMoveArea--7 .label--P::before {
    transform: rotate(0);
}

#panel-7-P:checked ~ .puzzleBody .panelMoveArea--7 {
    top: 75%;
    left: 75%;
}
#panel-7-P:checked ~ .puzzleBody .panelMoveArea--7 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-7-P:checked ~ .puzzleBody .panelMoveArea--7 .label--L::before {
    transform: rotate(-90deg);
}
#panel-7-P:checked ~ .puzzleBody .panelMoveArea--7 .label--O {
    left: -100%;
    right: auto;
}
#panel-7-P:checked ~ .puzzleBody .panelMoveArea--7 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-8:checked ~ .puzzleBody .panelMoveArea--8 {
    z-index: 1;
    overflow: visible;
}
#panelMove-8:checked ~ .puzzleBody .panelMoveArea--8 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-8-A:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 0;
    left: 0;
}
#panel-8-A:checked ~ .puzzleBody .panelMoveArea--8 .label--B {
    left: auto;
    right: -100%;
}
#panel-8-A:checked ~ .puzzleBody .panelMoveArea--8 .label--B::before {
    transform: rotate(0);
}
#panel-8-A:checked ~ .puzzleBody .panelMoveArea--8 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-8-A:checked ~ .puzzleBody .panelMoveArea--8 .label--E::before {
    transform: rotate(90deg);
}

#panel-8-B:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 0;
    left: 25%;
}
#panel-8-B:checked ~ .puzzleBody .panelMoveArea--8 .label--A {
    left: -100%;
    right: auto;
}
#panel-8-B:checked ~ .puzzleBody .panelMoveArea--8 .label--A::before {
    transform: rotate(180deg);
}
#panel-8-B:checked ~ .puzzleBody .panelMoveArea--8 .label--C {
    left: auto;
    right: -100%;
}
#panel-8-B:checked ~ .puzzleBody .panelMoveArea--8 .label--C::before {
    transform: rotate(0);
}
#panel-8-B:checked ~ .puzzleBody .panelMoveArea--8 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-8-B:checked ~ .puzzleBody .panelMoveArea--8 .label--F::before {
    transform: rotate(90deg);
}

#panel-8-C:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 0;
    left: 50%;
}
#panel-8-C:checked ~ .puzzleBody .panelMoveArea--8 .label--B {
    left: -100%;
    right: auto;
}
#panel-8-C:checked ~ .puzzleBody .panelMoveArea--8 .label--B::before {
    transform: rotate(180deg);
}
#panel-8-C:checked ~ .puzzleBody .panelMoveArea--8 .label--D {
    left: auto;
    right: -100%;
}
#panel-8-C:checked ~ .puzzleBody .panelMoveArea--8 .label--D::before {
    transform: rotate(0);
}
#panel-8-C:checked ~ .puzzleBody .panelMoveArea--8 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-8-C:checked ~ .puzzleBody .panelMoveArea--8 .label--G::before {
    transform: rotate(90deg);
}

#panel-8-D:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 0;
    left: 75%;
}
#panel-8-D:checked ~ .puzzleBody .panelMoveArea--8 .label--C {
    left: -100%;
    right: auto;
}
#panel-8-D:checked ~ .puzzleBody .panelMoveArea--8 .label--C::before {
    transform: rotate(180deg);
}
#panel-8-D:checked ~ .puzzleBody .panelMoveArea--8 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-8-D:checked ~ .puzzleBody .panelMoveArea--8 .label--H::before {
    transform: rotate(90deg);
}

#panel-8-E:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 25%;
    left: 0;
}
#panel-8-E:checked ~ .puzzleBody .panelMoveArea--8 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-8-E:checked ~ .puzzleBody .panelMoveArea--8 .label--A::before {
    transform: rotate(-90deg);
}
#panel-8-E:checked ~ .puzzleBody .panelMoveArea--8 .label--F {
    left: auto;
    right: -100%;
}
#panel-8-E:checked ~ .puzzleBody .panelMoveArea--8 .label--F::before {
    transform: rotate(0);
}
#panel-8-E:checked ~ .puzzleBody .panelMoveArea--8 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-8-E:checked ~ .puzzleBody .panelMoveArea--8 .label--I::before {
    transform: rotate(90deg);
}

#panel-8-F:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 25%;
    left: 25%;
}
#panel-8-F:checked ~ .puzzleBody .panelMoveArea--8 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-8-F:checked ~ .puzzleBody .panelMoveArea--8 .label--B::before {
    transform: rotate(-90deg);
}
#panel-8-F:checked ~ .puzzleBody .panelMoveArea--8 .label--E {
    left: -100%;
    right: auto;
}
#panel-8-F:checked ~ .puzzleBody .panelMoveArea--8 .label--E::before {
    transform: rotate(180deg);
}
#panel-8-F:checked ~ .puzzleBody .panelMoveArea--8 .label--G {
    left: auto;
    right: -100%;
}
#panel-8-F:checked ~ .puzzleBody .panelMoveArea--8 .label--G::before {
    transform: rotate(0);
}
#panel-8-F:checked ~ .puzzleBody .panelMoveArea--8 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-8-F:checked ~ .puzzleBody .panelMoveArea--8 .label--J::before {
    transform: rotate(90deg);
}

#panel-8-G:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 25%;
    left: 50%;
}
#panel-8-G:checked ~ .puzzleBody .panelMoveArea--8 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-8-G:checked ~ .puzzleBody .panelMoveArea--8 .label--C::before {
    transform: rotate(-90deg);
}
#panel-8-G:checked ~ .puzzleBody .panelMoveArea--8 .label--F {
    left: -100%;
    right: auto;
}
#panel-8-G:checked ~ .puzzleBody .panelMoveArea--8 .label--F::before {
    transform: rotate(180deg);
}
#panel-8-G:checked ~ .puzzleBody .panelMoveArea--8 .label--H {
    left: auto;
    right: -100%;
}
#panel-8-G:checked ~ .puzzleBody .panelMoveArea--8 .label--H::before {
    transform: rotate(0);
}
#panel-8-G:checked ~ .puzzleBody .panelMoveArea--8 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-8-G:checked ~ .puzzleBody .panelMoveArea--8 .label--K::before {
    transform: rotate(90deg);
}

#panel-8-H:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 25%;
    left: 75%;
}
#panel-8-H:checked ~ .puzzleBody .panelMoveArea--8 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-8-H:checked ~ .puzzleBody .panelMoveArea--8 .label--D::before {
    transform: rotate(-90deg);
}
#panel-8-H:checked ~ .puzzleBody .panelMoveArea--8 .label--G {
    left: -100%;
    right: auto;
}
#panel-8-H:checked ~ .puzzleBody .panelMoveArea--8 .label--G::before {
    transform: rotate(180deg);
}
#panel-8-H:checked ~ .puzzleBody .panelMoveArea--8 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-8-H:checked ~ .puzzleBody .panelMoveArea--8 .label--L::before {
    transform: rotate(90deg);
}

#panel-8-I:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 50%;
    left: 0;
}
#panel-8-I:checked ~ .puzzleBody .panelMoveArea--8 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-8-I:checked ~ .puzzleBody .panelMoveArea--8 .label--E::before {
    transform: rotate(-90deg);
}
#panel-8-I:checked ~ .puzzleBody .panelMoveArea--8 .label--J {
    left: auto;
    right: -100%;
}
#panel-8-I:checked ~ .puzzleBody .panelMoveArea--8 .label--J::before {
    transform: rotate(0);
}
#panel-8-I:checked ~ .puzzleBody .panelMoveArea--8 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-8-I:checked ~ .puzzleBody .panelMoveArea--8 .label--M::before {
    transform: rotate(90deg);
}

#panel-8-J:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 50%;
    left: 25%;
}
#panel-8-J:checked ~ .puzzleBody .panelMoveArea--8 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-8-J:checked ~ .puzzleBody .panelMoveArea--8 .label--F::before {
    transform: rotate(-90deg);
}
#panel-8-J:checked ~ .puzzleBody .panelMoveArea--8 .label--I {
    left: -100%;
    right: auto;
}
#panel-8-J:checked ~ .puzzleBody .panelMoveArea--8 .label--I::before {
    transform: rotate(180deg);
}
#panel-8-J:checked ~ .puzzleBody .panelMoveArea--8 .label--K {
    left: auto;
    right: -100%;
}
#panel-8-J:checked ~ .puzzleBody .panelMoveArea--8 .label--K::before {
    transform: rotate(0);
}
#panel-8-J:checked ~ .puzzleBody .panelMoveArea--8 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-8-J:checked ~ .puzzleBody .panelMoveArea--8 .label--N::before {
    transform: rotate(90deg);
}

#panel-8-K:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 50%;
    left: 50%;
}
#panel-8-K:checked ~ .puzzleBody .panelMoveArea--8 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-8-K:checked ~ .puzzleBody .panelMoveArea--8 .label--G::before {
    transform: rotate(-90deg);
}
#panel-8-K:checked ~ .puzzleBody .panelMoveArea--8 .label--J {
    left: -100%;
    right: auto;
}
#panel-8-K:checked ~ .puzzleBody .panelMoveArea--8 .label--J::before {
    transform: rotate(180deg);
}
#panel-8-K:checked ~ .puzzleBody .panelMoveArea--8 .label--L {
    left: auto;
    right: -100%;
}
#panel-8-K:checked ~ .puzzleBody .panelMoveArea--8 .label--L::before {
    transform: rotate(0);
}
#panel-8-K:checked ~ .puzzleBody .panelMoveArea--8 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-8-K:checked ~ .puzzleBody .panelMoveArea--8 .label--O::before {
    transform: rotate(90deg);
}

#panel-8-L:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 50%;
    left: 75%;
}
#panel-8-L:checked ~ .puzzleBody .panelMoveArea--8 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-8-L:checked ~ .puzzleBody .panelMoveArea--8 .label--H::before {
    transform: rotate(-90deg);
}
#panel-8-L:checked ~ .puzzleBody .panelMoveArea--8 .label--K {
    left: -100%;
    right: auto;
}
#panel-8-L:checked ~ .puzzleBody .panelMoveArea--8 .label--K::before {
    transform: rotate(180deg);
}
#panel-8-L:checked ~ .puzzleBody .panelMoveArea--8 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-8-L:checked ~ .puzzleBody .panelMoveArea--8 .label--P::before {
    transform: rotate(90deg);
}

#panel-8-M:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 75%;
    left: 0;
}
#panel-8-M:checked ~ .puzzleBody .panelMoveArea--8 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-8-M:checked ~ .puzzleBody .panelMoveArea--8 .label--I::before {
    transform: rotate(-90deg);
}
#panel-8-M:checked ~ .puzzleBody .panelMoveArea--8 .label--N {
    left: auto;
    right: -100%;
}
#panel-8-M:checked ~ .puzzleBody .panelMoveArea--8 .label--N::before {
    transform: rotate(0);
}

#panel-8-N:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 75%;
    left: 25%;
}
#panel-8-N:checked ~ .puzzleBody .panelMoveArea--8 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-8-N:checked ~ .puzzleBody .panelMoveArea--8 .label--J::before {
    transform: rotate(-90deg);
}
#panel-8-N:checked ~ .puzzleBody .panelMoveArea--8 .label--M {
    left: -100%;
    right: auto;
}
#panel-8-N:checked ~ .puzzleBody .panelMoveArea--8 .label--M::before {
    transform: rotate(180deg);
}
#panel-8-N:checked ~ .puzzleBody .panelMoveArea--8 .label--O {
    left: auto;
    right: -100%;
}
#panel-8-N:checked ~ .puzzleBody .panelMoveArea--8 .label--O::before {
    transform: rotate(0);
}

#panel-8-O:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 75%;
    left: 50%;
}
#panel-8-O:checked ~ .puzzleBody .panelMoveArea--8 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-8-O:checked ~ .puzzleBody .panelMoveArea--8 .label--K::before {
    transform: rotate(-90deg);
}
#panel-8-O:checked ~ .puzzleBody .panelMoveArea--8 .label--N {
    left: -100%;
    right: auto;
}
#panel-8-O:checked ~ .puzzleBody .panelMoveArea--8 .label--N::before {
    transform: rotate(180deg);
}
#panel-8-O:checked ~ .puzzleBody .panelMoveArea--8 .label--P {
    left: auto;
    right: -100%;
}
#panel-8-O:checked ~ .puzzleBody .panelMoveArea--8 .label--P::before {
    transform: rotate(0);
}

#panel-8-P:checked ~ .puzzleBody .panelMoveArea--8 {
    top: 75%;
    left: 75%;
}
#panel-8-P:checked ~ .puzzleBody .panelMoveArea--8 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-8-P:checked ~ .puzzleBody .panelMoveArea--8 .label--L::before {
    transform: rotate(-90deg);
}
#panel-8-P:checked ~ .puzzleBody .panelMoveArea--8 .label--O {
    left: -100%;
    right: auto;
}
#panel-8-P:checked ~ .puzzleBody .panelMoveArea--8 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-9:checked ~ .puzzleBody .panelMoveArea--9 {
    z-index: 1;
    overflow: visible;
}
#panelMove-9:checked ~ .puzzleBody .panelMoveArea--9 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-9-A:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 0;
    left: 0;
}
#panel-9-A:checked ~ .puzzleBody .panelMoveArea--9 .label--B {
    left: auto;
    right: -100%;
}
#panel-9-A:checked ~ .puzzleBody .panelMoveArea--9 .label--B::before {
    transform: rotate(0);
}
#panel-9-A:checked ~ .puzzleBody .panelMoveArea--9 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-9-A:checked ~ .puzzleBody .panelMoveArea--9 .label--E::before {
    transform: rotate(90deg);
}

#panel-9-B:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 0;
    left: 25%;
}
#panel-9-B:checked ~ .puzzleBody .panelMoveArea--9 .label--A {
    left: -100%;
    right: auto;
}
#panel-9-B:checked ~ .puzzleBody .panelMoveArea--9 .label--A::before {
    transform: rotate(180deg);
}
#panel-9-B:checked ~ .puzzleBody .panelMoveArea--9 .label--C {
    left: auto;
    right: -100%;
}
#panel-9-B:checked ~ .puzzleBody .panelMoveArea--9 .label--C::before {
    transform: rotate(0);
}
#panel-9-B:checked ~ .puzzleBody .panelMoveArea--9 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-9-B:checked ~ .puzzleBody .panelMoveArea--9 .label--F::before {
    transform: rotate(90deg);
}

#panel-9-C:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 0;
    left: 50%;
}
#panel-9-C:checked ~ .puzzleBody .panelMoveArea--9 .label--B {
    left: -100%;
    right: auto;
}
#panel-9-C:checked ~ .puzzleBody .panelMoveArea--9 .label--B::before {
    transform: rotate(180deg);
}
#panel-9-C:checked ~ .puzzleBody .panelMoveArea--9 .label--D {
    left: auto;
    right: -100%;
}
#panel-9-C:checked ~ .puzzleBody .panelMoveArea--9 .label--D::before {
    transform: rotate(0);
}
#panel-9-C:checked ~ .puzzleBody .panelMoveArea--9 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-9-C:checked ~ .puzzleBody .panelMoveArea--9 .label--G::before {
    transform: rotate(90deg);
}

#panel-9-D:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 0;
    left: 75%;
}
#panel-9-D:checked ~ .puzzleBody .panelMoveArea--9 .label--C {
    left: -100%;
    right: auto;
}
#panel-9-D:checked ~ .puzzleBody .panelMoveArea--9 .label--C::before {
    transform: rotate(180deg);
}
#panel-9-D:checked ~ .puzzleBody .panelMoveArea--9 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-9-D:checked ~ .puzzleBody .panelMoveArea--9 .label--H::before {
    transform: rotate(90deg);
}

#panel-9-E:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 25%;
    left: 0;
}
#panel-9-E:checked ~ .puzzleBody .panelMoveArea--9 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-9-E:checked ~ .puzzleBody .panelMoveArea--9 .label--A::before {
    transform: rotate(-90deg);
}
#panel-9-E:checked ~ .puzzleBody .panelMoveArea--9 .label--F {
    left: auto;
    right: -100%;
}
#panel-9-E:checked ~ .puzzleBody .panelMoveArea--9 .label--F::before {
    transform: rotate(0);
}
#panel-9-E:checked ~ .puzzleBody .panelMoveArea--9 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-9-E:checked ~ .puzzleBody .panelMoveArea--9 .label--I::before {
    transform: rotate(90deg);
}

#panel-9-F:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 25%;
    left: 25%;
}
#panel-9-F:checked ~ .puzzleBody .panelMoveArea--9 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-9-F:checked ~ .puzzleBody .panelMoveArea--9 .label--B::before {
    transform: rotate(-90deg);
}
#panel-9-F:checked ~ .puzzleBody .panelMoveArea--9 .label--E {
    left: -100%;
    right: auto;
}
#panel-9-F:checked ~ .puzzleBody .panelMoveArea--9 .label--E::before {
    transform: rotate(180deg);
}
#panel-9-F:checked ~ .puzzleBody .panelMoveArea--9 .label--G {
    left: auto;
    right: -100%;
}
#panel-9-F:checked ~ .puzzleBody .panelMoveArea--9 .label--G::before {
    transform: rotate(0);
}
#panel-9-F:checked ~ .puzzleBody .panelMoveArea--9 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-9-F:checked ~ .puzzleBody .panelMoveArea--9 .label--J::before {
    transform: rotate(90deg);
}

#panel-9-G:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 25%;
    left: 50%;
}
#panel-9-G:checked ~ .puzzleBody .panelMoveArea--9 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-9-G:checked ~ .puzzleBody .panelMoveArea--9 .label--C::before {
    transform: rotate(-90deg);
}
#panel-9-G:checked ~ .puzzleBody .panelMoveArea--9 .label--F {
    left: -100%;
    right: auto;
}
#panel-9-G:checked ~ .puzzleBody .panelMoveArea--9 .label--F::before {
    transform: rotate(180deg);
}
#panel-9-G:checked ~ .puzzleBody .panelMoveArea--9 .label--H {
    left: auto;
    right: -100%;
}
#panel-9-G:checked ~ .puzzleBody .panelMoveArea--9 .label--H::before {
    transform: rotate(0);
}
#panel-9-G:checked ~ .puzzleBody .panelMoveArea--9 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-9-G:checked ~ .puzzleBody .panelMoveArea--9 .label--K::before {
    transform: rotate(90deg);
}

#panel-9-H:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 25%;
    left: 75%;
}
#panel-9-H:checked ~ .puzzleBody .panelMoveArea--9 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-9-H:checked ~ .puzzleBody .panelMoveArea--9 .label--D::before {
    transform: rotate(-90deg);
}
#panel-9-H:checked ~ .puzzleBody .panelMoveArea--9 .label--G {
    left: -100%;
    right: auto;
}
#panel-9-H:checked ~ .puzzleBody .panelMoveArea--9 .label--G::before {
    transform: rotate(180deg);
}
#panel-9-H:checked ~ .puzzleBody .panelMoveArea--9 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-9-H:checked ~ .puzzleBody .panelMoveArea--9 .label--L::before {
    transform: rotate(90deg);
}

#panel-9-I:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 50%;
    left: 0;
}
#panel-9-I:checked ~ .puzzleBody .panelMoveArea--9 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-9-I:checked ~ .puzzleBody .panelMoveArea--9 .label--E::before {
    transform: rotate(-90deg);
}
#panel-9-I:checked ~ .puzzleBody .panelMoveArea--9 .label--J {
    left: auto;
    right: -100%;
}
#panel-9-I:checked ~ .puzzleBody .panelMoveArea--9 .label--J::before {
    transform: rotate(0);
}
#panel-9-I:checked ~ .puzzleBody .panelMoveArea--9 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-9-I:checked ~ .puzzleBody .panelMoveArea--9 .label--M::before {
    transform: rotate(90deg);
}

#panel-9-J:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 50%;
    left: 25%;
}
#panel-9-J:checked ~ .puzzleBody .panelMoveArea--9 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-9-J:checked ~ .puzzleBody .panelMoveArea--9 .label--F::before {
    transform: rotate(-90deg);
}
#panel-9-J:checked ~ .puzzleBody .panelMoveArea--9 .label--I {
    left: -100%;
    right: auto;
}
#panel-9-J:checked ~ .puzzleBody .panelMoveArea--9 .label--I::before {
    transform: rotate(180deg);
}
#panel-9-J:checked ~ .puzzleBody .panelMoveArea--9 .label--K {
    left: auto;
    right: -100%;
}
#panel-9-J:checked ~ .puzzleBody .panelMoveArea--9 .label--K::before {
    transform: rotate(0);
}
#panel-9-J:checked ~ .puzzleBody .panelMoveArea--9 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-9-J:checked ~ .puzzleBody .panelMoveArea--9 .label--N::before {
    transform: rotate(90deg);
}

#panel-9-K:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 50%;
    left: 50%;
}
#panel-9-K:checked ~ .puzzleBody .panelMoveArea--9 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-9-K:checked ~ .puzzleBody .panelMoveArea--9 .label--G::before {
    transform: rotate(-90deg);
}
#panel-9-K:checked ~ .puzzleBody .panelMoveArea--9 .label--J {
    left: -100%;
    right: auto;
}
#panel-9-K:checked ~ .puzzleBody .panelMoveArea--9 .label--J::before {
    transform: rotate(180deg);
}
#panel-9-K:checked ~ .puzzleBody .panelMoveArea--9 .label--L {
    left: auto;
    right: -100%;
}
#panel-9-K:checked ~ .puzzleBody .panelMoveArea--9 .label--L::before {
    transform: rotate(0);
}
#panel-9-K:checked ~ .puzzleBody .panelMoveArea--9 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-9-K:checked ~ .puzzleBody .panelMoveArea--9 .label--O::before {
    transform: rotate(90deg);
}

#panel-9-L:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 50%;
    left: 75%;
}
#panel-9-L:checked ~ .puzzleBody .panelMoveArea--9 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-9-L:checked ~ .puzzleBody .panelMoveArea--9 .label--H::before {
    transform: rotate(-90deg);
}
#panel-9-L:checked ~ .puzzleBody .panelMoveArea--9 .label--K {
    left: -100%;
    right: auto;
}
#panel-9-L:checked ~ .puzzleBody .panelMoveArea--9 .label--K::before {
    transform: rotate(180deg);
}
#panel-9-L:checked ~ .puzzleBody .panelMoveArea--9 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-9-L:checked ~ .puzzleBody .panelMoveArea--9 .label--P::before {
    transform: rotate(90deg);
}

#panel-9-M:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 75%;
    left: 0;
}
#panel-9-M:checked ~ .puzzleBody .panelMoveArea--9 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-9-M:checked ~ .puzzleBody .panelMoveArea--9 .label--I::before {
    transform: rotate(-90deg);
}
#panel-9-M:checked ~ .puzzleBody .panelMoveArea--9 .label--N {
    left: auto;
    right: -100%;
}
#panel-9-M:checked ~ .puzzleBody .panelMoveArea--9 .label--N::before {
    transform: rotate(0);
}

#panel-9-N:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 75%;
    left: 25%;
}
#panel-9-N:checked ~ .puzzleBody .panelMoveArea--9 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-9-N:checked ~ .puzzleBody .panelMoveArea--9 .label--J::before {
    transform: rotate(-90deg);
}
#panel-9-N:checked ~ .puzzleBody .panelMoveArea--9 .label--M {
    left: -100%;
    right: auto;
}
#panel-9-N:checked ~ .puzzleBody .panelMoveArea--9 .label--M::before {
    transform: rotate(180deg);
}
#panel-9-N:checked ~ .puzzleBody .panelMoveArea--9 .label--O {
    left: auto;
    right: -100%;
}
#panel-9-N:checked ~ .puzzleBody .panelMoveArea--9 .label--O::before {
    transform: rotate(0);
}

#panel-9-O:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 75%;
    left: 50%;
}
#panel-9-O:checked ~ .puzzleBody .panelMoveArea--9 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-9-O:checked ~ .puzzleBody .panelMoveArea--9 .label--K::before {
    transform: rotate(-90deg);
}
#panel-9-O:checked ~ .puzzleBody .panelMoveArea--9 .label--N {
    left: -100%;
    right: auto;
}
#panel-9-O:checked ~ .puzzleBody .panelMoveArea--9 .label--N::before {
    transform: rotate(180deg);
}
#panel-9-O:checked ~ .puzzleBody .panelMoveArea--9 .label--P {
    left: auto;
    right: -100%;
}
#panel-9-O:checked ~ .puzzleBody .panelMoveArea--9 .label--P::before {
    transform: rotate(0);
}

#panel-9-P:checked ~ .puzzleBody .panelMoveArea--9 {
    top: 75%;
    left: 75%;
}
#panel-9-P:checked ~ .puzzleBody .panelMoveArea--9 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-9-P:checked ~ .puzzleBody .panelMoveArea--9 .label--L::before {
    transform: rotate(-90deg);
}
#panel-9-P:checked ~ .puzzleBody .panelMoveArea--9 .label--O {
    left: -100%;
    right: auto;
}
#panel-9-P:checked ~ .puzzleBody .panelMoveArea--9 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-10:checked ~ .puzzleBody .panelMoveArea--10 {
    z-index: 1;
    overflow: visible;
}
#panelMove-10:checked ~ .puzzleBody .panelMoveArea--10 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-10-A:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 0;
    left: 0;
}
#panel-10-A:checked ~ .puzzleBody .panelMoveArea--10 .label--B {
    left: auto;
    right: -100%;
}
#panel-10-A:checked ~ .puzzleBody .panelMoveArea--10 .label--B::before {
    transform: rotate(0);
}
#panel-10-A:checked ~ .puzzleBody .panelMoveArea--10 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-10-A:checked ~ .puzzleBody .panelMoveArea--10 .label--E::before {
    transform: rotate(90deg);
}

#panel-10-B:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 0;
    left: 25%;
}
#panel-10-B:checked ~ .puzzleBody .panelMoveArea--10 .label--A {
    left: -100%;
    right: auto;
}
#panel-10-B:checked ~ .puzzleBody .panelMoveArea--10 .label--A::before {
    transform: rotate(180deg);
}
#panel-10-B:checked ~ .puzzleBody .panelMoveArea--10 .label--C {
    left: auto;
    right: -100%;
}
#panel-10-B:checked ~ .puzzleBody .panelMoveArea--10 .label--C::before {
    transform: rotate(0);
}
#panel-10-B:checked ~ .puzzleBody .panelMoveArea--10 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-10-B:checked ~ .puzzleBody .panelMoveArea--10 .label--F::before {
    transform: rotate(90deg);
}

#panel-10-C:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 0;
    left: 50%;
}
#panel-10-C:checked ~ .puzzleBody .panelMoveArea--10 .label--B {
    left: -100%;
    right: auto;
}
#panel-10-C:checked ~ .puzzleBody .panelMoveArea--10 .label--B::before {
    transform: rotate(180deg);
}
#panel-10-C:checked ~ .puzzleBody .panelMoveArea--10 .label--D {
    left: auto;
    right: -100%;
}
#panel-10-C:checked ~ .puzzleBody .panelMoveArea--10 .label--D::before {
    transform: rotate(0);
}
#panel-10-C:checked ~ .puzzleBody .panelMoveArea--10 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-10-C:checked ~ .puzzleBody .panelMoveArea--10 .label--G::before {
    transform: rotate(90deg);
}

#panel-10-D:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 0;
    left: 75%;
}
#panel-10-D:checked ~ .puzzleBody .panelMoveArea--10 .label--C {
    left: -100%;
    right: auto;
}
#panel-10-D:checked ~ .puzzleBody .panelMoveArea--10 .label--C::before {
    transform: rotate(180deg);
}
#panel-10-D:checked ~ .puzzleBody .panelMoveArea--10 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-10-D:checked ~ .puzzleBody .panelMoveArea--10 .label--H::before {
    transform: rotate(90deg);
}

#panel-10-E:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 25%;
    left: 0;
}
#panel-10-E:checked ~ .puzzleBody .panelMoveArea--10 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-10-E:checked ~ .puzzleBody .panelMoveArea--10 .label--A::before {
    transform: rotate(-90deg);
}
#panel-10-E:checked ~ .puzzleBody .panelMoveArea--10 .label--F {
    left: auto;
    right: -100%;
}
#panel-10-E:checked ~ .puzzleBody .panelMoveArea--10 .label--F::before {
    transform: rotate(0);
}
#panel-10-E:checked ~ .puzzleBody .panelMoveArea--10 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-10-E:checked ~ .puzzleBody .panelMoveArea--10 .label--I::before {
    transform: rotate(90deg);
}

#panel-10-F:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 25%;
    left: 25%;
}
#panel-10-F:checked ~ .puzzleBody .panelMoveArea--10 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-10-F:checked ~ .puzzleBody .panelMoveArea--10 .label--B::before {
    transform: rotate(-90deg);
}
#panel-10-F:checked ~ .puzzleBody .panelMoveArea--10 .label--E {
    left: -100%;
    right: auto;
}
#panel-10-F:checked ~ .puzzleBody .panelMoveArea--10 .label--E::before {
    transform: rotate(180deg);
}
#panel-10-F:checked ~ .puzzleBody .panelMoveArea--10 .label--G {
    left: auto;
    right: -100%;
}
#panel-10-F:checked ~ .puzzleBody .panelMoveArea--10 .label--G::before {
    transform: rotate(0);
}
#panel-10-F:checked ~ .puzzleBody .panelMoveArea--10 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-10-F:checked ~ .puzzleBody .panelMoveArea--10 .label--J::before {
    transform: rotate(90deg);
}

#panel-10-G:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 25%;
    left: 50%;
}
#panel-10-G:checked ~ .puzzleBody .panelMoveArea--10 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-10-G:checked ~ .puzzleBody .panelMoveArea--10 .label--C::before {
    transform: rotate(-90deg);
}
#panel-10-G:checked ~ .puzzleBody .panelMoveArea--10 .label--F {
    left: -100%;
    right: auto;
}
#panel-10-G:checked ~ .puzzleBody .panelMoveArea--10 .label--F::before {
    transform: rotate(180deg);
}
#panel-10-G:checked ~ .puzzleBody .panelMoveArea--10 .label--H {
    left: auto;
    right: -100%;
}
#panel-10-G:checked ~ .puzzleBody .panelMoveArea--10 .label--H::before {
    transform: rotate(0);
}
#panel-10-G:checked ~ .puzzleBody .panelMoveArea--10 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-10-G:checked ~ .puzzleBody .panelMoveArea--10 .label--K::before {
    transform: rotate(90deg);
}

#panel-10-H:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 25%;
    left: 75%;
}
#panel-10-H:checked ~ .puzzleBody .panelMoveArea--10 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-10-H:checked ~ .puzzleBody .panelMoveArea--10 .label--D::before {
    transform: rotate(-90deg);
}
#panel-10-H:checked ~ .puzzleBody .panelMoveArea--10 .label--G {
    left: -100%;
    right: auto;
}
#panel-10-H:checked ~ .puzzleBody .panelMoveArea--10 .label--G::before {
    transform: rotate(180deg);
}
#panel-10-H:checked ~ .puzzleBody .panelMoveArea--10 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-10-H:checked ~ .puzzleBody .panelMoveArea--10 .label--L::before {
    transform: rotate(90deg);
}

#panel-10-I:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 50%;
    left: 0;
}
#panel-10-I:checked ~ .puzzleBody .panelMoveArea--10 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-10-I:checked ~ .puzzleBody .panelMoveArea--10 .label--E::before {
    transform: rotate(-90deg);
}
#panel-10-I:checked ~ .puzzleBody .panelMoveArea--10 .label--J {
    left: auto;
    right: -100%;
}
#panel-10-I:checked ~ .puzzleBody .panelMoveArea--10 .label--J::before {
    transform: rotate(0);
}
#panel-10-I:checked ~ .puzzleBody .panelMoveArea--10 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-10-I:checked ~ .puzzleBody .panelMoveArea--10 .label--M::before {
    transform: rotate(90deg);
}

#panel-10-J:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 50%;
    left: 25%;
}
#panel-10-J:checked ~ .puzzleBody .panelMoveArea--10 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-10-J:checked ~ .puzzleBody .panelMoveArea--10 .label--F::before {
    transform: rotate(-90deg);
}
#panel-10-J:checked ~ .puzzleBody .panelMoveArea--10 .label--I {
    left: -100%;
    right: auto;
}
#panel-10-J:checked ~ .puzzleBody .panelMoveArea--10 .label--I::before {
    transform: rotate(180deg);
}
#panel-10-J:checked ~ .puzzleBody .panelMoveArea--10 .label--K {
    left: auto;
    right: -100%;
}
#panel-10-J:checked ~ .puzzleBody .panelMoveArea--10 .label--K::before {
    transform: rotate(0);
}
#panel-10-J:checked ~ .puzzleBody .panelMoveArea--10 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-10-J:checked ~ .puzzleBody .panelMoveArea--10 .label--N::before {
    transform: rotate(90deg);
}

#panel-10-K:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 50%;
    left: 50%;
}
#panel-10-K:checked ~ .puzzleBody .panelMoveArea--10 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-10-K:checked ~ .puzzleBody .panelMoveArea--10 .label--G::before {
    transform: rotate(-90deg);
}
#panel-10-K:checked ~ .puzzleBody .panelMoveArea--10 .label--J {
    left: -100%;
    right: auto;
}
#panel-10-K:checked ~ .puzzleBody .panelMoveArea--10 .label--J::before {
    transform: rotate(180deg);
}
#panel-10-K:checked ~ .puzzleBody .panelMoveArea--10 .label--L {
    left: auto;
    right: -100%;
}
#panel-10-K:checked ~ .puzzleBody .panelMoveArea--10 .label--L::before {
    transform: rotate(0);
}
#panel-10-K:checked ~ .puzzleBody .panelMoveArea--10 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-10-K:checked ~ .puzzleBody .panelMoveArea--10 .label--O::before {
    transform: rotate(90deg);
}

#panel-10-L:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 50%;
    left: 75%;
}
#panel-10-L:checked ~ .puzzleBody .panelMoveArea--10 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-10-L:checked ~ .puzzleBody .panelMoveArea--10 .label--H::before {
    transform: rotate(-90deg);
}
#panel-10-L:checked ~ .puzzleBody .panelMoveArea--10 .label--K {
    left: -100%;
    right: auto;
}
#panel-10-L:checked ~ .puzzleBody .panelMoveArea--10 .label--K::before {
    transform: rotate(180deg);
}
#panel-10-L:checked ~ .puzzleBody .panelMoveArea--10 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-10-L:checked ~ .puzzleBody .panelMoveArea--10 .label--P::before {
    transform: rotate(90deg);
}

#panel-10-M:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 75%;
    left: 0;
}
#panel-10-M:checked ~ .puzzleBody .panelMoveArea--10 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-10-M:checked ~ .puzzleBody .panelMoveArea--10 .label--I::before {
    transform: rotate(-90deg);
}
#panel-10-M:checked ~ .puzzleBody .panelMoveArea--10 .label--N {
    left: auto;
    right: -100%;
}
#panel-10-M:checked ~ .puzzleBody .panelMoveArea--10 .label--N::before {
    transform: rotate(0);
}

#panel-10-N:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 75%;
    left: 25%;
}
#panel-10-N:checked ~ .puzzleBody .panelMoveArea--10 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-10-N:checked ~ .puzzleBody .panelMoveArea--10 .label--J::before {
    transform: rotate(-90deg);
}
#panel-10-N:checked ~ .puzzleBody .panelMoveArea--10 .label--M {
    left: -100%;
    right: auto;
}
#panel-10-N:checked ~ .puzzleBody .panelMoveArea--10 .label--M::before {
    transform: rotate(180deg);
}
#panel-10-N:checked ~ .puzzleBody .panelMoveArea--10 .label--O {
    left: auto;
    right: -100%;
}
#panel-10-N:checked ~ .puzzleBody .panelMoveArea--10 .label--O::before {
    transform: rotate(0);
}

#panel-10-O:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 75%;
    left: 50%;
}
#panel-10-O:checked ~ .puzzleBody .panelMoveArea--10 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-10-O:checked ~ .puzzleBody .panelMoveArea--10 .label--K::before {
    transform: rotate(-90deg);
}
#panel-10-O:checked ~ .puzzleBody .panelMoveArea--10 .label--N {
    left: -100%;
    right: auto;
}
#panel-10-O:checked ~ .puzzleBody .panelMoveArea--10 .label--N::before {
    transform: rotate(180deg);
}
#panel-10-O:checked ~ .puzzleBody .panelMoveArea--10 .label--P {
    left: auto;
    right: -100%;
}
#panel-10-O:checked ~ .puzzleBody .panelMoveArea--10 .label--P::before {
    transform: rotate(0);
}

#panel-10-P:checked ~ .puzzleBody .panelMoveArea--10 {
    top: 75%;
    left: 75%;
}
#panel-10-P:checked ~ .puzzleBody .panelMoveArea--10 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-10-P:checked ~ .puzzleBody .panelMoveArea--10 .label--L::before {
    transform: rotate(-90deg);
}
#panel-10-P:checked ~ .puzzleBody .panelMoveArea--10 .label--O {
    left: -100%;
    right: auto;
}
#panel-10-P:checked ~ .puzzleBody .panelMoveArea--10 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-11:checked ~ .puzzleBody .panelMoveArea--11 {
    z-index: 1;
    overflow: visible;
}
#panelMove-11:checked ~ .puzzleBody .panelMoveArea--11 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-11-A:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 0;
    left: 0;
}
#panel-11-A:checked ~ .puzzleBody .panelMoveArea--11 .label--B {
    left: auto;
    right: -100%;
}
#panel-11-A:checked ~ .puzzleBody .panelMoveArea--11 .label--B::before {
    transform: rotate(0);
}
#panel-11-A:checked ~ .puzzleBody .panelMoveArea--11 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-11-A:checked ~ .puzzleBody .panelMoveArea--11 .label--E::before {
    transform: rotate(90deg);
}

#panel-11-B:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 0;
    left: 25%;
}
#panel-11-B:checked ~ .puzzleBody .panelMoveArea--11 .label--A {
    left: -100%;
    right: auto;
}
#panel-11-B:checked ~ .puzzleBody .panelMoveArea--11 .label--A::before {
    transform: rotate(180deg);
}
#panel-11-B:checked ~ .puzzleBody .panelMoveArea--11 .label--C {
    left: auto;
    right: -100%;
}
#panel-11-B:checked ~ .puzzleBody .panelMoveArea--11 .label--C::before {
    transform: rotate(0);
}
#panel-11-B:checked ~ .puzzleBody .panelMoveArea--11 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-11-B:checked ~ .puzzleBody .panelMoveArea--11 .label--F::before {
    transform: rotate(90deg);
}

#panel-11-C:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 0;
    left: 50%;
}
#panel-11-C:checked ~ .puzzleBody .panelMoveArea--11 .label--B {
    left: -100%;
    right: auto;
}
#panel-11-C:checked ~ .puzzleBody .panelMoveArea--11 .label--B::before {
    transform: rotate(180deg);
}
#panel-11-C:checked ~ .puzzleBody .panelMoveArea--11 .label--D {
    left: auto;
    right: -100%;
}
#panel-11-C:checked ~ .puzzleBody .panelMoveArea--11 .label--D::before {
    transform: rotate(0);
}
#panel-11-C:checked ~ .puzzleBody .panelMoveArea--11 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-11-C:checked ~ .puzzleBody .panelMoveArea--11 .label--G::before {
    transform: rotate(90deg);
}

#panel-11-D:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 0;
    left: 75%;
}
#panel-11-D:checked ~ .puzzleBody .panelMoveArea--11 .label--C {
    left: -100%;
    right: auto;
}
#panel-11-D:checked ~ .puzzleBody .panelMoveArea--11 .label--C::before {
    transform: rotate(180deg);
}
#panel-11-D:checked ~ .puzzleBody .panelMoveArea--11 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-11-D:checked ~ .puzzleBody .panelMoveArea--11 .label--H::before {
    transform: rotate(90deg);
}

#panel-11-E:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 25%;
    left: 0;
}
#panel-11-E:checked ~ .puzzleBody .panelMoveArea--11 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-11-E:checked ~ .puzzleBody .panelMoveArea--11 .label--A::before {
    transform: rotate(-90deg);
}
#panel-11-E:checked ~ .puzzleBody .panelMoveArea--11 .label--F {
    left: auto;
    right: -100%;
}
#panel-11-E:checked ~ .puzzleBody .panelMoveArea--11 .label--F::before {
    transform: rotate(0);
}
#panel-11-E:checked ~ .puzzleBody .panelMoveArea--11 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-11-E:checked ~ .puzzleBody .panelMoveArea--11 .label--I::before {
    transform: rotate(90deg);
}

#panel-11-F:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 25%;
    left: 25%;
}
#panel-11-F:checked ~ .puzzleBody .panelMoveArea--11 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-11-F:checked ~ .puzzleBody .panelMoveArea--11 .label--B::before {
    transform: rotate(-90deg);
}
#panel-11-F:checked ~ .puzzleBody .panelMoveArea--11 .label--E {
    left: -100%;
    right: auto;
}
#panel-11-F:checked ~ .puzzleBody .panelMoveArea--11 .label--E::before {
    transform: rotate(180deg);
}
#panel-11-F:checked ~ .puzzleBody .panelMoveArea--11 .label--G {
    left: auto;
    right: -100%;
}
#panel-11-F:checked ~ .puzzleBody .panelMoveArea--11 .label--G::before {
    transform: rotate(0);
}
#panel-11-F:checked ~ .puzzleBody .panelMoveArea--11 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-11-F:checked ~ .puzzleBody .panelMoveArea--11 .label--J::before {
    transform: rotate(90deg);
}

#panel-11-G:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 25%;
    left: 50%;
}
#panel-11-G:checked ~ .puzzleBody .panelMoveArea--11 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-11-G:checked ~ .puzzleBody .panelMoveArea--11 .label--C::before {
    transform: rotate(-90deg);
}
#panel-11-G:checked ~ .puzzleBody .panelMoveArea--11 .label--F {
    left: -100%;
    right: auto;
}
#panel-11-G:checked ~ .puzzleBody .panelMoveArea--11 .label--F::before {
    transform: rotate(180deg);
}
#panel-11-G:checked ~ .puzzleBody .panelMoveArea--11 .label--H {
    left: auto;
    right: -100%;
}
#panel-11-G:checked ~ .puzzleBody .panelMoveArea--11 .label--H::before {
    transform: rotate(0);
}
#panel-11-G:checked ~ .puzzleBody .panelMoveArea--11 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-11-G:checked ~ .puzzleBody .panelMoveArea--11 .label--K::before {
    transform: rotate(90deg);
}

#panel-11-H:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 25%;
    left: 75%;
}
#panel-11-H:checked ~ .puzzleBody .panelMoveArea--11 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-11-H:checked ~ .puzzleBody .panelMoveArea--11 .label--D::before {
    transform: rotate(-90deg);
}
#panel-11-H:checked ~ .puzzleBody .panelMoveArea--11 .label--G {
    left: -100%;
    right: auto;
}
#panel-11-H:checked ~ .puzzleBody .panelMoveArea--11 .label--G::before {
    transform: rotate(180deg);
}
#panel-11-H:checked ~ .puzzleBody .panelMoveArea--11 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-11-H:checked ~ .puzzleBody .panelMoveArea--11 .label--L::before {
    transform: rotate(90deg);
}

#panel-11-I:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 50%;
    left: 0;
}
#panel-11-I:checked ~ .puzzleBody .panelMoveArea--11 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-11-I:checked ~ .puzzleBody .panelMoveArea--11 .label--E::before {
    transform: rotate(-90deg);
}
#panel-11-I:checked ~ .puzzleBody .panelMoveArea--11 .label--J {
    left: auto;
    right: -100%;
}
#panel-11-I:checked ~ .puzzleBody .panelMoveArea--11 .label--J::before {
    transform: rotate(0);
}
#panel-11-I:checked ~ .puzzleBody .panelMoveArea--11 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-11-I:checked ~ .puzzleBody .panelMoveArea--11 .label--M::before {
    transform: rotate(90deg);
}

#panel-11-J:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 50%;
    left: 25%;
}
#panel-11-J:checked ~ .puzzleBody .panelMoveArea--11 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-11-J:checked ~ .puzzleBody .panelMoveArea--11 .label--F::before {
    transform: rotate(-90deg);
}
#panel-11-J:checked ~ .puzzleBody .panelMoveArea--11 .label--I {
    left: -100%;
    right: auto;
}
#panel-11-J:checked ~ .puzzleBody .panelMoveArea--11 .label--I::before {
    transform: rotate(180deg);
}
#panel-11-J:checked ~ .puzzleBody .panelMoveArea--11 .label--K {
    left: auto;
    right: -100%;
}
#panel-11-J:checked ~ .puzzleBody .panelMoveArea--11 .label--K::before {
    transform: rotate(0);
}
#panel-11-J:checked ~ .puzzleBody .panelMoveArea--11 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-11-J:checked ~ .puzzleBody .panelMoveArea--11 .label--N::before {
    transform: rotate(90deg);
}

#panel-11-K:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 50%;
    left: 50%;
}
#panel-11-K:checked ~ .puzzleBody .panelMoveArea--11 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-11-K:checked ~ .puzzleBody .panelMoveArea--11 .label--G::before {
    transform: rotate(-90deg);
}
#panel-11-K:checked ~ .puzzleBody .panelMoveArea--11 .label--J {
    left: -100%;
    right: auto;
}
#panel-11-K:checked ~ .puzzleBody .panelMoveArea--11 .label--J::before {
    transform: rotate(180deg);
}
#panel-11-K:checked ~ .puzzleBody .panelMoveArea--11 .label--L {
    left: auto;
    right: -100%;
}
#panel-11-K:checked ~ .puzzleBody .panelMoveArea--11 .label--L::before {
    transform: rotate(0);
}
#panel-11-K:checked ~ .puzzleBody .panelMoveArea--11 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-11-K:checked ~ .puzzleBody .panelMoveArea--11 .label--O::before {
    transform: rotate(90deg);
}

#panel-11-L:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 50%;
    left: 75%;
}
#panel-11-L:checked ~ .puzzleBody .panelMoveArea--11 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-11-L:checked ~ .puzzleBody .panelMoveArea--11 .label--H::before {
    transform: rotate(-90deg);
}
#panel-11-L:checked ~ .puzzleBody .panelMoveArea--11 .label--K {
    left: -100%;
    right: auto;
}
#panel-11-L:checked ~ .puzzleBody .panelMoveArea--11 .label--K::before {
    transform: rotate(180deg);
}
#panel-11-L:checked ~ .puzzleBody .panelMoveArea--11 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-11-L:checked ~ .puzzleBody .panelMoveArea--11 .label--P::before {
    transform: rotate(90deg);
}

#panel-11-M:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 75%;
    left: 0;
}
#panel-11-M:checked ~ .puzzleBody .panelMoveArea--11 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-11-M:checked ~ .puzzleBody .panelMoveArea--11 .label--I::before {
    transform: rotate(-90deg);
}
#panel-11-M:checked ~ .puzzleBody .panelMoveArea--11 .label--N {
    left: auto;
    right: -100%;
}
#panel-11-M:checked ~ .puzzleBody .panelMoveArea--11 .label--N::before {
    transform: rotate(0);
}

#panel-11-N:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 75%;
    left: 25%;
}
#panel-11-N:checked ~ .puzzleBody .panelMoveArea--11 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-11-N:checked ~ .puzzleBody .panelMoveArea--11 .label--J::before {
    transform: rotate(-90deg);
}
#panel-11-N:checked ~ .puzzleBody .panelMoveArea--11 .label--M {
    left: -100%;
    right: auto;
}
#panel-11-N:checked ~ .puzzleBody .panelMoveArea--11 .label--M::before {
    transform: rotate(180deg);
}
#panel-11-N:checked ~ .puzzleBody .panelMoveArea--11 .label--O {
    left: auto;
    right: -100%;
}
#panel-11-N:checked ~ .puzzleBody .panelMoveArea--11 .label--O::before {
    transform: rotate(0);
}

#panel-11-O:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 75%;
    left: 50%;
}
#panel-11-O:checked ~ .puzzleBody .panelMoveArea--11 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-11-O:checked ~ .puzzleBody .panelMoveArea--11 .label--K::before {
    transform: rotate(-90deg);
}
#panel-11-O:checked ~ .puzzleBody .panelMoveArea--11 .label--N {
    left: -100%;
    right: auto;
}
#panel-11-O:checked ~ .puzzleBody .panelMoveArea--11 .label--N::before {
    transform: rotate(180deg);
}
#panel-11-O:checked ~ .puzzleBody .panelMoveArea--11 .label--P {
    left: auto;
    right: -100%;
}
#panel-11-O:checked ~ .puzzleBody .panelMoveArea--11 .label--P::before {
    transform: rotate(0);
}

#panel-11-P:checked ~ .puzzleBody .panelMoveArea--11 {
    top: 75%;
    left: 75%;
}
#panel-11-P:checked ~ .puzzleBody .panelMoveArea--11 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-11-P:checked ~ .puzzleBody .panelMoveArea--11 .label--L::before {
    transform: rotate(-90deg);
}
#panel-11-P:checked ~ .puzzleBody .panelMoveArea--11 .label--O {
    left: -100%;
    right: auto;
}
#panel-11-P:checked ~ .puzzleBody .panelMoveArea--11 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-12:checked ~ .puzzleBody .panelMoveArea--12 {
    z-index: 1;
    overflow: visible;
}
#panelMove-12:checked ~ .puzzleBody .panelMoveArea--12 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-12-A:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 0;
    left: 0;
}
#panel-12-A:checked ~ .puzzleBody .panelMoveArea--12 .label--B {
    left: auto;
    right: -100%;
}
#panel-12-A:checked ~ .puzzleBody .panelMoveArea--12 .label--B::before {
    transform: rotate(0);
}
#panel-12-A:checked ~ .puzzleBody .panelMoveArea--12 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-12-A:checked ~ .puzzleBody .panelMoveArea--12 .label--E::before {
    transform: rotate(90deg);
}

#panel-12-B:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 0;
    left: 25%;
}
#panel-12-B:checked ~ .puzzleBody .panelMoveArea--12 .label--A {
    left: -100%;
    right: auto;
}
#panel-12-B:checked ~ .puzzleBody .panelMoveArea--12 .label--A::before {
    transform: rotate(180deg);
}
#panel-12-B:checked ~ .puzzleBody .panelMoveArea--12 .label--C {
    left: auto;
    right: -100%;
}
#panel-12-B:checked ~ .puzzleBody .panelMoveArea--12 .label--C::before {
    transform: rotate(0);
}
#panel-12-B:checked ~ .puzzleBody .panelMoveArea--12 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-12-B:checked ~ .puzzleBody .panelMoveArea--12 .label--F::before {
    transform: rotate(90deg);
}

#panel-12-C:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 0;
    left: 50%;
}
#panel-12-C:checked ~ .puzzleBody .panelMoveArea--12 .label--B {
    left: -100%;
    right: auto;
}
#panel-12-C:checked ~ .puzzleBody .panelMoveArea--12 .label--B::before {
    transform: rotate(180deg);
}
#panel-12-C:checked ~ .puzzleBody .panelMoveArea--12 .label--D {
    left: auto;
    right: -100%;
}
#panel-12-C:checked ~ .puzzleBody .panelMoveArea--12 .label--D::before {
    transform: rotate(0);
}
#panel-12-C:checked ~ .puzzleBody .panelMoveArea--12 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-12-C:checked ~ .puzzleBody .panelMoveArea--12 .label--G::before {
    transform: rotate(90deg);
}

#panel-12-D:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 0;
    left: 75%;
}
#panel-12-D:checked ~ .puzzleBody .panelMoveArea--12 .label--C {
    left: -100%;
    right: auto;
}
#panel-12-D:checked ~ .puzzleBody .panelMoveArea--12 .label--C::before {
    transform: rotate(180deg);
}
#panel-12-D:checked ~ .puzzleBody .panelMoveArea--12 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-12-D:checked ~ .puzzleBody .panelMoveArea--12 .label--H::before {
    transform: rotate(90deg);
}

#panel-12-E:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 25%;
    left: 0;
}
#panel-12-E:checked ~ .puzzleBody .panelMoveArea--12 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-12-E:checked ~ .puzzleBody .panelMoveArea--12 .label--A::before {
    transform: rotate(-90deg);
}
#panel-12-E:checked ~ .puzzleBody .panelMoveArea--12 .label--F {
    left: auto;
    right: -100%;
}
#panel-12-E:checked ~ .puzzleBody .panelMoveArea--12 .label--F::before {
    transform: rotate(0);
}
#panel-12-E:checked ~ .puzzleBody .panelMoveArea--12 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-12-E:checked ~ .puzzleBody .panelMoveArea--12 .label--I::before {
    transform: rotate(90deg);
}

#panel-12-F:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 25%;
    left: 25%;
}
#panel-12-F:checked ~ .puzzleBody .panelMoveArea--12 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-12-F:checked ~ .puzzleBody .panelMoveArea--12 .label--B::before {
    transform: rotate(-90deg);
}
#panel-12-F:checked ~ .puzzleBody .panelMoveArea--12 .label--E {
    left: -100%;
    right: auto;
}
#panel-12-F:checked ~ .puzzleBody .panelMoveArea--12 .label--E::before {
    transform: rotate(180deg);
}
#panel-12-F:checked ~ .puzzleBody .panelMoveArea--12 .label--G {
    left: auto;
    right: -100%;
}
#panel-12-F:checked ~ .puzzleBody .panelMoveArea--12 .label--G::before {
    transform: rotate(0);
}
#panel-12-F:checked ~ .puzzleBody .panelMoveArea--12 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-12-F:checked ~ .puzzleBody .panelMoveArea--12 .label--J::before {
    transform: rotate(90deg);
}

#panel-12-G:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 25%;
    left: 50%;
}
#panel-12-G:checked ~ .puzzleBody .panelMoveArea--12 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-12-G:checked ~ .puzzleBody .panelMoveArea--12 .label--C::before {
    transform: rotate(-90deg);
}
#panel-12-G:checked ~ .puzzleBody .panelMoveArea--12 .label--F {
    left: -100%;
    right: auto;
}
#panel-12-G:checked ~ .puzzleBody .panelMoveArea--12 .label--F::before {
    transform: rotate(180deg);
}
#panel-12-G:checked ~ .puzzleBody .panelMoveArea--12 .label--H {
    left: auto;
    right: -100%;
}
#panel-12-G:checked ~ .puzzleBody .panelMoveArea--12 .label--H::before {
    transform: rotate(0);
}
#panel-12-G:checked ~ .puzzleBody .panelMoveArea--12 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-12-G:checked ~ .puzzleBody .panelMoveArea--12 .label--K::before {
    transform: rotate(90deg);
}

#panel-12-H:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 25%;
    left: 75%;
}
#panel-12-H:checked ~ .puzzleBody .panelMoveArea--12 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-12-H:checked ~ .puzzleBody .panelMoveArea--12 .label--D::before {
    transform: rotate(-90deg);
}
#panel-12-H:checked ~ .puzzleBody .panelMoveArea--12 .label--G {
    left: -100%;
    right: auto;
}
#panel-12-H:checked ~ .puzzleBody .panelMoveArea--12 .label--G::before {
    transform: rotate(180deg);
}
#panel-12-H:checked ~ .puzzleBody .panelMoveArea--12 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-12-H:checked ~ .puzzleBody .panelMoveArea--12 .label--L::before {
    transform: rotate(90deg);
}

#panel-12-I:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 50%;
    left: 0;
}
#panel-12-I:checked ~ .puzzleBody .panelMoveArea--12 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-12-I:checked ~ .puzzleBody .panelMoveArea--12 .label--E::before {
    transform: rotate(-90deg);
}
#panel-12-I:checked ~ .puzzleBody .panelMoveArea--12 .label--J {
    left: auto;
    right: -100%;
}
#panel-12-I:checked ~ .puzzleBody .panelMoveArea--12 .label--J::before {
    transform: rotate(0);
}
#panel-12-I:checked ~ .puzzleBody .panelMoveArea--12 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-12-I:checked ~ .puzzleBody .panelMoveArea--12 .label--M::before {
    transform: rotate(90deg);
}

#panel-12-J:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 50%;
    left: 25%;
}
#panel-12-J:checked ~ .puzzleBody .panelMoveArea--12 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-12-J:checked ~ .puzzleBody .panelMoveArea--12 .label--F::before {
    transform: rotate(-90deg);
}
#panel-12-J:checked ~ .puzzleBody .panelMoveArea--12 .label--I {
    left: -100%;
    right: auto;
}
#panel-12-J:checked ~ .puzzleBody .panelMoveArea--12 .label--I::before {
    transform: rotate(180deg);
}
#panel-12-J:checked ~ .puzzleBody .panelMoveArea--12 .label--K {
    left: auto;
    right: -100%;
}
#panel-12-J:checked ~ .puzzleBody .panelMoveArea--12 .label--K::before {
    transform: rotate(0);
}
#panel-12-J:checked ~ .puzzleBody .panelMoveArea--12 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-12-J:checked ~ .puzzleBody .panelMoveArea--12 .label--N::before {
    transform: rotate(90deg);
}

#panel-12-K:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 50%;
    left: 50%;
}
#panel-12-K:checked ~ .puzzleBody .panelMoveArea--12 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-12-K:checked ~ .puzzleBody .panelMoveArea--12 .label--G::before {
    transform: rotate(-90deg);
}
#panel-12-K:checked ~ .puzzleBody .panelMoveArea--12 .label--J {
    left: -100%;
    right: auto;
}
#panel-12-K:checked ~ .puzzleBody .panelMoveArea--12 .label--J::before {
    transform: rotate(180deg);
}
#panel-12-K:checked ~ .puzzleBody .panelMoveArea--12 .label--L {
    left: auto;
    right: -100%;
}
#panel-12-K:checked ~ .puzzleBody .panelMoveArea--12 .label--L::before {
    transform: rotate(0);
}
#panel-12-K:checked ~ .puzzleBody .panelMoveArea--12 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-12-K:checked ~ .puzzleBody .panelMoveArea--12 .label--O::before {
    transform: rotate(90deg);
}

#panel-12-L:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 50%;
    left: 75%;
}
#panel-12-L:checked ~ .puzzleBody .panelMoveArea--12 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-12-L:checked ~ .puzzleBody .panelMoveArea--12 .label--H::before {
    transform: rotate(-90deg);
}
#panel-12-L:checked ~ .puzzleBody .panelMoveArea--12 .label--K {
    left: -100%;
    right: auto;
}
#panel-12-L:checked ~ .puzzleBody .panelMoveArea--12 .label--K::before {
    transform: rotate(180deg);
}
#panel-12-L:checked ~ .puzzleBody .panelMoveArea--12 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-12-L:checked ~ .puzzleBody .panelMoveArea--12 .label--P::before {
    transform: rotate(90deg);
}

#panel-12-M:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 75%;
    left: 0;
}
#panel-12-M:checked ~ .puzzleBody .panelMoveArea--12 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-12-M:checked ~ .puzzleBody .panelMoveArea--12 .label--I::before {
    transform: rotate(-90deg);
}
#panel-12-M:checked ~ .puzzleBody .panelMoveArea--12 .label--N {
    left: auto;
    right: -100%;
}
#panel-12-M:checked ~ .puzzleBody .panelMoveArea--12 .label--N::before {
    transform: rotate(0);
}

#panel-12-N:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 75%;
    left: 25%;
}
#panel-12-N:checked ~ .puzzleBody .panelMoveArea--12 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-12-N:checked ~ .puzzleBody .panelMoveArea--12 .label--J::before {
    transform: rotate(-90deg);
}
#panel-12-N:checked ~ .puzzleBody .panelMoveArea--12 .label--M {
    left: -100%;
    right: auto;
}
#panel-12-N:checked ~ .puzzleBody .panelMoveArea--12 .label--M::before {
    transform: rotate(180deg);
}
#panel-12-N:checked ~ .puzzleBody .panelMoveArea--12 .label--O {
    left: auto;
    right: -100%;
}
#panel-12-N:checked ~ .puzzleBody .panelMoveArea--12 .label--O::before {
    transform: rotate(0);
}

#panel-12-O:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 75%;
    left: 50%;
}
#panel-12-O:checked ~ .puzzleBody .panelMoveArea--12 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-12-O:checked ~ .puzzleBody .panelMoveArea--12 .label--K::before {
    transform: rotate(-90deg);
}
#panel-12-O:checked ~ .puzzleBody .panelMoveArea--12 .label--N {
    left: -100%;
    right: auto;
}
#panel-12-O:checked ~ .puzzleBody .panelMoveArea--12 .label--N::before {
    transform: rotate(180deg);
}
#panel-12-O:checked ~ .puzzleBody .panelMoveArea--12 .label--P {
    left: auto;
    right: -100%;
}
#panel-12-O:checked ~ .puzzleBody .panelMoveArea--12 .label--P::before {
    transform: rotate(0);
}

#panel-12-P:checked ~ .puzzleBody .panelMoveArea--12 {
    top: 75%;
    left: 75%;
}
#panel-12-P:checked ~ .puzzleBody .panelMoveArea--12 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-12-P:checked ~ .puzzleBody .panelMoveArea--12 .label--L::before {
    transform: rotate(-90deg);
}
#panel-12-P:checked ~ .puzzleBody .panelMoveArea--12 .label--O {
    left: -100%;
    right: auto;
}
#panel-12-P:checked ~ .puzzleBody .panelMoveArea--12 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-13:checked ~ .puzzleBody .panelMoveArea--13 {
    z-index: 1;
    overflow: visible;
}
#panelMove-13:checked ~ .puzzleBody .panelMoveArea--13 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-13-A:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 0;
    left: 0;
}
#panel-13-A:checked ~ .puzzleBody .panelMoveArea--13 .label--B {
    left: auto;
    right: -100%;
}
#panel-13-A:checked ~ .puzzleBody .panelMoveArea--13 .label--B::before {
    transform: rotate(0);
}
#panel-13-A:checked ~ .puzzleBody .panelMoveArea--13 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-13-A:checked ~ .puzzleBody .panelMoveArea--13 .label--E::before {
    transform: rotate(90deg);
}

#panel-13-B:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 0;
    left: 25%;
}
#panel-13-B:checked ~ .puzzleBody .panelMoveArea--13 .label--A {
    left: -100%;
    right: auto;
}
#panel-13-B:checked ~ .puzzleBody .panelMoveArea--13 .label--A::before {
    transform: rotate(180deg);
}
#panel-13-B:checked ~ .puzzleBody .panelMoveArea--13 .label--C {
    left: auto;
    right: -100%;
}
#panel-13-B:checked ~ .puzzleBody .panelMoveArea--13 .label--C::before {
    transform: rotate(0);
}
#panel-13-B:checked ~ .puzzleBody .panelMoveArea--13 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-13-B:checked ~ .puzzleBody .panelMoveArea--13 .label--F::before {
    transform: rotate(90deg);
}

#panel-13-C:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 0;
    left: 50%;
}
#panel-13-C:checked ~ .puzzleBody .panelMoveArea--13 .label--B {
    left: -100%;
    right: auto;
}
#panel-13-C:checked ~ .puzzleBody .panelMoveArea--13 .label--B::before {
    transform: rotate(180deg);
}
#panel-13-C:checked ~ .puzzleBody .panelMoveArea--13 .label--D {
    left: auto;
    right: -100%;
}
#panel-13-C:checked ~ .puzzleBody .panelMoveArea--13 .label--D::before {
    transform: rotate(0);
}
#panel-13-C:checked ~ .puzzleBody .panelMoveArea--13 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-13-C:checked ~ .puzzleBody .panelMoveArea--13 .label--G::before {
    transform: rotate(90deg);
}

#panel-13-D:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 0;
    left: 75%;
}
#panel-13-D:checked ~ .puzzleBody .panelMoveArea--13 .label--C {
    left: -100%;
    right: auto;
}
#panel-13-D:checked ~ .puzzleBody .panelMoveArea--13 .label--C::before {
    transform: rotate(180deg);
}
#panel-13-D:checked ~ .puzzleBody .panelMoveArea--13 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-13-D:checked ~ .puzzleBody .panelMoveArea--13 .label--H::before {
    transform: rotate(90deg);
}

#panel-13-E:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 25%;
    left: 0;
}
#panel-13-E:checked ~ .puzzleBody .panelMoveArea--13 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-13-E:checked ~ .puzzleBody .panelMoveArea--13 .label--A::before {
    transform: rotate(-90deg);
}
#panel-13-E:checked ~ .puzzleBody .panelMoveArea--13 .label--F {
    left: auto;
    right: -100%;
}
#panel-13-E:checked ~ .puzzleBody .panelMoveArea--13 .label--F::before {
    transform: rotate(0);
}
#panel-13-E:checked ~ .puzzleBody .panelMoveArea--13 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-13-E:checked ~ .puzzleBody .panelMoveArea--13 .label--I::before {
    transform: rotate(90deg);
}

#panel-13-F:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 25%;
    left: 25%;
}
#panel-13-F:checked ~ .puzzleBody .panelMoveArea--13 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-13-F:checked ~ .puzzleBody .panelMoveArea--13 .label--B::before {
    transform: rotate(-90deg);
}
#panel-13-F:checked ~ .puzzleBody .panelMoveArea--13 .label--E {
    left: -100%;
    right: auto;
}
#panel-13-F:checked ~ .puzzleBody .panelMoveArea--13 .label--E::before {
    transform: rotate(180deg);
}
#panel-13-F:checked ~ .puzzleBody .panelMoveArea--13 .label--G {
    left: auto;
    right: -100%;
}
#panel-13-F:checked ~ .puzzleBody .panelMoveArea--13 .label--G::before {
    transform: rotate(0);
}
#panel-13-F:checked ~ .puzzleBody .panelMoveArea--13 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-13-F:checked ~ .puzzleBody .panelMoveArea--13 .label--J::before {
    transform: rotate(90deg);
}

#panel-13-G:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 25%;
    left: 50%;
}
#panel-13-G:checked ~ .puzzleBody .panelMoveArea--13 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-13-G:checked ~ .puzzleBody .panelMoveArea--13 .label--C::before {
    transform: rotate(-90deg);
}
#panel-13-G:checked ~ .puzzleBody .panelMoveArea--13 .label--F {
    left: -100%;
    right: auto;
}
#panel-13-G:checked ~ .puzzleBody .panelMoveArea--13 .label--F::before {
    transform: rotate(180deg);
}
#panel-13-G:checked ~ .puzzleBody .panelMoveArea--13 .label--H {
    left: auto;
    right: -100%;
}
#panel-13-G:checked ~ .puzzleBody .panelMoveArea--13 .label--H::before {
    transform: rotate(0);
}
#panel-13-G:checked ~ .puzzleBody .panelMoveArea--13 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-13-G:checked ~ .puzzleBody .panelMoveArea--13 .label--K::before {
    transform: rotate(90deg);
}

#panel-13-H:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 25%;
    left: 75%;
}
#panel-13-H:checked ~ .puzzleBody .panelMoveArea--13 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-13-H:checked ~ .puzzleBody .panelMoveArea--13 .label--D::before {
    transform: rotate(-90deg);
}
#panel-13-H:checked ~ .puzzleBody .panelMoveArea--13 .label--G {
    left: -100%;
    right: auto;
}
#panel-13-H:checked ~ .puzzleBody .panelMoveArea--13 .label--G::before {
    transform: rotate(180deg);
}
#panel-13-H:checked ~ .puzzleBody .panelMoveArea--13 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-13-H:checked ~ .puzzleBody .panelMoveArea--13 .label--L::before {
    transform: rotate(90deg);
}

#panel-13-I:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 50%;
    left: 0;
}
#panel-13-I:checked ~ .puzzleBody .panelMoveArea--13 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-13-I:checked ~ .puzzleBody .panelMoveArea--13 .label--E::before {
    transform: rotate(-90deg);
}
#panel-13-I:checked ~ .puzzleBody .panelMoveArea--13 .label--J {
    left: auto;
    right: -100%;
}
#panel-13-I:checked ~ .puzzleBody .panelMoveArea--13 .label--J::before {
    transform: rotate(0);
}
#panel-13-I:checked ~ .puzzleBody .panelMoveArea--13 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-13-I:checked ~ .puzzleBody .panelMoveArea--13 .label--M::before {
    transform: rotate(90deg);
}

#panel-13-J:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 50%;
    left: 25%;
}
#panel-13-J:checked ~ .puzzleBody .panelMoveArea--13 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-13-J:checked ~ .puzzleBody .panelMoveArea--13 .label--F::before {
    transform: rotate(-90deg);
}
#panel-13-J:checked ~ .puzzleBody .panelMoveArea--13 .label--I {
    left: -100%;
    right: auto;
}
#panel-13-J:checked ~ .puzzleBody .panelMoveArea--13 .label--I::before {
    transform: rotate(180deg);
}
#panel-13-J:checked ~ .puzzleBody .panelMoveArea--13 .label--K {
    left: auto;
    right: -100%;
}
#panel-13-J:checked ~ .puzzleBody .panelMoveArea--13 .label--K::before {
    transform: rotate(0);
}
#panel-13-J:checked ~ .puzzleBody .panelMoveArea--13 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-13-J:checked ~ .puzzleBody .panelMoveArea--13 .label--N::before {
    transform: rotate(90deg);
}

#panel-13-K:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 50%;
    left: 50%;
}
#panel-13-K:checked ~ .puzzleBody .panelMoveArea--13 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-13-K:checked ~ .puzzleBody .panelMoveArea--13 .label--G::before {
    transform: rotate(-90deg);
}
#panel-13-K:checked ~ .puzzleBody .panelMoveArea--13 .label--J {
    left: -100%;
    right: auto;
}
#panel-13-K:checked ~ .puzzleBody .panelMoveArea--13 .label--J::before {
    transform: rotate(180deg);
}
#panel-13-K:checked ~ .puzzleBody .panelMoveArea--13 .label--L {
    left: auto;
    right: -100%;
}
#panel-13-K:checked ~ .puzzleBody .panelMoveArea--13 .label--L::before {
    transform: rotate(0);
}
#panel-13-K:checked ~ .puzzleBody .panelMoveArea--13 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-13-K:checked ~ .puzzleBody .panelMoveArea--13 .label--O::before {
    transform: rotate(90deg);
}

#panel-13-L:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 50%;
    left: 75%;
}
#panel-13-L:checked ~ .puzzleBody .panelMoveArea--13 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-13-L:checked ~ .puzzleBody .panelMoveArea--13 .label--H::before {
    transform: rotate(-90deg);
}
#panel-13-L:checked ~ .puzzleBody .panelMoveArea--13 .label--K {
    left: -100%;
    right: auto;
}
#panel-13-L:checked ~ .puzzleBody .panelMoveArea--13 .label--K::before {
    transform: rotate(180deg);
}
#panel-13-L:checked ~ .puzzleBody .panelMoveArea--13 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-13-L:checked ~ .puzzleBody .panelMoveArea--13 .label--P::before {
    transform: rotate(90deg);
}

#panel-13-M:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 75%;
    left: 0;
}
#panel-13-M:checked ~ .puzzleBody .panelMoveArea--13 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-13-M:checked ~ .puzzleBody .panelMoveArea--13 .label--I::before {
    transform: rotate(-90deg);
}
#panel-13-M:checked ~ .puzzleBody .panelMoveArea--13 .label--N {
    left: auto;
    right: -100%;
}
#panel-13-M:checked ~ .puzzleBody .panelMoveArea--13 .label--N::before {
    transform: rotate(0);
}

#panel-13-N:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 75%;
    left: 25%;
}
#panel-13-N:checked ~ .puzzleBody .panelMoveArea--13 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-13-N:checked ~ .puzzleBody .panelMoveArea--13 .label--J::before {
    transform: rotate(-90deg);
}
#panel-13-N:checked ~ .puzzleBody .panelMoveArea--13 .label--M {
    left: -100%;
    right: auto;
}
#panel-13-N:checked ~ .puzzleBody .panelMoveArea--13 .label--M::before {
    transform: rotate(180deg);
}
#panel-13-N:checked ~ .puzzleBody .panelMoveArea--13 .label--O {
    left: auto;
    right: -100%;
}
#panel-13-N:checked ~ .puzzleBody .panelMoveArea--13 .label--O::before {
    transform: rotate(0);
}

#panel-13-O:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 75%;
    left: 50%;
}
#panel-13-O:checked ~ .puzzleBody .panelMoveArea--13 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-13-O:checked ~ .puzzleBody .panelMoveArea--13 .label--K::before {
    transform: rotate(-90deg);
}
#panel-13-O:checked ~ .puzzleBody .panelMoveArea--13 .label--N {
    left: -100%;
    right: auto;
}
#panel-13-O:checked ~ .puzzleBody .panelMoveArea--13 .label--N::before {
    transform: rotate(180deg);
}
#panel-13-O:checked ~ .puzzleBody .panelMoveArea--13 .label--P {
    left: auto;
    right: -100%;
}
#panel-13-O:checked ~ .puzzleBody .panelMoveArea--13 .label--P::before {
    transform: rotate(0);
}

#panel-13-P:checked ~ .puzzleBody .panelMoveArea--13 {
    top: 75%;
    left: 75%;
}
#panel-13-P:checked ~ .puzzleBody .panelMoveArea--13 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-13-P:checked ~ .puzzleBody .panelMoveArea--13 .label--L::before {
    transform: rotate(-90deg);
}
#panel-13-P:checked ~ .puzzleBody .panelMoveArea--13 .label--O {
    left: -100%;
    right: auto;
}
#panel-13-P:checked ~ .puzzleBody .panelMoveArea--13 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-14:checked ~ .puzzleBody .panelMoveArea--14 {
    z-index: 1;
    overflow: visible;
}
#panelMove-14:checked ~ .puzzleBody .panelMoveArea--14 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-14-A:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 0;
    left: 0;
}
#panel-14-A:checked ~ .puzzleBody .panelMoveArea--14 .label--B {
    left: auto;
    right: -100%;
}
#panel-14-A:checked ~ .puzzleBody .panelMoveArea--14 .label--B::before {
    transform: rotate(0);
}
#panel-14-A:checked ~ .puzzleBody .panelMoveArea--14 .label--E {
    top: auto;
    bottom: -100%;
}

#panel-14-A:checked ~ .puzzleBody .panelMoveArea--14 .label--E::before {
    transform: rotate(90deg);
}

#panel-14-B:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 0;
    left: 25%;
}
#panel-14-B:checked ~ .puzzleBody .panelMoveArea--14 .label--A {
    left: -100%;
    right: auto;
}
#panel-14-B:checked ~ .puzzleBody .panelMoveArea--14 .label--A::before {
    transform: rotate(180deg);
}
#panel-14-B:checked ~ .puzzleBody .panelMoveArea--14 .label--C {
    left: auto;
    right: -100%;
}
#panel-14-B:checked ~ .puzzleBody .panelMoveArea--14 .label--C::before {
    transform: rotate(0);
}
#panel-14-B:checked ~ .puzzleBody .panelMoveArea--14 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-14-B:checked ~ .puzzleBody .panelMoveArea--14 .label--F::before {
    transform: rotate(90deg);
}

#panel-14-C:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 0;
    left: 50%;
}
#panel-14-C:checked ~ .puzzleBody .panelMoveArea--14 .label--B {
    left: -100%;
    right: auto;
}
#panel-14-C:checked ~ .puzzleBody .panelMoveArea--14 .label--B::before {
    transform: rotate(180deg);
}
#panel-14-C:checked ~ .puzzleBody .panelMoveArea--14 .label--D {
    left: auto;
    right: -100%;
}
#panel-14-C:checked ~ .puzzleBody .panelMoveArea--14 .label--D::before {
    transform: rotate(0);
}
#panel-14-C:checked ~ .puzzleBody .panelMoveArea--14 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-14-C:checked ~ .puzzleBody .panelMoveArea--14 .label--G::before {
    transform: rotate(90deg);
}

#panel-14-D:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 0;
    left: 75%;
}
#panel-14-D:checked ~ .puzzleBody .panelMoveArea--14 .label--C {
    left: -100%;
    right: auto;
}
#panel-14-D:checked ~ .puzzleBody .panelMoveArea--14 .label--C::before {
    transform: rotate(180deg);
}
#panel-14-D:checked ~ .puzzleBody .panelMoveArea--14 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-14-D:checked ~ .puzzleBody .panelMoveArea--14 .label--H::before {
    transform: rotate(90deg);
}

#panel-14-E:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 25%;
    left: 0;
}
#panel-14-E:checked ~ .puzzleBody .panelMoveArea--14 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-14-E:checked ~ .puzzleBody .panelMoveArea--14 .label--A::before {
    transform: rotate(-90deg);
}
#panel-14-E:checked ~ .puzzleBody .panelMoveArea--14 .label--F {
    left: auto;
    right: -100%;
}
#panel-14-E:checked ~ .puzzleBody .panelMoveArea--14 .label--F::before {
    transform: rotate(0);
}
#panel-14-E:checked ~ .puzzleBody .panelMoveArea--14 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-14-E:checked ~ .puzzleBody .panelMoveArea--14 .label--I::before {
    transform: rotate(90deg);
}

#panel-14-F:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 25%;
    left: 25%;
}
#panel-14-F:checked ~ .puzzleBody .panelMoveArea--14 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-14-F:checked ~ .puzzleBody .panelMoveArea--14 .label--B::before {
    transform: rotate(-90deg);
}
#panel-14-F:checked ~ .puzzleBody .panelMoveArea--14 .label--E {
    left: -100%;
    right: auto;
}
#panel-14-F:checked ~ .puzzleBody .panelMoveArea--14 .label--E::before {
    transform: rotate(180deg);
}
#panel-14-F:checked ~ .puzzleBody .panelMoveArea--14 .label--G {
    left: auto;
    right: -100%;
}
#panel-14-F:checked ~ .puzzleBody .panelMoveArea--14 .label--G::before {
    transform: rotate(0);
}
#panel-14-F:checked ~ .puzzleBody .panelMoveArea--14 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-14-F:checked ~ .puzzleBody .panelMoveArea--14 .label--J::before {
    transform: rotate(90deg);
}

#panel-14-G:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 25%;
    left: 50%;
}
#panel-14-G:checked ~ .puzzleBody .panelMoveArea--14 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-14-G:checked ~ .puzzleBody .panelMoveArea--14 .label--C::before {
    transform: rotate(-90deg);
}
#panel-14-G:checked ~ .puzzleBody .panelMoveArea--14 .label--F {
    left: -100%;
    right: auto;
}
#panel-14-G:checked ~ .puzzleBody .panelMoveArea--14 .label--F::before {
    transform: rotate(180deg);
}
#panel-14-G:checked ~ .puzzleBody .panelMoveArea--14 .label--H {
    left: auto;
    right: -100%;
}
#panel-14-G:checked ~ .puzzleBody .panelMoveArea--14 .label--H::before {
    transform: rotate(0);
}
#panel-14-G:checked ~ .puzzleBody .panelMoveArea--14 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-14-G:checked ~ .puzzleBody .panelMoveArea--14 .label--K::before {
    transform: rotate(90deg);
}

#panel-14-H:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 25%;
    left: 75%;
}
#panel-14-H:checked ~ .puzzleBody .panelMoveArea--14 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-14-H:checked ~ .puzzleBody .panelMoveArea--14 .label--D::before {
    transform: rotate(-90deg);
}
#panel-14-H:checked ~ .puzzleBody .panelMoveArea--14 .label--G {
    left: -100%;
    right: auto;
}
#panel-14-H:checked ~ .puzzleBody .panelMoveArea--14 .label--G::before {
    transform: rotate(180deg);
}
#panel-14-H:checked ~ .puzzleBody .panelMoveArea--14 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-14-H:checked ~ .puzzleBody .panelMoveArea--14 .label--L::before {
    transform: rotate(90deg);
}

#panel-14-I:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 50%;
    left: 0;
}
#panel-14-I:checked ~ .puzzleBody .panelMoveArea--14 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-14-I:checked ~ .puzzleBody .panelMoveArea--14 .label--E::before {
    transform: rotate(-90deg);
}
#panel-14-I:checked ~ .puzzleBody .panelMoveArea--14 .label--J {
    left: auto;
    right: -100%;
}
#panel-14-I:checked ~ .puzzleBody .panelMoveArea--14 .label--J::before {
    transform: rotate(0);
}
#panel-14-I:checked ~ .puzzleBody .panelMoveArea--14 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-14-I:checked ~ .puzzleBody .panelMoveArea--14 .label--M::before {
    transform: rotate(90deg);
}

#panel-14-J:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 50%;
    left: 25%;
}
#panel-14-J:checked ~ .puzzleBody .panelMoveArea--14 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-14-J:checked ~ .puzzleBody .panelMoveArea--14 .label--F::before {
    transform: rotate(-90deg);
}
#panel-14-J:checked ~ .puzzleBody .panelMoveArea--14 .label--I {
    left: -100%;
    right: auto;
}
#panel-14-J:checked ~ .puzzleBody .panelMoveArea--14 .label--I::before {
    transform: rotate(180deg);
}
#panel-14-J:checked ~ .puzzleBody .panelMoveArea--14 .label--K {
    left: auto;
    right: -100%;
}
#panel-14-J:checked ~ .puzzleBody .panelMoveArea--14 .label--K::before {
    transform: rotate(0);
}
#panel-14-J:checked ~ .puzzleBody .panelMoveArea--14 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-14-J:checked ~ .puzzleBody .panelMoveArea--14 .label--N::before {
    transform: rotate(90deg);
}

#panel-14-K:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 50%;
    left: 50%;
}
#panel-14-K:checked ~ .puzzleBody .panelMoveArea--14 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-14-K:checked ~ .puzzleBody .panelMoveArea--14 .label--G::before {
    transform: rotate(-90deg);
}
#panel-14-K:checked ~ .puzzleBody .panelMoveArea--14 .label--J {
    left: -100%;
    right: auto;
}
#panel-14-K:checked ~ .puzzleBody .panelMoveArea--14 .label--J::before {
    transform: rotate(180deg);
}
#panel-14-K:checked ~ .puzzleBody .panelMoveArea--14 .label--L {
    left: auto;
    right: -100%;
}
#panel-14-K:checked ~ .puzzleBody .panelMoveArea--14 .label--L::before {
    transform: rotate(0);
}
#panel-14-K:checked ~ .puzzleBody .panelMoveArea--14 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-14-K:checked ~ .puzzleBody .panelMoveArea--14 .label--O::before {
    transform: rotate(90deg);
}

#panel-14-L:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 50%;
    left: 75%;
}
#panel-14-L:checked ~ .puzzleBody .panelMoveArea--14 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-14-L:checked ~ .puzzleBody .panelMoveArea--14 .label--H::before {
    transform: rotate(-90deg);
}
#panel-14-L:checked ~ .puzzleBody .panelMoveArea--14 .label--K {
    left: -100%;
    right: auto;
}
#panel-14-L:checked ~ .puzzleBody .panelMoveArea--14 .label--K::before {
    transform: rotate(180deg);
}
#panel-14-L:checked ~ .puzzleBody .panelMoveArea--14 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-14-L:checked ~ .puzzleBody .panelMoveArea--14 .label--P::before {
    transform: rotate(90deg);
}

#panel-14-M:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 75%;
    left: 0;
}
#panel-14-M:checked ~ .puzzleBody .panelMoveArea--14 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-14-M:checked ~ .puzzleBody .panelMoveArea--14 .label--I::before {
    transform: rotate(-90deg);
}
#panel-14-M:checked ~ .puzzleBody .panelMoveArea--14 .label--N {
    left: auto;
    right: -100%;
}
#panel-14-M:checked ~ .puzzleBody .panelMoveArea--14 .label--N::before {
    transform: rotate(0);
}

#panel-14-N:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 75%;
    left: 25%;
}
#panel-14-N:checked ~ .puzzleBody .panelMoveArea--14 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-14-N:checked ~ .puzzleBody .panelMoveArea--14 .label--J::before {
    transform: rotate(-90deg);
}
#panel-14-N:checked ~ .puzzleBody .panelMoveArea--14 .label--M {
    left: -100%;
    right: auto;
}
#panel-14-N:checked ~ .puzzleBody .panelMoveArea--14 .label--M::before {
    transform: rotate(180deg);
}
#panel-14-N:checked ~ .puzzleBody .panelMoveArea--14 .label--O {
    left: auto;
    right: -100%;
}
#panel-14-N:checked ~ .puzzleBody .panelMoveArea--14 .label--O::before {
    transform: rotate(0);
}

#panel-14-O:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 75%;
    left: 50%;
}
#panel-14-O:checked ~ .puzzleBody .panelMoveArea--14 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-14-O:checked ~ .puzzleBody .panelMoveArea--14 .label--K::before {
    transform: rotate(-90deg);
}
#panel-14-O:checked ~ .puzzleBody .panelMoveArea--14 .label--N {
    left: -100%;
    right: auto;
}
#panel-14-O:checked ~ .puzzleBody .panelMoveArea--14 .label--N::before {
    transform: rotate(180deg);
}
#panel-14-O:checked ~ .puzzleBody .panelMoveArea--14 .label--P {
    left: auto;
    right: -100%;
}
#panel-14-O:checked ~ .puzzleBody .panelMoveArea--14 .label--P::before {
    transform: rotate(0);
}

#panel-14-P:checked ~ .puzzleBody .panelMoveArea--14 {
    top: 75%;
    left: 75%;
}
#panel-14-P:checked ~ .puzzleBody .panelMoveArea--14 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-14-P:checked ~ .puzzleBody .panelMoveArea--14 .label--L::before {
    transform: rotate(-90deg);
}
#panel-14-P:checked ~ .puzzleBody .panelMoveArea--14 .label--O {
    left: -100%;
    right: auto;
}
#panel-14-P:checked ~ .puzzleBody .panelMoveArea--14 .label--O::before {
    transform: rotate(180deg);
}

#panelMove-15:checked ~ .puzzleBody .panelMoveArea--15 {
    z-index: 1;
    overflow: visible;
}
#panelMove-15:checked ~ .puzzleBody .panelMoveArea--15 .label {
    animation: dire_opacity ease 0.5s 0.1s forwards;
}
@keyframes dire_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#panel-15-A:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 0;
    left: 0;
}
#panel-15-A:checked ~ .puzzleBody .panelMoveArea--15 .label--B {
    left: auto;
    right: -100%;
}
#panel-15-A:checked ~ .puzzleBody .panelMoveArea--15 .label--B::before {
    transform: rotate(0);
}
#panel-15-A:checked ~ .puzzleBody .panelMoveArea--15 .label--E {
    top: auto;
    bottom: -100%;
}
#panel-15-A:checked ~ .puzzleBody .panelMoveArea--15 .label--E::before {
    transform: rotate(90deg);
}

#panel-15-B:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 0;
    left: 25%;
}
#panel-15-B:checked ~ .puzzleBody .panelMoveArea--15 .label--A {
    left: -100%;
    right: auto;
}
#panel-15-B:checked ~ .puzzleBody .panelMoveArea--15 .label--A::before {
    transform: rotate(180deg);
}
#panel-15-B:checked ~ .puzzleBody .panelMoveArea--15 .label--C {
    left: auto;
    right: -100%;
}
#panel-15-B:checked ~ .puzzleBody .panelMoveArea--15 .label--C::before {
    transform: rotate(0);
}
#panel-15-B:checked ~ .puzzleBody .panelMoveArea--15 .label--F {
    top: auto;
    bottom: -100%;
}
#panel-15-B:checked ~ .puzzleBody .panelMoveArea--15 .label--F::before {
    transform: rotate(90deg);
}

#panel-15-C:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 0;
    left: 50%;
}
#panel-15-C:checked ~ .puzzleBody .panelMoveArea--15 .label--B {
    left: -100%;
    right: auto;
}
#panel-15-C:checked ~ .puzzleBody .panelMoveArea--15 .label--B::before {
    transform: rotate(180deg);
}
#panel-15-C:checked ~ .puzzleBody .panelMoveArea--15 .label--D {
    left: auto;
    right: -100%;
}
#panel-15-C:checked ~ .puzzleBody .panelMoveArea--15 .label--D::before {
    transform: rotate(0);
}
#panel-15-C:checked ~ .puzzleBody .panelMoveArea--15 .label--G {
    top: auto;
    bottom: -100%;
}
#panel-15-C:checked ~ .puzzleBody .panelMoveArea--15 .label--G::before {
    transform: rotate(90deg);
}

#panel-15-D:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 0;
    left: 75%;
}
#panel-15-D:checked ~ .puzzleBody .panelMoveArea--15 .label--C {
    left: -100%;
    right: auto;
}
#panel-15-D:checked ~ .puzzleBody .panelMoveArea--15 .label--C::before {
    transform: rotate(180deg);
}
#panel-15-D:checked ~ .puzzleBody .panelMoveArea--15 .label--H {
    top: auto;
    bottom: -100%;
}
#panel-15-D:checked ~ .puzzleBody .panelMoveArea--15 .label--H::before {
    transform: rotate(90deg);
}

#panel-15-E:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 25%;
    left: 0;
}
#panel-15-E:checked ~ .puzzleBody .panelMoveArea--15 .label--A {
    top: -100%;
    bottom: auto;
}
#panel-15-E:checked ~ .puzzleBody .panelMoveArea--15 .label--A::before {
    transform: rotate(-90deg);
}
#panel-15-E:checked ~ .puzzleBody .panelMoveArea--15 .label--F {
    left: auto;
    right: -100%;
}
#panel-15-E:checked ~ .puzzleBody .panelMoveArea--15 .label--F::before {
    transform: rotate(0);
}
#panel-15-E:checked ~ .puzzleBody .panelMoveArea--15 .label--I {
    top: auto;
    bottom: -100%;
}
#panel-15-E:checked ~ .puzzleBody .panelMoveArea--15 .label--I::before {
    transform: rotate(90deg);
}

#panel-15-F:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 25%;
    left: 25%;
}
#panel-15-F:checked ~ .puzzleBody .panelMoveArea--15 .label--B {
    top: -100%;
    bottom: auto;
}
#panel-15-F:checked ~ .puzzleBody .panelMoveArea--15 .label--B::before {
    transform: rotate(-90deg);
}
#panel-15-F:checked ~ .puzzleBody .panelMoveArea--15 .label--E {
    left: -100%;
    right: auto;
}
#panel-15-F:checked ~ .puzzleBody .panelMoveArea--15 .label--E::before {
    transform: rotate(180deg);
}
#panel-15-F:checked ~ .puzzleBody .panelMoveArea--15 .label--G {
    left: auto;
    right: -100%;
}
#panel-15-F:checked ~ .puzzleBody .panelMoveArea--15 .label--G::before {
    transform: rotate(0);
}
#panel-15-F:checked ~ .puzzleBody .panelMoveArea--15 .label--J {
    top: auto;
    bottom: -100%;
}
#panel-15-F:checked ~ .puzzleBody .panelMoveArea--15 .label--J::before {
    transform: rotate(90deg);
}

#panel-15-G:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 25%;
    left: 50%;
}
#panel-15-G:checked ~ .puzzleBody .panelMoveArea--15 .label--C {
    top: -100%;
    bottom: auto;
}
#panel-15-G:checked ~ .puzzleBody .panelMoveArea--15 .label--C::before {
    transform: rotate(-90deg);
}
#panel-15-G:checked ~ .puzzleBody .panelMoveArea--15 .label--F {
    left: -100%;
    right: auto;
}
#panel-15-G:checked ~ .puzzleBody .panelMoveArea--15 .label--F::before {
    transform: rotate(180deg);
}
#panel-15-G:checked ~ .puzzleBody .panelMoveArea--15 .label--H {
    left: auto;
    right: -100%;
}
#panel-15-G:checked ~ .puzzleBody .panelMoveArea--15 .label--H::before {
    transform: rotate(0);
}
#panel-15-G:checked ~ .puzzleBody .panelMoveArea--15 .label--K {
    top: auto;
    bottom: -100%;
}
#panel-15-G:checked ~ .puzzleBody .panelMoveArea--15 .label--K::before {
    transform: rotate(90deg);
}

#panel-15-H:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 25%;
    left: 75%;
}
#panel-15-H:checked ~ .puzzleBody .panelMoveArea--15 .label--D {
    top: -100%;
    bottom: auto;
}
#panel-15-H:checked ~ .puzzleBody .panelMoveArea--15 .label--D::before {
    transform: rotate(-90deg);
}
#panel-15-H:checked ~ .puzzleBody .panelMoveArea--15 .label--G {
    left: -100%;
    right: auto;
}
#panel-15-H:checked ~ .puzzleBody .panelMoveArea--15 .label--G::before {
    transform: rotate(180deg);
}
#panel-15-H:checked ~ .puzzleBody .panelMoveArea--15 .label--L {
    top: auto;
    bottom: -100%;
}
#panel-15-H:checked ~ .puzzleBody .panelMoveArea--15 .label--L::before {
    transform: rotate(90deg);
}

#panel-15-I:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 50%;
    left: 0;
}
#panel-15-I:checked ~ .puzzleBody .panelMoveArea--15 .label--E {
    top: -100%;
    bottom: auto;
}
#panel-15-I:checked ~ .puzzleBody .panelMoveArea--15 .label--E::before {
    transform: rotate(-90deg);
}
#panel-15-I:checked ~ .puzzleBody .panelMoveArea--15 .label--J {
    left: auto;
    right: -100%;
}
#panel-15-I:checked ~ .puzzleBody .panelMoveArea--15 .label--J::before {
    transform: rotate(0);
}
#panel-15-I:checked ~ .puzzleBody .panelMoveArea--15 .label--M {
    top: auto;
    bottom: -100%;
}
#panel-15-I:checked ~ .puzzleBody .panelMoveArea--15 .label--M::before {
    transform: rotate(90deg);
}

#panel-15-J:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 50%;
    left: 25%;
}
#panel-15-J:checked ~ .puzzleBody .panelMoveArea--15 .label--F {
    top: -100%;
    bottom: auto;
}
#panel-15-J:checked ~ .puzzleBody .panelMoveArea--15 .label--F::before {
    transform: rotate(-90deg);
}
#panel-15-J:checked ~ .puzzleBody .panelMoveArea--15 .label--I {
    left: -100%;
    right: auto;
}
#panel-15-J:checked ~ .puzzleBody .panelMoveArea--15 .label--I::before {
    transform: rotate(180deg);
}
#panel-15-J:checked ~ .puzzleBody .panelMoveArea--15 .label--K {
    left: auto;
    right: -100%;
}
#panel-15-J:checked ~ .puzzleBody .panelMoveArea--15 .label--K::before {
    transform: rotate(0);
}
#panel-15-J:checked ~ .puzzleBody .panelMoveArea--15 .label--N {
    top: auto;
    bottom: -100%;
}
#panel-15-J:checked ~ .puzzleBody .panelMoveArea--15 .label--N::before {
    transform: rotate(90deg);
}

#panel-15-K:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 50%;
    left: 50%;
}
#panel-15-K:checked ~ .puzzleBody .panelMoveArea--15 .label--G {
    top: -100%;
    bottom: auto;
}
#panel-15-K:checked ~ .puzzleBody .panelMoveArea--15 .label--G::before {
    transform: rotate(-90deg);
}
#panel-15-K:checked ~ .puzzleBody .panelMoveArea--15 .label--J {
    left: -100%;
    right: auto;
}
#panel-15-K:checked ~ .puzzleBody .panelMoveArea--15 .label--J::before {
    transform: rotate(180deg);
}
#panel-15-K:checked ~ .puzzleBody .panelMoveArea--15 .label--L {
    left: auto;
    right: -100%;
}
#panel-15-K:checked ~ .puzzleBody .panelMoveArea--15 .label--L::before {
    transform: rotate(0);
}
#panel-15-K:checked ~ .puzzleBody .panelMoveArea--15 .label--O {
    top: auto;
    bottom: -100%;
}
#panel-15-K:checked ~ .puzzleBody .panelMoveArea--15 .label--O::before {
    transform: rotate(90deg);
}

#panel-15-L:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 50%;
    left: 75%;
}
#panel-15-L:checked ~ .puzzleBody .panelMoveArea--15 .label--H {
    top: -100%;
    bottom: auto;
}
#panel-15-L:checked ~ .puzzleBody .panelMoveArea--15 .label--H::before {
    transform: rotate(-90deg);
}
#panel-15-L:checked ~ .puzzleBody .panelMoveArea--15 .label--K {
    left: -100%;
    right: auto;
}
#panel-15-L:checked ~ .puzzleBody .panelMoveArea--15 .label--K::before {
    transform: rotate(180deg);
}
#panel-15-L:checked ~ .puzzleBody .panelMoveArea--15 .label--P {
    top: auto;
    bottom: -100%;
}
#panel-15-L:checked ~ .puzzleBody .panelMoveArea--15 .label--P::before {
    transform: rotate(90deg);
}

#panel-15-M:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 75%;
    left: 0;
}
#panel-15-M:checked ~ .puzzleBody .panelMoveArea--15 .label--I {
    top: -100%;
    bottom: auto;
}
#panel-15-M:checked ~ .puzzleBody .panelMoveArea--15 .label--I::before {
    transform: rotate(-90deg);
}
#panel-15-M:checked ~ .puzzleBody .panelMoveArea--15 .label--N {
    left: auto;
    right: -100%;
}
#panel-15-M:checked ~ .puzzleBody .panelMoveArea--15 .label--N::before {
    transform: rotate(0);
}

#panel-15-N:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 75%;
    left: 25%;
}
#panel-15-N:checked ~ .puzzleBody .panelMoveArea--15 .label--J {
    top: -100%;
    bottom: auto;
}
#panel-15-N:checked ~ .puzzleBody .panelMoveArea--15 .label--J::before {
    transform: rotate(-90deg);
}
#panel-15-N:checked ~ .puzzleBody .panelMoveArea--15 .label--M {
    left: -100%;
    right: auto;
}
#panel-15-N:checked ~ .puzzleBody .panelMoveArea--15 .label--M::before {
    transform: rotate(180deg);
}
#panel-15-N:checked ~ .puzzleBody .panelMoveArea--15 .label--O {
    left: auto;
    right: -100%;
}
#panel-15-N:checked ~ .puzzleBody .panelMoveArea--15 .label--O::before {
    transform: rotate(0);
}

#panel-15-O:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 75%;
    left: 50%;
}
#panel-15-O:checked ~ .puzzleBody .panelMoveArea--15 .label--K {
    top: -100%;
    bottom: auto;
}
#panel-15-O:checked ~ .puzzleBody .panelMoveArea--15 .label--K::before {
    transform: rotate(-90deg);
}
#panel-15-O:checked ~ .puzzleBody .panelMoveArea--15 .label--N {
    left: -100%;
    right: auto;
}
#panel-15-O:checked ~ .puzzleBody .panelMoveArea--15 .label--N::before {
    transform: rotate(180deg);
}
#panel-15-O:checked ~ .puzzleBody .panelMoveArea--15 .label--P {
    left: auto;
    right: -100%;
}
#panel-15-O:checked ~ .puzzleBody .panelMoveArea--15 .label--P::before {
    transform: rotate(0);
}

#panel-15-P:checked ~ .puzzleBody .panelMoveArea--15 {
    top: 75%;
    left: 75%;
}
#panel-15-P:checked ~ .puzzleBody .panelMoveArea--15 .label--L {
    top: -100%;
    bottom: auto;
}
#panel-15-P:checked ~ .puzzleBody .panelMoveArea--15 .label--L::before {
    transform: rotate(-90deg);
}
#panel-15-P:checked ~ .puzzleBody .panelMoveArea--15 .label--O {
    left: -100%;
    right: auto;
}
#panel-15-P:checked ~ .puzzleBody .panelMoveArea--15 .label--O::before {
    transform: rotate(180deg);
}
.panelGraphic::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    opacity: 0;
    border-style: solid;
    border-width: 5px;
}
#panelMove-1:checked ~ .puzzleBody .panelMoveArea--1 .panelGraphic::before,
#panelMove-2:checked ~ .puzzleBody .panelMoveArea--2 .panelGraphic::before,
#panelMove-3:checked ~ .puzzleBody .panelMoveArea--3 .panelGraphic::before,
#panelMove-4:checked ~ .puzzleBody .panelMoveArea--4 .panelGraphic::before,
#panelMove-5:checked ~ .puzzleBody .panelMoveArea--5 .panelGraphic::before,
#panelMove-6:checked ~ .puzzleBody .panelMoveArea--6 .panelGraphic::before,
#panelMove-7:checked ~ .puzzleBody .panelMoveArea--7 .panelGraphic::before,
#panelMove-8:checked ~ .puzzleBody .panelMoveArea--8 .panelGraphic::before,
#panelMove-9:checked ~ .puzzleBody .panelMoveArea--9 .panelGraphic::before,
#panelMove-10:checked ~ .puzzleBody .panelMoveArea--10 .panelGraphic::before,
#panelMove-11:checked ~ .puzzleBody .panelMoveArea--11 .panelGraphic::before,
#panelMove-12:checked ~ .puzzleBody .panelMoveArea--12 .panelGraphic::before,
#panelMove-13:checked ~ .puzzleBody .panelMoveArea--13 .panelGraphic::before,
#panelMove-14:checked ~ .puzzleBody .panelMoveArea--14 .panelGraphic::before,
#panelMove-15:checked ~ .puzzleBody .panelMoveArea--15 .panelGraphic::before {
    animation: focus ease-in-out 0.6s infinite alternate;
}

@keyframes focus {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*------------------------------------------------------------------------------------------- part2 -----*/

.part2 {
	position: relative;
  margin: 0;
}

.part2-innr {
  margin: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 1;
}


.part2::before,
.part2::after,
.part2-innr::before,
.part2-innr::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: .5vmin;
  height: .5vmin;
  border-radius: 50%;
  color: transparent;
}

.part2::before {
  box-shadow: 93vw 63vh .3vmin rgba(255,255,255,.8),
              3vw 17vh .3vmin rgba(255,255,255,.8),
              28vw 85vh .3vmin rgba(255,255,255,.8),
              97vw 82vh .3vmin rgba(255,255,255,.8),
              55vw 83vh .3vmin rgba(255,255,255,.8),
              74vw 72vh .3vmin rgba(255,255,255,.8),
              84vw 11vh .3vmin rgba(255,255,255,.8),
              32vw 6vh .3vmin rgba(255,255,255,.8),
              45vw 92vh .3vmin rgba(255,255,255,.8),
              98vw 57vh .3vmin rgba(255,255,255,.8),
              63vw 98vh .3vmin rgba(255,255,255,.8),
              90vw 46vh .3vmin rgba(255,255,255,.8),
              50vw 86vh .3vmin rgba(255,255,255,.8),
              38vw 21vh .3vmin rgba(255,255,255,.8),
              74vw 2vh .3vmin rgba(255,255,255,.8),
              89vw 22vh .3vmin rgba(255,255,255,.8),
              39vw 0vh .3vmin rgba(255,255,255,.8),
              25vw 89vh .3vmin rgba(255,255,255,.8),
              54vw 58vh .3vmin rgba(255,255,255,.8),
              81vw 39vh .3vmin rgba(255,255,255,.8),
              51vw 8vh .3vmin rgba(255,255,255,.8),
              24vw 56vh .3vmin rgba(255,255,255,.8),
              50vw 23vh .3vmin rgba(255,255,255,.8),
              62vw 34vh .3vmin rgba(255,255,255,.8),
              10vw 77vh .3vmin rgba(255,255,255,.8),
              92vw 45vh .3vmin rgba(255,255,255,.8),
              70vw 40vh .3vmin rgba(255,255,255,.8),
              2vw 53vh .3vmin rgba(255,255,255,.8),
              3vw 54vh .3vmin rgba(255,255,255,.8),
              18vw 21vh .3vmin rgba(255,255,255,.8),
              48vw 47vh .3vmin rgba(255,255,255,.8),
              83vw 96vh .3vmin rgba(255,255,255,.8),
              26vw 32vh .3vmin rgba(255,255,255,.8),
              46vw 9vh .3vmin rgba(255,255,255,.8),
              2vw 13vh .3vmin rgba(255,255,255,.8),
              29vw 63vh .3vmin rgba(255,255,255,.8),
              17vw 90vh .3vmin rgba(255,255,255,.8),
              78vw 9vh .3vmin rgba(255,255,255,.8),
              15vw 39vh .3vmin rgba(255,255,255,.8),
              90vw 5vh .3vmin rgba(255,255,255,.8);
}

.part2::after { 
  box-shadow: 67vw 35vh .2vmin .1vmin rgba(255,200,200,.8),
              89vw 13vh .2vmin .1vmin rgba(255,200,200,.8),
              77vw 62vh .2vmin .1vmin rgba(255,200,200,.8),
              1vw 74vh .2vmin .1vmin rgba(255,200,200,.8),
              38vw 15vh .2vmin .1vmin rgba(255,200,200,.8),
              79vw 10vh .2vmin .1vmin rgba(255,200,200,.8),
              16vw 47vh .2vmin .1vmin rgba(255,200,200,.8),
              74vw 71vh .2vmin .1vmin rgba(255,200,200,.8),
              30vw 96vh .2vmin .1vmin rgba(255,200,200,.8),
              13vw 98vh .2vmin .1vmin rgba(255,200,200,.8),
              9vw 40vh .2vmin .1vmin rgba(255,200,200,.8),
              9vw 71vh .2vmin .1vmin rgba(255,200,200,.8),
              12vw 93vh .2vmin .1vmin rgba(255,200,200,.8),
              91vw 26vh .2vmin .1vmin rgba(255,200,200,.8),
              73vw 48vh .2vmin .1vmin rgba(255,200,200,.8),
              61vw 46vh .2vmin .1vmin rgba(255,200,200,.8),
              20vw 3vh .2vmin .1vmin rgba(255,200,200,.8),
              90vw 59vh .2vmin .1vmin rgba(255,200,200,.8),
              48vw 72vh .2vmin .1vmin rgba(255,200,200,.8),
              91vw 68vh .2vmin .1vmin rgba(255,200,200,.8);
}

.part2-innr::before {
  box-shadow: 30vw 90vh .2vmin rgba(190,200,255,.9),
              93vw 64vh .2vmin rgba(190,200,255,.9),
              75vw 80vh .2vmin rgba(190,200,255,.9),
              37vw 24vh .2vmin rgba(190,200,255,.9),
              83vw 58vh .2vmin rgba(190,200,255,.9),
              12vw 36vh .2vmin rgba(190,200,255,.9),
              62vw 82vh .2vmin rgba(190,200,255,.9),
              87vw 91vh .2vmin rgba(190,200,255,.9),
              9vw 2vh .2vmin rgba(190,200,255,.9),
              99vw 46vh .2vmin rgba(190,200,255,.9),
              39vw 86vh .2vmin rgba(190,200,255,.9),
              48vw 42vh .2vmin rgba(190,200,255,.9),
              53vw 24vh .2vmin rgba(190,200,255,.9),
              63vw 42vh .2vmin rgba(190,200,255,.9),
              2vw 53vh .2vmin rgba(190,200,255,.9),
              67vw 11vh .2vmin rgba(190,200,255,.9),
              32vw 44vh .2vmin rgba(190,200,255,.9),
              0vw 82vh .2vmin rgba(190,200,255,.9),
              51vw 47vh .2vmin rgba(190,200,255,.9),
              74vw 30vh .2vmin rgba(190,200,255,.9);
}

.part2-innr::after {
  box-shadow: 80vw 64vh .1vmin rgba(200,255,230,.7),
              32vw 45vh .1vmin rgba(200,255,230,.7),
              65vw 62vh .1vmin rgba(200,255,230,.7),
              22vw 55vh .1vmin rgba(200,255,230,.7),
              68vw 19vh .1vmin rgba(200,255,230,.7),
              54vw 34vh .1vmin rgba(200,255,230,.7),
              1vw 56vh .1vmin rgba(200,255,230,.7),
              95vw 1vh .1vmin rgba(200,255,230,.7),
              60vw 93vh .1vmin rgba(200,255,230,.7),
              14vw 82vh .1vmin rgba(200,255,230,.7),
              6vw 64vh .1vmin rgba(200,255,230,.7),
              19vw 12vh .1vmin rgba(200,255,230,.7),
              25vw 39vh .1vmin rgba(200,255,230,.7),
              21vw 36vh .1vmin rgba(200,255,230,.7),
              4vw 10vh .1vmin rgba(200,255,230,.7),
              85vw 70vh .1vmin rgba(200,255,230,.7),
              54vw 93vh .1vmin rgba(200,255,230,.7),
              9vw 46vh .1vmin rgba(200,255,230,.7),
              63vw 59vh .1vmin rgba(200,255,230,.7),
              48vw 28vh .1vmin rgba(200,255,230,.7);
}

.part2 h1 {
  margin: 0;
  height: 12vmin;
  width: 90vmin;
  display: flex;
  justify-content: center;
  position: relative;
}

.part2 h1::before {
  content: "";
  display: block;
  position: absolute;
  top: -18vmin;
  left: 21vmin;
  width: 48vmin;
  height: 48vmin;
  border-radius: 50%;
  border: 1.3vmin solid currentColor;
  box-sizing: border-box;
}

.part2 em {
  font-family: 'Josefin Sans', sans-serif;
  color: currentColor;
  font-size: 15vmin;
  position: relative;
  font-style: normal;
  width: 20vmin;
  text-align: center;
}

.part2 em.planet {
  -webkit-animation: planet-rotate 4s linear infinite;
  animation: planet-rotate 4s linear infinite;
  position: relative;
}

.part2 em.planet::before {
  content: "";
  position: absolute;
  top: -.5vmin;
  left: 3.5vmin;
  z-index: -1;
  width: 13vmin;
  height: 13vmin;
  border-radius: 50%;
  background: #00234f;
}

.part2 em.planet.left {
  -webkit-transform-origin: 30vmin 6vmin;
  transform-origin: 30vmin 6vmin;
}

.part2 em.planet.right {
  -webkit-transform-origin: -15vmin 6vmin;
  transform-origin: -15vmin 6vmin;
}

@-webkit-keyframes planet-rotate {
  to {
    -webkit-transform: rotate(1turn);
  }
}

@keyframes planet-rotate {
  to {
    transform: rotate(1turn);
  }
}



/*------------------------------------------------------------------------------------------- part3 -----*/

@import url(https://fonts.googleapis.com/css?family=Lato:900);
*, *:before, *:after{
  box-sizing:border-box;
}
.part3 {
  font-family: 'Lato', sans-serif;
	background-color: #FFF;
}
div.foo{
  width: 90%;
  margin: 0 auto;
  text-align: center;
}
.letter{
  display: inline-block;
  font-weight: 900;
  font-size: 8em;
  margin: 0.2em;
  position: relative;
  color: #00B4F1;
  transform-style: preserve-3d;
  perspective: 400;
  z-index: 1;
}
.letter:before, .letter:after{
  position:absolute;
  content: attr(data-letter);
  transform-origin: top left;
  top:0;
  left:0;
}
.letter, .letter:before, .letter:after{
  transition: all 0.3s ease-in-out;
}
.letter:before{
  color: #fff;
  text-shadow: 
    -1px 0px 1px rgba(255,255,255,.8),
    1px 0px 1px rgba(0,0,0,.8);
  z-index: 3;
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}
.letter:after{
  color: rgba(0,0,0,.11);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}
.letter:hover:before{
  color: #fafafa;
  transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
}
.letter:hover:after{
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}



/*------------------------------------------------------------------------------------------- part4 -----*/

@import url("//fonts.googleapis.com/css?family=Pacifico&text=Pure");
@import url("//fonts.googleapis.com/css?family=Roboto:700&text=css");
@import url("//fonts.googleapis.com/css?family=Kaushan+Script&text=!");

.part4 {
  position: relative;
  min-height: 450px;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);
}

.stage {
  height: 400px;
  width: 600px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  perspective: 9999px;
  transform-style: preserve-3d;
}

.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s;
  animation-fill-mode: forwards;
  transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}

.layer:after {
  font: 200px/0.65 "Pacifico", "Kaushan Script", Futura, "Roboto", "Trebuchet MS", Helvetica, sans-serif;
  content: "3D text\a only css";
  white-space: pre;
  text-align: center;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50px;
  color: whitesmoke;
  letter-spacing: -2px;
  line-height: 10rem;
  text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}

.layer:nth-child(1):after {
  transform: translateZ(0px);
}

.layer:nth-child(2):after {
  transform: translateZ(-1.5px);
}

.layer:nth-child(3):after {
  transform: translateZ(-3px);
}

.layer:nth-child(4):after {
  transform: translateZ(-4.5px);
}

.layer:nth-child(5):after {
  transform: translateZ(-6px);
}

.layer:nth-child(6):after {
  transform: translateZ(-7.5px);
}

.layer:nth-child(7):after {
  transform: translateZ(-9px);
}

.layer:nth-child(8):after {
  transform: translateZ(-10.5px);
}

.layer:nth-child(9):after {
  transform: translateZ(-12px);
}

.layer:nth-child(10):after {
  transform: translateZ(-13.5px);
}

.layer:nth-child(11):after {
  transform: translateZ(-15px);
}

.layer:nth-child(12):after {
  transform: translateZ(-16.5px);
}

.layer:nth-child(13):after {
  transform: translateZ(-18px);
}

.layer:nth-child(14):after {
  transform: translateZ(-19.5px);
}

.layer:nth-child(15):after {
  transform: translateZ(-21px);
}

.layer:nth-child(16):after {
  transform: translateZ(-22.5px);
}

.layer:nth-child(17):after {
  transform: translateZ(-24px);
}

.layer:nth-child(18):after {
  transform: translateZ(-25.5px);
}

.layer:nth-child(19):after {
  transform: translateZ(-27px);
}

.layer:nth-child(20):after {
  transform: translateZ(-28.5px);
}

.layer:nth-child(n+10):after {
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}

.layer:nth-child(n+11):after {
  -webkit-text-stroke: 15px dodgerblue;
  text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}

.layer:nth-child(n+12):after {
  -webkit-text-stroke: 15px #0077ea;
}

.layer:last-child:after {
  -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}

.layer:first-child:after {
  color: #fff;
  text-shadow: none;
}

@keyframes ಠ_ಠ {
  100% {
    transform: rotateY(-40deg) rotateX(-43deg);
  }
}



/*------------------------------------------------------------------------------------------- profile -----*/

.profile .card{
    position : relative ;
    z-index : 2 ;
    display : flex ;
    flex-direction : column ;
    align-items : center ;
    justify-content : flex-end ;
    width : 280px ;
    height : 420px ;
    box-sizing : border-box ;
    text-decoration : none ;
    perspective : 700px ;
}
.profile .main{
    display : flex ;
    flex-direction : column ;
    align-items : center ;
    width : 100% ;
    height : 100% ;
    padding : 32px ;
    box-sizing : border-box ;
    border-radius : 24px ;
    backdrop-filter : blur(6px) ;
    border : solid 2px rgba(255,255,255,.3) ;
    background : linear-gradient( 135deg , rgba(255,255,255,.4) 8% , rgba(255,255,255,.1) 60% , rgba(255,255,255,.2) 92% ) ;
    transition : all ease .7s ;
    color : #fff ;
    box-shadow : 2px 2px 3px rgba(255,255,255,.2) inset ;
}
.profile .touch{
    position : absolute  ;
    z-index : 2 ;
    width : 33.3333% ;
    height : 33.3333% ;
    box-sizing : border-box ;
}
.profile .touch__1{
    top : 0 ;
    left : 0 ;
}
.profile .touch__2{
    top : 0 ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
}
.profile .touch__3{
    top : 0 ;
    right : 0 ;
}
.profile .touch__4{
    top : 33.3333% ;
    left : 0 ;
}
.profile .touch__6{
    top : 33.3333% ;
    right : 0 ;
}
.profile .touch__7{
    bottom : 0 ;
    left : 0 ;
}
.profile .touch__8{
    bottom : 0 ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
}
.profile .touch__9{
    bottom : 0 ;
    right : 0 ;
}
.profile .icon{
    position : relative ;
    z-index : 10 ;
    width : 140px ;
    height : 140px ;
    border-radius : 50% ;
    background : #fff ;
    overflow : hidden ;
    transition : all ease 1s ;
}
.profile .img{
    width : 100% ;
}
.profile .name{
    position : relative ;
    z-index : 1 ;
    font-size : 14px ;
    margin : 16px 0 8px ;
}
.profile .account{
    position : relative ;
    z-index : 1 ;
    display : block ;
    font-size : 10px ;
    text-decoration : none ;
    color : #ddd ;
    margin : 0 0 32px 0 ;
}
.profile .text{
    position : relative ;
    width : 100% ;
    margin : 0 ;
    box-sizing : border-box ;
    border-radius : 8px ;
    transition : all ease 1s ;
}
.profile .link{
    z-index : 4 ;
    display : flex ;
    justify-content : center ; 
    align-items : center ;
    padding : 8px 16px ;
    color : #fff ;
    background : linear-gradient( 90deg , #2ad2ff , #00e998 ) ;
}
.profile .comment{
    z-index : 3 ;
    padding : 12px;
    font-size : 12px ;
    line-height : 1.4 ;
    color : #444 ;
    background : #FFF ;
}
.profile .link:not(:last-child){
    margin-bottom : 16px ;
}
.profile .touch__1:hover ~ .main{
    transform : rotateX(20deg) rotateY(-20deg) rotateZ(10deg);
}
.profile .touch__1:hover ~ .main .icon{
    transform : translateX(-20px) translateY(-10px) translateZ(60px);
    box-shadow : 20px 20px 24px rgba(0,0,0,.2) ;
}
.profile .touch__2:hover ~ .main{
    transform : rotateX(20deg) rotateY(0) rotateZ(0);
}
.profile .touch__2:hover ~ .main .icon{
    transform : translateX(0) translateY(-10px) translateZ(60px);
    box-shadow : 0 20px 24px rgba(0,0,0,.2) ;
}
.profile .touch__3:hover ~ .main{
    transform : rotateX(20deg) rotateY(20deg) rotateZ(-10deg);
}
.profile .touch__3:hover ~ .main .icon{
    transform : translateX(20px) translateY(-10px) translateZ(60px);
    box-shadow : -20px 20px 24px rgba(0,0,0,.2) ;
}
.profile .touch__4:hover ~ .main{
    transform : rotateX(0) rotateY(-40deg) rotateZ(0);
}
.profile .touch__6:hover ~ .main{
    transform : rotateX(0) rotateY(40deg) rotateZ(0);
}
.profile .touch__7:hover ~ .main{
    transform : rotateX(-20deg) rotateY(-20deg) rotateZ(-10deg);
}
.profile .touch__7:hover ~ .main .text{
    transform : translateX(-20px) translateY(10px) translateZ(60px);
    box-shadow : 20px -20px 24px rgba(0,0,0,.2) ;
}
.profile .touch__8:hover ~ .main{
    transform : rotateX(-20deg) rotateY(0) rotateZ(0);
}
.profile .touch__8:hover ~ .main .text{
    transform : translateX(0) translateY(10px) translateZ(60px);
    box-shadow : 0 -20px 24px rgba(0,0,0,.2) ;
}
.profile .touch__9:hover ~ .main{
    transform : rotateX(-20deg) rotateY(20deg) rotateZ(10deg);
}
.profile .touch__9:hover ~ .main .text{
    transform : translateX(20px) translateY(10px) translateZ(60px);
    box-shadow : -20px -20px 24px rgba(0,0,0,.2) ;
}







/* 本体には関係ないスタイル */
.profile .container{
    position : relative ;
    height : 600px ;
    display : flex ;
    flex-direction : column ;
    justify-content : center ;
    align-items : center ;
    background-color : hsla(205,100%,13%,1) ;
    background-image:
    radial-gradient(at 49% 49%, hsla(191,77%,26%,1) 0px, transparent 50%),
    radial-gradient(at 99% 44%, hsla(208,62%,38%,1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsla(208,39%,40%,1) 0px, transparent 50%),
    radial-gradient(at 62% 100%, hsla(192,71%,38%,1) 0px, transparent 50%),
    radial-gradient(at 1% 100%, hsla(196,77%,18%,1) 0px, transparent 50%),
    radial-gradient(at 7% 69%, hsla(200,45%,39%,1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(191,52%,49%,1) 0px, transparent 50%);
    font-family : sans-serif ;
}
.profile .circle{
    position : absolute ;
    z-index : 1 ;
    aspect-ratio : 1 / 1 ;
    box-sizing : border-box ;
    border-radius : 16px ;
    animation : rotate ease infinite ;
}
.profile .circle_1{
    top : 60px ;
    left : 100px ;
    width : 120px ;
    background : #0097c8 ;
    animation-duration : 20s ;
    animation-direction : alternate ;
}
.profile .circle_2{
    top : 40px ;
    right : 120px ;
    width : 80px ;
    border : solid 4px rgba(255,255,255,.3) ;
    animation-duration : 25s ;
    animation-direction : alternate-reverse ;
}
.profile .circle_3{
    top : 240px ;
    left : 200px ;
    width : 60px ;
    border : solid 4px rgba(255,255,255,.3) ;
    animation-duration : 21s ;
    animation-direction : alternate-reverse ;
}
.profile .circle_4{
    top : 220px ;
    right : 20px ;
    width : 100px ;
    border : solid 4px #0097c8 ;
    animation-duration : 22s ;
    animation-direction : alternate ;
}
.profile .circle_5{
    bottom : 170px ;
    left : 50px ;
    width : 80px ;
    background : rgba(255,255,255,.3);
    animation-duration : 18s ;
    animation-direction : alternate ;
}
.profile .circle_6{
    bottom : 70px ;
    right : 140px ;
    width : 70px ;
    background : rgba(255,255,255,.3) ;
    animation-duration : 26s ;
    animation-direction : alternate-reverse ;
}
.profile .circle_7{
    bottom : 60px ;
    left : 240px ;
    width : 50px ;
    border : solid 4px #0097c8 ;
    animation-duration : 24s ;
    animation-direction : alternate ;
}
.profile .circle_8{
    top : 340px ;
    right : 200px ;
    width : 50px ;
    background : #0097c8 ;
    animation-duration : 25s ;
    animation-direction : alternate-reverse ;
}
@keyframes rotate{
    0%  { transform : rotate(0) ;}
    100%{ transform : rotate(360deg) ;}
}