/* Note!
I got the idea to base this code on colors instead of positons from Nils! */

/* MARK: Custom properties */
:root {
    /* Colors */
    --color-rubiks-front: cyan;
    --color-rubiks-back: limegreen;
    --color-rubiks-top: white;
    --color-rubiks-bottom: yellow;
    --color-rubiks-left: red;
    --color-rubiks-right: orange;

    /* Animation */
    --animation-duration: 1s;
    --animation-easing: ease-out;

    /* Sizing */
    --size-full-cube: 20rem;
    --size-one-cube: calc(var(--size-full-cube) / 3);

    /* Translate cubes mesurements */
    --translate-one-side: calc(var(--size-one-cube) / 2);
    --translate-one-cube: calc(var(--size-one-cube) / 2);


    /* Translate positions */
    --translate-one-cube-left: calc(var(--translate-one-cube)* -1);
    --translate-one-cube-right: var(--translate-one-cube);
    --translate-one-cube-up: calc(var(--translate-one-cube) * -1);
    --translate-one-cube-down: var(--translate-one-cube);
    --translate-one-cube-front: var(--translate-one-cube);
    --translate-one-cube-back: calc(var(--translate-one-cube) * -1);


    /* Declare colors */
    /* !!! remove unnessecary sides  */
    /* Explanation abbreviations
        Format: [cube]-[side]-[color] 
        Afkortingen:
            Cube:   
                    ftl = front top left
                    babor = back bottom right
            Side:   
                    Sf = side front
                    Sba = side back
            Color: 
                    C = color default
                    C1 = color rotation 1 
            */

    /* ===========================
             MARK: Front
   =========================== */
    /* MARK: Left */
    /* front top left cube side color definitions */
    /* side = front */
    --ftl-Sf-C: var(--color-rubiks-front);

    /* side = back */
    --ftl-Sba-C: var(--color-rubiks-back);

    /* side = top */
    --ftl-St-C: var(--color-rubiks-top);

    /* side = bottom */
    --ftl-Sbo-C: var(--color-rubiks-bottom);

    /* side = left */
    --ftl-Sl-C: var(--color-rubiks-left);

    /* side = right */
    --ftl-Sr-C: var(--color-rubiks-right);

    /* front bottom left cube side color definitions */
    /* side = front */
    --fbol-Sf-C: var(--color-rubiks-front);

    /* side = back */
    --fbol-Sba-C: var(--color-rubiks-back);

    /* side = top */
    --fbol-St-C: var(--color-rubiks-top);

    /* side = bottom */
    --fbol-Sbo-C: var(--color-rubiks-bottom);

    /* side = left */
    --fbol-Sl-C: var(--color-rubiks-left);

    /* side = right */
    --fbol-Sr-C: var(--color-rubiks-right);


    /* MARK: Right */
    /* front top right cube side color definitions */
    /* side = front */
    --ftr-Sf-C: var(--color-rubiks-front);

    /* side = back */
    --ftr-Sba-C: var(--color-rubiks-back);

    /* side = top */
    --ftr-St-C: var(--color-rubiks-top);

    /* side = bottom */
    --ftr-Sbo-C: var(--color-rubiks-bottom);

    /* side = left */
    --ftr-Sl-C: var(--color-rubiks-left);

    /* side = right */
    --ftr-Sr-C: var(--color-rubiks-right);

    /*front bottom right cube side color definitions */
    /* side = front */
    --fbor-Sf-C: var(--color-rubiks-front);

    /* side = back */
    --fbor-Sba-C: var(--color-rubiks-back);

    /* side = top */
    --fbor-St-C: var(--color-rubiks-top);

    /* side = bottom */
    --fbor-Sbo-C: var(--color-rubiks-bottom);

    /* side = left */
    --fbor-Sl-C: var(--color-rubiks-left);

    /* side = right */
    --fbor-Sr-C: var(--color-rubiks-right);


    /* ===========================
             MARK: Back
   =========================== */
    /* MARK: Left */
    /* back top left cube side color definitions */
    /* side = front */
    --batl-Sf-C: var(--color-rubiks-front);

    /* side = back */
    --batl-Sba-C: var(--color-rubiks-back);

    /* side = top */
    --batl-St-C: var(--color-rubiks-top);

    /* side = bottom */
    --batl-Sbo-C: var(--color-rubiks-bottom);

    /* side = left */
    --batl-Sl-C: var(--color-rubiks-left);

    /* side = right */
    --batl-Sr-C: var(--color-rubiks-right);

    /* back bottom left cube side color definitions */
    /* side = front */
    --babol-Sf-C: var(--color-rubiks-front);

    /* side = back */
    --babol-Sba-C: var(--color-rubiks-back);

    /* side = top */
    --babol-St-C: var(--color-rubiks-top);

    /* side = bottom */
    --babol-Sbo-C: var(--color-rubiks-bottom);

    /* side = left */
    --babol-Sl-C: var(--color-rubiks-left);

    /* side = right */
    --babol-Sr-C: var(--color-rubiks-right);


    /* MARK: Right */
    /* back top right cube side color definitions */
    /* side = front */
    --batr-Sf-C: var(--color-rubiks-front);

    /* side = back */
    --batr-Sba-C: var(--color-rubiks-back);

    /* side = top */
    --batr-St-C: var(--color-rubiks-top);

    /* side = bottom */
    --batr-Sbo-C: var(--color-rubiks-bottom);

    /* side = left */
    --batr-Sl-C: var(--color-rubiks-left);

    /* side = right */
    --batr-Sr-C: var(--color-rubiks-right);

    /* back bottom right cube side color definitions */
    /* side = front */
    --babor-Sf-C: var(--color-rubiks-front);

    /* side = back */
    --babor-Sba-C: var(--color-rubiks-back);

    /* side = top */
    --babor-St-C: var(--color-rubiks-top);

    /* side = bottom */
    --babor-Sbo-C: var(--color-rubiks-bottom);

    /* side = left */
    --babor-Sl-Cf: var(--color-rubiks-left);

    /* side = right */
    --babor-Sr-C: var(--color-rubiks-right);

}

/* MARK: scene */
/* Sources: 
- https://css-tricks.com/how-css-perspective-works/
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/perspective
- https://css-tricks.com/almanac/properties/t/transform-style/
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform-style
 */
main {
    perspective: 30rem;
}

main rubiks {
    transform-style: preserve-3d;

    display: grid;
    justify-self: center;
    align-self: center;

    padding: 5rem;

    /* Source Nienke: https://codepen.io/Nienke-the-styleful/pen/WbGjKKp 
    https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/rotate3d */
    transform: rotate3d(5, 10, 0, -30deg);
}

/* source: Sanne: https://codepen.io/lisa_luijk/pen/vEXxmzP */
html:has([value="standardRubiks"]:checked) {
    --standaardCube: true;
}

@container style(--standaardCube: true) {
    body {

        --color-rubiks-front: #3057D9;
        --color-rubiks-back: limegreen;
        --color-rubiks-top: white;
        --color-rubiks-bottom: yellow;
        --color-rubiks-left: red;
        --color-rubiks-right: orange;

        & cube>* {
            border: 0.3rem solid black;
            border-radius: 0.3rem;
        }

    }
}

html:has([value="speedCube"]:checked) {
    --speedCube: true;
}

@container style(--speedCube: true) {
    body {

        --color-rubiks-front: #05e2ff;
        --color-rubiks-back: #4fff6c;
        --color-rubiks-top: white;
        --color-rubiks-bottom: #ebfe5d;
        --color-rubiks-left: #ff3549;
        --color-rubiks-right: #ffb432;

        & front {
            --color-rubiks-border: #39baed;
        }

        & back {
            --color-rubiks-border: #29da47;
        }

        & top {
            --color-rubiks-border: rgb(200, 191, 204);
        }

        & bottom {
            --color-rubiks-border: #f7d128;
        }

        & left {
            --color-rubiks-border: #e91a47;
        }

        & right {
            --color-rubiks-border: #e27019;
        }


        & cube>* {
            border: 0.1rem solid var(--color-rubiks-border);
            border-radius: 0.5rem;
        }

    }
}

html:has([value="picasso"]:checked) {
    --picasso: true;
}

@container style(--picasso: true) {
    body {
        --size-one-cube: calc(var(--size-full-cube) / 8);

        & cube>* {
            border: 0.2rem solid black;
            border-radius: 0.3rem;
        }

    }
}

html:has([value="proportions"]:checked) {
    --proportions: true;
}

@container style(--proportions: true) {
    body {
        --size-one-cube: calc(var(--size-full-cube) / 2);

        & cube>* {
            border: 0.2rem solid black;
            border-radius: 0.3rem;
        }

    }
}

/* html:has([value="artsy"]:checked) {
    --artsy: true;
}

@container style(--artsy: true) {
    body {

        & cube:nth-of-type(1){
            --size-one-cube: calc(var(--size-full-cube) / 2);
        }
    
        & cube>* {
            border: 0.2rem solid black;
            border-radius: 0.3rem;
        }

    }
} */

html:has([value="impossible"]:checked) {
    --impossible: true;
}

@container style(--impossible: true) {
    body {
        --color-rubiks-front: #3057d918;
        --color-rubiks-back: rgba(50, 205, 50, 0.056);
        --color-rubiks-top: rgba(255, 255, 255, 0.082);
        --color-rubiks-bottom: rgba(255, 255, 0, 0.059);
        --color-rubiks-left: rgba(255, 0, 0, 0.058);
        --color-rubiks-right: rgba(255, 166, 0, 0.04);

        & cube>* {
            border: 0.3rem solid black;
            border-radius: 0.3rem;
        }

    }
}


/* MARK: cubes */

/* source: concept om blokjes te plaatsen met custom properties afgekeken van Nienke: https://codepen.io/Nienke-the-styleful/pen/WbGjKKp */
/* front top left */
cube:nth-of-type(1) {
    --translate-x: var(--translate-one-cube-left);
    --translate-y: var(--translate-one-cube-up);
    --translate-z: var(--translate-one-cube-front);
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --rotate-z: 0deg;
}

/* front top right */
cube:nth-of-type(2) {
    --translate-x: var(--translate-one-cube-right);
    --translate-y: var(--translate-one-cube-up);
    --translate-z: var(--translate-one-cube-front);
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --rotate-z: 0deg;
}

/* front bottom left */
cube:nth-of-type(3) {
    --translate-x: var(--translate-one-cube-left);
    --translate-y: var(--translate-one-cube-down);
    --translate-z: var(--translate-one-cube-front);
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --rotate-z: 0deg;
}

/* front bottom right */
cube:nth-of-type(4) {
    --translate-x: var(--translate-one-cube-right);
    --translate-y: var(--translate-one-cube-down);
    --translate-z: var(--translate-one-cube-front);
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --rotate-z: 0deg;
}

/* back top left */
cube:nth-of-type(5) {
    --translate-x: var(--translate-one-cube-left);
    --translate-y: var(--translate-one-cube-up);
    --translate-z: var(--translate-one-cube-back);
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --rotate-z: 0deg;
}

/* back top right */
cube:nth-of-type(6) {
    --translate-x: var(--translate-one-cube-right);
    --translate-y: var(--translate-one-cube-up);
    --translate-z: var(--translate-one-cube-back);
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --rotate-z: 0deg;
}

/* back bottom left */
cube:nth-of-type(7) {
    --translate-x: var(--translate-one-cube-left);
    --translate-y: var(--translate-one-cube-down);
    --translate-z: var(--translate-one-cube-back);
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --rotate-z: 0deg;
}

/* back bottom right */
cube:nth-of-type(8) {
    --translate-x: var(--translate-one-cube-right);
    --translate-y: var(--translate-one-cube-down);
    --translate-z: var(--translate-one-cube-back);
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --rotate-z: 0deg;
}


/* MARK: placing cubes */
cube {
    transform-style: preserve-3d;
    display: grid;
    grid-area: 1/1;

    transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(var(--rotate-z)) translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z));
}

/* MARK: sides */
cube>* {
    width: var(--size-one-cube);
    aspect-ratio: 1;
    display: block;
    grid-area: 1/1;
}

front {
    background: var(--color-rubiks-front);
    transform: translateZ(var(--translate-one-side));
}

back {
    background: var(--color-rubiks-back);
    transform: translateZ(calc(var(--translate-one-side) * -1));
}

top {
    background: var(--color-rubiks-top);
    transform: rotateX(90deg) translateZ(var(--translate-one-side));
}

bottom {
    background: var(--color-rubiks-bottom);
    transform: rotateX(90deg) translateZ(calc(var(--translate-one-side) * -1));
}


left {
    background: var(--color-rubiks-left);
    transform: rotateY(90deg) translateZ(calc(var(--translate-one-side) * -1));
}

right {
    background: var(--color-rubiks-right);
    transform: rotateY(90deg) translateZ(var(--translate-one-side));
}

/* MARK: Hover animation */
rubiks:hover {
    animation: --rotate 10s infinite linear;

}

@keyframes --rotate {
    0% {
        transform:
            rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform:
            rotateX(-360deg) rotateY(-2turn);
    }
}

/* MARK: turn animations */
@property --rotate-x {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@property --rotate-y {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@property --rotate-z {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes --turn-right {
    0% {
        --rotate-x: 0deg;
    }

    100% {
        --rotate-x: 90deg;
    }
}

@keyframes --turn-left {
    0% {
        --rotate-x: 0deg;
    }

    100% {
        --rotate-x: -90deg;
    }
}

@keyframes --turn-top {
    0% {
        --rotate-y: 0deg;
    }

    100% {
        --rotate-y: -90deg;
    }
}

@keyframes --turn-bottom {
    0% {
        --rotate-y: 0deg;
    }

    100% {
        --rotate-y: 90deg;
    }
}

@keyframes --turn-front {
    0% {
        --rotate-z: 0deg;
    }

    100% {
        --rotate-z: 90deg;
    }
}

@keyframes --turn-back {
    0% {
        --rotate-z: 0deg;
    }

    100% {
        --rotate-z: -90deg;
    }
}




/* MARK: LOGIC */

/* Buttons */
Section:nth-of-type(2) article:nth-of-type(1) fieldset+fieldset {
    display: none;
}

/* Turn 1 */
html:has([value="1turnRightClockwise"]:checked) {
    --rightTurnClockWise: true;
    --turn: 1;
}

html:has([value="1turnRightCounterwise"]:checked) {
    --rightTurnClockCounter: true;
    --turn: 1;
}

html:has([value="1turnFrontClockwise"]:checked) {
    --frontTurnClockWise: true;
    --turn: 1;
}

html:has([value="1turnFrontCounterwise"]:checked) {
    --frontTurnClockCounter: true;
    --turn: 1;
}

html:has([value="1turnLeftClockwise"]:checked) {
    --leftTurnClockWise: true;
    --turn: 1;
}

html:has([value="1turnLeftCounterwise"]:checked) {
    --leftTurnClockCounter: true;
    --turn: 1;
}

html:has([value="1turnTopClockwise"]:checked) {
    --topTurnClockWise: true;
    --turn: 1;
}

html:has([value="1turnTopCounterwise"]:checked) {
    --topTurnClockCounter: true;
    --turn: 1;
}

html:has([value="1turnBottomClockwise"]:checked) {
    --bottomTurnClockWise: true;
    --turn: 1;
}

html:has([value="1turnBottomCounterwise"]:checked) {
    --bottomTurnClockCounter: true;
    --turn: 1;
}

/* MARK: turn 2 */
html:has([value="2turnRightClockwise"]:checked) {
    --rightTurnClockWise2: true;
    --turn: 2;
}

html:has([value="2turnRightCounterwise"]:checked) {
    --rightTurnClockCounter2: true;
    --turn: 2;
}

html:has([value="2turnFrontClockwise"]:checked) {
    --frontTurnClockWise2: true;
    --turn: 2;
}

html:has([value="2turnFrontCounterwise"]:checked) {
    --frontTurnClockCounter2: true;
    --turn: 2;
}

html:has([value="2turnLeftClockwise"]:checked) {
    --leftTurnClockWise2: true;
    --turn: 2;
}

html:has([value="2turnLeftCounterwise"]:checked) {
    --leftTurnClockCounter2: true;
    --turn: 2;
}

html:has([value="2turnTopClockwise"]:checked) {
    --topTurnClockWise2: true;
    --turn: 2;
}

html:has([value="2turnTopCounterwise"]:checked) {
    --topTurnClockCounter2: true;
    --turn: 2;
}

html:has([value="2turnBottomClockwise"]:checked) {
    --bottomTurnClockWise2: true;
    --turn: 2;
}

html:has([value="2turnBottomCounterwise"]:checked) {
    --bottomTurnClockCounter2: true;
    --turn: 2;
}

/* MARK: Turn 3 */

html:has([value="3turnRightClockwise"]:checked) {
    --rightTurnClockWise3: true;
    --turn: 3;
}

html:has([value="3turnRightCounterwise"]:checked) {
    --rightTurnClockCounter3: true;
    --turn: 3;

}

html:has([value="3turnFrontClockwise"]:checked) {
    --frontTurnClockWise3: true;
    --turn: 3;

}

html:has([value="3turnFrontCounterwise"]:checked) {
    --frontTurnClockCounter3: true;
    --turn: 3;

}

html:has([value="3turnLeftClockwise"]:checked) {
    --leftTurnClockWise3: true;
    --turn: 3;

}

html:has([value="3turnLeftCounterwise"]:checked) {
    --leftTurnClockCounter3: true;
    --turn: 3;

}

html:has([value="3turnTopClockwise"]:checked) {
    --topTurnClockWise3: true;
    --turn: 3;

}

html:has([value="3turnTopCounterwise"]:checked) {
    --topTurnClockCounter3: true;
    --turn: 3;

}

html:has([value="3turnBottomClockwise"]:checked) {
    --bottomTurnClockWise3: true;
    --turn: 3;

}

html:has([value="3turnBottomCounterwise"]:checked) {
    --bottomTurnClockCounter3: true;
    --turn: 3;

}

html:has([value="4turnRightClockwise"]:checked) {
    --rightTurnClockWise4: true;
    --turn: 4;
}

html:has([value="4turnRightCounterwise"]:checked) {
    --rightTurnClockCounter4: true;
    --turn: 4;

}

html:has([value="4turnFrontClockwise"]:checked) {
    --frontTurnClockWise4: true;
    --turn: 4;

}

html:has([value="4turnFrontCounterwise"]:checked) {
    --frontTurnClockCounter4: true;
    --turn: 4;

}

html:has([value="4turnLeftClockwise"]:checked) {
    --leftTurnClockWise4: true;
    --turn: 4;

}

html:has([value="4turnLeftCounterwise"]:checked) {
    --leftTurnClockCounter4: true;
    --turn: 4;

}

html:has([value="4turnTopClockwise"]:checked) {
    --topTurnClockWise4: true;
    --turn: 4;

}

html:has([value="4turnTopCounterwise"]:checked) {
    --topTurnClockCounter4: true;
    --turn: 4;

}

html:has([value="4turnBottomClockwise"]:checked) {
    --bottomTurnClockWise4: true;
    --turn: 4;

}

html:has([value="4turnBottomCounterwise"]:checked) {
    --bottomTurnClockCounter4: true;
    --turn: 4;

}

html:has([value="5turnRightClockwise"]:checked) {
    --rightTurnClockWise5: true;
    --turn: 5;
}

html:has([value="5turnRightCounterwise"]:checked) {
    --rightTurnClockCounter5: true;
    --turn: 5;
}

html:has([value="5turnFrontClockwise"]:checked) {
    --frontTurnClockWise5: true;
    --turn: 5;
}

html:has([value="5turnFrontCounterwise"]:checked) {
    --frontTurnClockCounter5: true;
    --turn: 5;
}

html:has([value="5turnLeftClockwise"]:checked) {
    --leftTurnClockWise5: true;
    --turn: 5;
}

html:has([value="5turnLeftCounterwise"]:checked) {
    --leftTurnClockCounter5: true;
    --turn: 5;
}

html:has([value="5turnTopClockwise"]:checked) {
    --topTurnClockWise5: true;
    --turn: 5;
}

html:has([value="5turnTopCounterwise"]:checked) {
    --topTurnClockCounter5: true;
    --turn: 5;
}

html:has([value="5turnBottomClockwise"]:checked) {
    --bottomTurnClockWise5: true;
    --turn: 5;
}

html:has([value="5turnBottomCounterwise"]:checked) {
    --bottomTurnClockCounter5: true;
    --turn: 5;
}

html:has([value="6turnRightClockwise"]:checked) {
    --rightTurnClockWise6: true;
    --turn: 6;
}

html:has([value="6turnRightCounterwise"]:checked) {
    --rightTurnClockCounter6: true;
    --turn: 6;
}

html:has([value="6turnFrontClockwise"]:checked) {
    --frontTurnClockWise6: true;
    --turn: 6;
}

html:has([value="6turnFrontCounterwise"]:checked) {
    --frontTurnClockCounter6: true;
    --turn: 6;
}

html:has([value="6turnLeftClockwise"]:checked) {
    --leftTurnClockWise6: true;
    --turn: 6;
}

html:has([value="6turnLeftCounterwise"]:checked) {
    --leftTurnClockCounter6: true;
    --turn: 6;
}

html:has([value="6turnTopClockwise"]:checked) {
    --topTurnClockWise6: true;
    --turn: 6;
}

html:has([value="6turnTopCounterwise"]:checked) {
    --topTurnClockCounter6: true;
    --turn: 6;
}

html:has([value="6turnBottomClockwise"]:checked) {
    --bottomTurnClockWise6: true;
    --turn: 6;
}

html:has([value="6turnBottomCounterwise"]:checked) {
    --bottomTurnClockCounter6: true;
    --turn: 6;
}

html:has([value="7turnRightClockwise"]:checked) {
    --rightTurnClockWise7: true;
    --turn: 7;
}

html:has([value="7turnRightCounterwise"]:checked) {
    --rightTurnClockCounter7: true;
    --turn: 7;
}

html:has([value="7turnFrontClockwise"]:checked) {
    --frontTurnClockWise7: true;
    --turn: 7;
}

html:has([value="7turnFrontCounterwise"]:checked) {
    --frontTurnClockCounter7: true;
    --turn: 7;
}

html:has([value="7turnLeftClockwise"]:checked) {
    --leftTurnClockWise7: true;
    --turn: 7;
}

html:has([value="7turnLeftCounterwise"]:checked) {
    --leftTurnClockCounter7: true;
    --turn: 7;
}

html:has([value="7turnTopClockwise"]:checked) {
    --topTurnClockWise7: true;
    --turn: 7;
}

html:has([value="7turnTopCounterwise"]:checked) {
    --topTurnClockCounter7: true;
    --turn: 7;
}

html:has([value="7turnBottomClockwise"]:checked) {
    --bottomTurnClockWise7: true;
    --turn: 7;
}

html:has([value="7turnBottomCounterwise"]:checked) {
    --bottomTurnClockCounter7: true;
    --turn: 7;
}

html:has([value="8turnRightClockwise"]:checked) {
    --rightTurnClockWise8: true;
    --turn: 8;
}

html:has([value="8turnRightCounterwise"]:checked) {
    --rightTurnClockCounter8: true;
    --turn: 8;
}

html:has([value="8turnFrontClockwise"]:checked) {
    --frontTurnClockWise8: true;
    --turn: 8;
}

html:has([value="8turnFrontCounterwise"]:checked) {
    --frontTurnClockCounter8: true;
    --turn: 8;
}

html:has([value="8turnLeftClockwise"]:checked) {
    --leftTurnClockWise8: true;
    --turn: 8;
}

html:has([value="8turnLeftCounterwise"]:checked) {
    --leftTurnClockCounter8: true;
    --turn: 8;
}

html:has([value="8turnTopClockwise"]:checked) {
    --topTurnClockWise8: true;
    --turn: 8;
}

html:has([value="8turnTopCounterwise"]:checked) {
    --topTurnClockCounter8: true;
    --turn: 8;
}

html:has([value="8turnBottomClockwise"]:checked) {
    --bottomTurnClockWise8: true;
    --turn: 8;
}

html:has([value="8turnBottomCounterwise"]:checked) {
    --bottomTurnClockCounter8: true;
    --turn: 8;
}

html:has([value="9turnRightClockwise"]:checked) {
    --rightTurnClockWise9: true;
    --turn: 9;
}

html:has([value="9turnRightCounterwise"]:checked) {
    --rightTurnClockCounter9: true;
    --turn: 9;
}

html:has([value="9turnFrontClockwise"]:checked) {
    --frontTurnClockWise9: true;
    --turn: 9;
}

html:has([value="9turnFrontCounterwise"]:checked) {
    --frontTurnClockCounter9: true;
    --turn: 9;
}

html:has([value="9turnLeftClockwise"]:checked) {
    --leftTurnClockWise9: true;
    --turn: 9;
}

html:has([value="9turnLeftCounterwise"]:checked) {
    --leftTurnClockCounter9: true;
    --turn: 9;
}

html:has([value="9turnTopClockwise"]:checked) {
    --topTurnClockWise9: true;
    --turn: 9;
}

html:has([value="9turnTopCounterwise"]:checked) {
    --topTurnClockCounter9: true;
    --turn: 9;
}

html:has([value="9turnBottomClockwise"]:checked) {
    --bottomTurnClockWise9: true;
    --turn: 9;
}

html:has([value="9turnBottomCounterwise"]:checked) {
    --bottomTurnClockCounter9: true;
    --turn: 9;
}

html:has([value="10turnRightClockwise"]:checked) {
    --rightTurnClockWise10: true;
    --turn: 10;
}

html:has([value="10turnRightCounterwise"]:checked) {
    --rightTurnClockCounter10: true;
    --turn: 10;
}

html:has([value="10turnFrontClockwise"]:checked) {
    --frontTurnClockWise10: true;
    --turn: 10;
}

html:has([value="10turnFrontCounterwise"]:checked) {
    --frontTurnClockCounter10: true;
    --turn: 10;
}

html:has([value="10turnLeftClockwise"]:checked) {
    --leftTurnClockWise10: true;
    --turn: 10;
}

html:has([value="10turnLeftCounterwise"]:checked) {
    --leftTurnClockCounter10: true;
    --turn: 10;
}

html:has([value="10turnTopClockwise"]:checked) {
    --topTurnClockWise10: true;
    --turn: 10;
}

html:has([value="10turnTopCounterwise"]:checked) {
    --topTurnClockCounter10: true;
    --turn: 10;
}

html:has([value="10turnBottomClockwise"]:checked) {
    --bottomTurnClockWise10: true;
    --turn: 10;
}

html:has([value="10turnBottomCounterwise"]:checked) {
    --bottomTurnClockCounter10: true;
    --turn: 10;
}

/* MARK: Color-changing */

/* MARK: turn 1 */
/* Update variables */
/* Idee om 2 custom properties aan te maken: Sanne */
saving-layer1 {

    /* Update all variables  */
    --ftl-Sf-C2: var(--ftl-Sf-C);
    --ftl-St-C2: var(--ftl-St-C);
    --ftl-Sl-C2: var(--ftl-Sl-C);

    --ftr-Sf-C2: var(--ftr-Sf-C);
    --ftr-St-C2: var(--ftr-St-C);
    --ftr-Sr-C2: var(--ftr-Sr-C);

    --fbol-Sf-C2: var(--fbol-Sf-C);
    --fbol-Sbo-C2: var(--fbol-Sbo-C);
    --fbol-Sl-C2: var(--fbol-Sl-C);

    --fbor-Sf-C2: var(--fbor-Sf-C);
    --fbor-Sbo-C2: var(--fbor-Sbo-C);
    --fbor-Sr-C2: var(--fbor-Sr-C);

    --batl-Sba-C2: var(--batl-Sba-C);
    --batl-St-C2: var(--batl-St-C);
    --batl-Sl-C2: var(--batl-Sl-C);

    --batr-Sba-C2: var(--batr-Sba-C);
    --batr-St-C2: var(--batr-St-C);
    --batr-Sr-C2: var(--batr-Sr-C);

    --babol-Sba-C2: var(--babol-Sba-C);
    --babol-Sbo-C2: var(--babol-Sbo-C);
    --babol-Sl-C2: var(--babol-Sl-C);

    --babor-Sba-C2: var(--babor-Sba-C);
    --babor-Sbo-C2: var(--babor-Sbo-C);
    --babor-Sr-C2: var(--babor-Sr-C);

    /* rechts met de klok mee */
    @container style(--rightTurnClockWise: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--fbor-Sbo-C);
        --ftr-St-C2: var(--fbor-Sf-C);
        --ftr-Sr-C2: var(--fbor-Sr-C);

        /* Front bottom right block */
        --fbor-Sf-C2: var(--babor-Sbo-C);
        --fbor-Sbo-C2: var(--babor-Sba-C);
        --fbor-Sr-C2: var(--babor-Sr-C);

        /* Back top right block */
        --batr-Sba-C2: var(--ftr-St-C);
        --batr-St-C2: var(--ftr-Sf-C);
        --batr-Sr-C2: var(--ftr-Sr-C);

        /* Back bottom right block */
        --babor-Sba-C2: var(--batr-St-C);
        --babor-Sbo-C2: var(--batr-Sba-C);
        --babor-Sr-C2: var(--batr-Sr-C);
    }

    /* rechts tegen de klok in */
    @container style(--rightTurnClockCounter: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--batr-St-C);
        --ftr-St-C2: var(--batr-Sba-C);
        --ftr-Sr-C2: var(--batr-Sr-C);

        /* Front bottom right block */
        --fbor-Sf-C2: var(--ftr-St-C);
        --fbor-Sbo-C2: var(--ftr-Sf-C);
        --fbor-Sr-C2: var(--ftr-Sr-C);

        /* Back top right block */
        --batr-Sba-C2: var(--babor-Sbo-C);
        --batr-St-C2: var(--babor-Sba-C);
        --batr-Sr-C2: var(--babor-Sr-C);

        /* Back bottom right block */
        --babor-Sba-C2: var(--fbor-Sbo-C);
        --babor-Sbo-C2: var(--fbor-Sf-C);
        --babor-Sr-C2: var(--fbor-Sr-C);
    }

    /* MARK: links met de klok mee */
    @container style(--leftTurnClockWise: true) {

        /* Front top left block */
        --ftl-Sf-C2: var(--batl-St-C);
        --ftl-St-C2: var(--batl-Sba-C);
        --ftl-Sl-C2: var(--batl-Sl-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--ftl-St-C);
        --fbol-Sbo-C2: var(--ftl-Sf-C);
        --fbol-Sl-C2: var(--ftl-Sl-C);

        /* Back top left block */
        --batl-Sba-C2: var(--babol-Sbo-C);
        --batl-St-C2: var(--babol-Sba-C);
        --batl-Sl-C2: var(--babol-Sl-C);

        /* Back bottom left block */
        --babol-Sba-C2: var(--fbol-Sbo-C);
        --babol-Sbo-C2: var(--fbol-Sf-C);
        --babol-Sl-C2: var(--fbol-Sl-C);
    }

    /* MARK: links tegen de klok in */
    @container style(--leftTurnClockCounter: true) {

        /* Front top left block */
        --ftl-Sf-C2: var(--fbol-Sbo-C);
        --ftl-St-C2: var(--fbol-Sf-C);
        --ftl-Sl-C2: var(--fbol-Sl-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--babol-Sbo-C);
        --fbol-Sbo-C2: var(--babol-Sba-C);
        --fbol-Sl-C2: var(--babol-Sl-C);

        /* Back top left block */
        --batl-Sba-C2: var(--ftl-St-C);
        --batl-St-C2: var(--ftl-Sf-C);
        --batl-Sl-C2: var(--ftl-Sl-C);

        /* Back bottom left block */
        --babol-Sba-C2: var(--batl-St-C);
        --babol-Sbo-C2: var(--batl-Sba-C);
        --babol-Sl-C2: var(--batl-Sl-C);
    }

    /* MARK: front met de klok mee */
    @container style(--frontTurnClockWise: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--ftl-Sf-C);
        --ftr-St-C2: var(--ftl-Sl-C);
        --ftr-Sr-C2: var(--ftl-St-C);

        /* Front bottom right block */
        --fbor-Sf-C2: var(--ftr-Sf-C);
        --fbor-Sbo-C2: var(--ftr-Sr-C);
        --fbor-Sr-C2: var(--ftr-St-C);

        /* Front top left block */
        --ftl-Sf-C2: var(--fbol-Sf-C);
        --ftl-St-C2: var(--fbol-Sl-C);
        --ftl-Sl-C2: var(--fbol-Sbo-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--fbor-Sf-C);
        --fbol-Sbo-C2: var(--fbor-Sr-C);
        --fbol-Sl-C2: var(--fbor-Sbo-C);
    }

    /* MARK: front tegen de klok in */
    @container style(--frontTurnClockCounter: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--fbor-Sf-C);
        --ftr-St-C2: var(--fbor-Sr-C);
        --ftr-Sr-C2: var(--fbor-Sbo-C);

        /* Front bottom right block */
        --fbor-Sf-C2: var(--fbol-Sf-C);
        --fbor-Sbo-C2: var(--fbol-Sl-C);
        --fbor-Sr-C2: var(--fbol-Sbo-C);

        /* Front top left block */
        --ftl-Sf-C2: var(--ftr-Sf-C);
        --ftl-St-C2: var(--ftr-Sr-C);
        --ftl-Sl-C2: var(--ftr-St-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--ftl-Sf-C);
        --fbol-Sbo-C2: var(--ftl-Sl-C);
        --fbol-Sl-C2: var(--ftl-St-C);
    }

    /* MARK: Top met de klok mee */
    @container style(--topTurnClockWise: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--batr-Sr-C);
        --ftr-St-C2: var(--batr-St-C);
        --ftr-Sr-C2: var(--batr-Sba-C);

        /* Back top right block */
        --batr-Sba-C2: var(--batl-Sl-C);
        --batr-St-C2: var(--batl-St-C);
        --batr-Sr-C2: var(--batl-Sba-C);

        /* Front top left block */
        --ftl-Sf-C2: var(--ftr-Sr-C);
        --ftl-St-C2: var(--ftr-St-C);
        --ftl-Sl-C2: var(--ftr-Sf-C);

        /* back top left block */
        --batl-Sba-C2: var(--ftl-Sl-C);
        --batl-St-C2: var(--ftl-St-C);
        --batl-Sl-C2: var(--ftl-Sf-C);
    }

    /* MARK: top tegen de klok in */
    @container style(--topTurnClockCounter: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--ftl-Sl-C);
        --ftr-St-C2: var(--ftl-St-C);
        --ftr-Sr-C2: var(--ftl-Sf-C);

        /* Back top right block */
        --batr-Sba-C2: var(--ftr-Sr-C);
        --batr-St-C2: var(--ftr-St-C);
        --batr-Sr-C2: var(--ftr-Sf-C);

        /* Front top left block */
        --ftl-Sf-C2: var(--batl-Sl-C);
        --ftl-St-C2: var(--batl-St-C);
        --ftl-Sl-C2: var(--batl-Sba-C);

        /* back top left block */
        --batl-Sba-C2: var(--batr-Sr-C);
        --batl-St-C2: var(--batr-St-C);
        --batl-Sl-C2: var(--batr-Sba-C);
    }

    /* MARK: Bottom met de klok mee */
    @container style(--bottomTurnClockWise: true) {

        /* Front bottom right block */
        --fbor-Sf-C2: var(--fbol-Sl-C);
        --fbor-Sbo-C2: var(--fbol-Sbo-C);
        --fbor-Sr-C2: var(--fbol-Sf-C);

        /* Back bottom right block */
        --babor-Sba-C2: var(--fbor-Sr-C);
        --babor-Sbo-C2: var(--fbor-Sbo-C);
        --babor-Sr-C2: var(--fbor-Sf-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--babol-Sl-C);
        --fbol-Sbo-C2: var(--babol-Sbo-C);
        --fbol-Sl-C2: var(--babol-Sba-C);

        /* back bottom left block */
        --babol-Sba-C2: var(--babor-Sr-C);
        --babol-Sbo-C2: var(--babor-Sbo-C);
        --babol-Sl-C2: var(--babor-Sba-C);
    }

    /* MARK: Bottom tegen de klok in */
    @container style(--bottomTurnClockCounter: true) {

        /* Front bottom right block */
        --fbor-Sf-C2: var(--babor-Sr-C);
        --fbor-Sbo-C2: var(--babor-Sbo-C);
        --fbor-Sr-C2: var(--babor-Sba-C);

        /* Back bottom right block */
        --babor-Sba-C2: var(--babol-Sl-C);
        --babor-Sbo-C2: var(--babol-Sbo-C);
        --babor-Sr-C2: var(--babol-Sba-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--babor-Sr-C);
        --fbol-Sbo-C2: var(--babor-Sbo-C);
        --fbol-Sl-C2: var(--babor-Sf-C);

        /* back bottom left block */
        --babol-Sba-C2: var(--fbol-Sl-C);
        --babol-Sbo-C2: var(--fbol-Sbo-C);
        --babol-Sl-C2: var(--fbol-Sf-C);
    }
}

/* update scene */
@container style(--turn: 1) {

    Section:nth-of-type(2) article:nth-of-type(1) fieldset {
        display: none;
    }

    section:nth-of-type(2) article:nth-of-type(1) fieldset:nth-of-type(2) {
        display: grid;
    }


    /* reset all of the colors */
    body cube:nth-of-type(1) {

        & front {
            background: var(--ftl-Sf-C2);
        }

        & top {
            background: var(--ftl-St-C2);
        }

        & left {
            background: var(--ftl-Sl-C2);
        }
    }

    body cube:nth-of-type(2) {

        & front {
            background: var(--ftr-Sf-C2);
        }

        & top {
            background: var(--ftr-St-C2);
        }

        & right {
            background: var(--ftr-Sr-C2);
        }
    }

    body cube:nth-of-type(3) {

        & front {
            background: var(--fbol-Sf-C2);
        }

        & bottom {
            background: var(--fbol-Sbo-C2);
        }

        & left {
            background: var(--fbol-Sl-C2);
        }
    }

    body cube:nth-of-type(4) {

        & front {
            background: var(--fbor-Sf-C2);
        }

        & bottom {
            background: var(--fbor-Sbo-C2);
        }

        & right {
            background: var(--fbor-Sr-C2);
        }
    }

    body cube:nth-of-type(5) {

        & back {
            background: var(--batl-Sba-C2);
        }

        & top {
            background: var(--batl-St-C2);
        }

        & left {
            background: var(--batl-Sl-C2);
        }
    }

    body cube:nth-of-type(6) {

        & back {
            background: var(--batr-Sba-C2);
        }

        & top {
            background: var(--batr-St-C2);
        }

        & right {
            background: var(--batr-Sr-C2);
        }
    }

    body cube:nth-of-type(7) {

        & back {
            background: var(--babol-Sba-C2);
        }

        & bottom {
            background: var(--babol-Sbo-C2);
        }

        & left {
            background: var(--babol-Sl-C2);
        }
    }

    body cube:nth-of-type(8) {

        & back {
            background: var(--babor-Sba-C2);
        }

        & bottom {
            background: var(--babor-Sbo-C2);
        }

        & right {
            background: var(--babor-Sr-C2);
        }
    }
}

/* MARK: invoke animation */
/* Source: delay for the colors using transition -> Nienke */

/* right*/
@container style(--rightTurnClockWise: true) {
    body {

        & cube:nth-of-type(2),
        cube:nth-of-type(4),
        cube:nth-of-type(6),
        cube:nth-of-type(8) {
            animation: --turn-right var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--rightTurnClockCounter: true) {
    body {

        & cube:nth-of-type(2),
        cube:nth-of-type(4),
        cube:nth-of-type(6),
        cube:nth-of-type(8) {
            animation: --turn-left var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* left */
@container style(--leftTurnClockWise: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(3),
        cube:nth-of-type(5),
        cube:nth-of-type(7) {
            animation: --turn-left var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--leftTurnClockCounter: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(3),
        cube:nth-of-type(5),
        cube:nth-of-type(7) {
            animation: --turn-right var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* top */

@container style(--topTurnClockWise: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(5),
        cube:nth-of-type(6) {
            animation: --turn-top var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--topTurnClockCounter: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(5),
        cube:nth-of-type(6) {
            animation: --turn-bottom var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* bottom */
@container style(--bottomTurnClockWise: true) {

    body {

        & cube:nth-of-type(3),
        cube:nth-of-type(4),
        cube:nth-of-type(7),
        cube:nth-of-type(8) {
            animation: --turn-bottom var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--bottomTurnClockCounter: true) {
    body {

        & cube:nth-of-type(3),
        cube:nth-of-type(4),
        cube:nth-of-type(7),
        cube:nth-of-type(8) {
            animation: --turn-top var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* front */
@container style(--frontTurnClockWise: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(3),
        cube:nth-of-type(4) {
            animation: --turn-front var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--frontTurnClockCounter: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(3),
        cube:nth-of-type(4) {
            animation: --turn-back var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}


/* MARK: TURN 2 */
saving-layer2 {

    /* Update all variables  */
    --ftl-Sf-C: var(--ftl-Sf-C2);
    --ftl-St-C: var(--ftl-St-C2);
    --ftl-Sl-C: var(--ftl-Sl-C2);

    --ftr-Sf-C: var(--ftr-Sf-C2);
    --ftr-St-C: var(--ftr-St-C2);
    --ftr-Sr-C: var(--ftr-Sr-C2);

    --fbol-Sf-C: var(--fbol-Sf-C2);
    --fbol-Sbo-C: var(--fbol-Sbo-C2);
    --fbol-Sl-C: var(--fbol-Sl-C2);

    --fbor-Sf-C: var(--fbor-Sf-C2);
    --fbor-Sbo-C: var(--fbor-Sbo-C2);
    --fbor-Sr-C: var(--fbor-Sr-C2);

    --batl-Sba-C: var(--batl-Sba-C2);
    --batl-St-C: var(--batl-St-C2);
    --batl-Sl-C: var(--batl-Sl-C2);

    --batr-Sba-C: var(--batr-Sba-C2);
    --batr-St-C: var(--batr-St-C2);
    --batr-Sr-C: var(--batr-Sr-C2);

    --babol-Sba-C: var(--babol-Sba-C2);
    --babol-Sbo-C: var(--babol-Sbo-C2);
    --babol-Sl-C: var(--babol-Sl-C2);

    --babor-Sba-C: var(--babor-Sba-C2);
    --babor-Sbo-C: var(--babor-Sbo-C2);
    --babor-Sr-C: var(--babor-Sr-C2);

    /* rechts met de klok mee */
    @container style(--rightTurnClockWise2: true) {

        /* Front top right block */
        --ftr-Sf-C: var(--fbor-Sbo-C2);
        --ftr-St-C: var(--fbor-Sf-C2);
        --ftr-Sr-C: var(--fbor-Sr-C2);

        /* Front bottom right block */
        --fbor-Sf-C: var(--babor-Sbo-C2);
        --fbor-Sbo-C: var(--babor-Sba-C2);
        --fbor-Sr-C: var(--babor-Sr-C2);

        /* Back top right block */
        --batr-Sba-C: var(--ftr-St-C2);
        --batr-St-C: var(--ftr-Sf-C2);
        --batr-Sr-C: var(--ftr-Sr-C2);

        /* Back bottom right block */
        --babor-Sba-C: var(--batr-St-C2);
        --babor-Sbo-C: var(--batr-Sba-C2);
        --babor-Sr-C: var(--batr-Sr-C2);
    }

    /* rechts tegen de klok in */
    @container style(--rightTurnClockCounter2: true) {

        /* Front top right block */
        --ftr-Sf-C: var(--batr-St-C2);
        --ftr-St-C: var(--batr-Sba-C2);
        --ftr-Sr-C: var(--batr-Sr-C2);

        /* Front bottom right block */
        --fbor-Sf-C: var(--ftr-St-C2);
        --fbor-Sbo-C: var(--ftr-Sf-C2);
        --fbor-Sr-C: var(--ftr-Sr-C2);

        /* Back top right block */
        --batr-Sba-C: var(--babor-Sbo-C2);
        --batr-St-C: var(--babor-Sba-C2);
        --batr-Sr-C: var(--babor-Sr-C2);

        /* Back bottom right block */
        --babor-Sba-C: var(--fbor-Sbo-C2);
        --babor-Sbo-C: var(--fbor-Sf-C2);
        --babor-Sr-C: var(--fbor-Sr-C2);
    }

    /* MARK: links met de klok mee */
    @container style(--leftTurnClockWise2: true) {

        /* Front top right block */
        --ftl-Sf-C: var(--batl-St-C2);
        --ftl-St-C: var(--batl-Sba-C2);
        --ftl-Sl-C: var(--batl-Sl-C2);

        /* Front bottom right block */
        --fbol-Sf-C: var(--ftl-St-C2);
        --fbol-Sbo-C: var(--ftl-Sf-C2);
        --fbol-Sl-C: var(--ftl-Sl-C2);

        /* Back top right block */
        --batl-Sba-C: var(--babol-Sbo-C2);
        --batl-St-C: var(--babol-Sba-C2);
        --batl-Sl-C: var(--babol-Sl-C2);

        /* Back bottom right block */
        --babol-Sba-C: var(--fbol-Sbo-C2);
        --babol-Sbo-C: var(--fbol-Sf-C2);
        --babol-Sl-C: var(--fbol-Sl-C2);
    }

    /* MARK: links tegen de klok in */
    @container style(--leftTurnClockCounter2: true) {

        /* Front top left block */
        --ftl-Sf-C: var(--fbol-Sbo-C2);
        --ftl-St-C: var(--fbol-Sf-C2);
        --ftl-Sl-C: var(--fbol-Sl-C2);

        /* Front bottom left block */
        --fbol-Sf-C: var(--babol-Sbo-C2);
        --fbol-Sbo-C: var(--babol-Sba-C2);
        --fbol-Sl-C: var(--babol-Sl-C2);

        /* Back top left block */
        --batl-Sba-C: var(--ftl-St-C2);
        --batl-St-C: var(--ftl-Sf-C2);
        --batl-Sl-C: var(--ftl-Sl-C2);

        /* Back bottom left block */
        --babol-Sba-C: var(--batl-St-C2);
        --babol-Sbo-C: var(--batl-Sba-C2);
        --babol-Sl-C: var(--batl-Sl-C2);
    }

    /* MARK: front met de klok mee */
    @container style(--frontTurnClockWise2: true) {

        /* Front top right block */
        --ftr-Sf-C: var(--ftl-Sf-C2);
        --ftr-St-C: var(--ftl-Sl-C2);
        --ftr-Sr-C: var(--ftl-St-C2);

        /* Front bottom right block */
        --fbor-Sf-C: var(--ftr-Sf-C2);
        --fbor-Sbo-C: var(--ftr-Sr-C2);
        --fbor-Sr-C: var(--ftr-St-C2);

        /* Front top left block */
        --ftl-Sf-C: var(--fbol-Sf-C2);
        --ftl-St-C: var(--fbol-Sl-C2);
        --ftl-Sl-C: var(--fbol-Sbo-C2);

        /* Front bottom left block */
        --fbol-Sf-C: var(--fbor-Sf-C2);
        --fbol-Sbo-C: var(--fbor-Sr-C2);
        --fbol-Sl-C: var(--fbor-Sbo-C2);
    }

    /* MARK: front tegen de klok in */
    @container style(--frontTurnClockCounter2: true) {

        /* Front top right block */
        --ftr-Sf-C: var(--fbor-Sf-C2);
        --ftr-St-C: var(--fbor-Sr-C2);
        --ftr-Sr-C: var(--fbor-Sbo-C2);

        /* Front bottom right block */
        --fbor-Sf-C: var(--fbol-Sf-C2);
        --fbor-Sbo-C: var(--fbol-Sl-C2);
        --fbor-Sr-C: var(--fbol-Sbo-C2);

        /* Front top left block */
        --ftl-Sf-C: var(--ftr-Sf-C2);
        --ftl-St-C: var(--ftr-Sr-C2);
        --ftl-Sl-C: var(--ftr-St-C2);

        /* Front bottom left block */
        --fbol-Sf-C: var(--ftl-Sf-C2);
        --fbol-Sbo-C: var(--ftl-Sl-C2);
        --fbol-Sl-C: var(--ftl-St-C2);
    }

    /* MARK: Top met de klok mee */
    @container style(--topTurnClockWise2: true) {

        /* Front top right block */
        --ftr-Sf-C: var(--batr-Sr-C2);
        --ftr-St-C: var(--batr-St-C2);
        --ftr-Sr-C: var(--batr-Sba-C2);

        /* Back top right block */
        --batr-Sba-C: var(--batl-Sl-C2);
        --batr-St-C: var(--batl-St-C2);
        --batr-Sr-C: var(--batl-Sba-C2);

        /* Front top left block */
        --ftl-Sf-C: var(--ftr-Sr-C2);
        --ftl-St-C: var(--ftr-St-C2);
        --ftl-Sl-C: var(--ftr-Sf-C2);

        /* back top left block */
        --batl-Sba-C: var(--ftl-Sl-C2);
        --batl-St-C: var(--ftl-St-C2);
        --batl-Sl-C: var(--ftl-Sf-C2);
    }

    /* MARK: top tegen de klok in */
    @container style(--topTurnClockCounter2: true) {

        /* Front top right block */
        --ftr-Sf-C: var(--ftl-Sl-C2);
        --ftr-St-C: var(--ftl-St-C2);
        --ftr-Sr-C: var(--ftl-Sf-C2);

        /* Back top right block */
        --batr-Sba-C: var(--ftr-Sr-C2);
        --batr-St-C: var(--ftr-St-C2);
        --batr-Sr-C: var(--ftr-Sf-C2);

        /* Front top left block */
        --ftl-Sf-C: var(--batl-Sl-C2);
        --ftl-St-C: var(--batl-St-C2);
        --ftl-Sl-C: var(--batl-Sba-C2);

        /* back top left block */
        --batl-Sba-C: var(--batr-Sr-C2);
        --batl-St-C: var(--batr-St-C2);
        --batl-Sl-C: var(--batr-Sba-C2);
    }

    /* MARK: Bottom met de klok mee */
    @container style(--bottomTurnClockWise2: true) {

        /* Front bottom right block */
        --fbor-Sf-C: var(--fbol-Sl-C2);
        --fbor-Sbo-C: var(--fbol-Sbo-C2);
        --fbor-Sr-C: var(--fbol-Sf-C2);

        /* Back bottom right block */
        --babor-Sba-C: var(--fbor-Sr-C2);
        --babor-Sbo-C: var(--fbor-Sbo-C2);
        --babor-Sr-C: var(--fbor-Sf-C2);

        /* Front bottom left block */
        --fbol-Sf-C: var(--babol-Sl-C2);
        --fbol-Sbo-C: var(--babol-Sbo-C2);
        --fbol-Sl-C: var(--babol-Sba-C2);

        /* back bottom left block */
        --babol-Sba-C: var(--babor-Sr-C2);
        --babol-Sbo-C: var(--babor-Sbo-C2);
        --babol-Sl-C: var(--babor-Sba-C2);
    }

    /* MARK: Bottom tegen de klok in */
    @container style(--bottomTurnClockCounter2: true) {

        /* Front bottom right block */
        --fbor-Sf-C: var(--babor-Sr-C2);
        --fbor-Sbo-C: var(--babor-Sbo-C2);
        --fbor-Sr-C: var(--babor-Sba-C2);

        /* Back bottom right block */
        --babor-Sba-C: var(--babol-Sl-C2);
        --babor-Sbo-C: var(--babol-Sbo-C2);
        --babor-Sr-C: var(--babol-Sba-C2);

        /* Front bottom left block */
        --fbol-Sf-C: var(--babor-Sr-C2);
        --fbol-Sbo-C: var(--babor-Sbo-C2);
        --fbol-Sl-C: var(--babor-Sf-C2);

        /* back bottom left block */
        --babol-Sba-C: var(--fbol-Sl-C2);
        --babol-Sbo-C: var(--fbol-Sbo-C2);
        --babol-Sl-C: var(--fbol-Sf-C2);
    }
}

/* update scene */
@container style(--turn: 2) {

    Section:nth-of-type(2) article:nth-of-type(1) fieldset {
        display: none;
    }

    section:nth-of-type(2) article:nth-of-type(1) fieldset:nth-of-type(3) {
        display: grid;
    }


    /* reset all of the colors */
    body cube:nth-of-type(1) {

        & front {
            background: var(--ftl-Sf-C);
        }

        & top {
            background: var(--ftl-St-C);
        }

        & left {
            background: var(--ftl-Sl-C);
        }
    }

    body cube:nth-of-type(2) {

        & front {
            background: var(--ftr-Sf-C);
        }

        & top {
            background: var(--ftr-St-C);
        }

        & right {
            background: var(--ftr-Sr-C);
        }
    }

    body cube:nth-of-type(3) {

        & front {
            background: var(--fbol-Sf-C);
        }

        & bottom {
            background: var(--fbol-Sbo-C);
        }

        & left {
            background: var(--fbol-Sl-C);
        }
    }

    body cube:nth-of-type(4) {

        & front {
            background: var(--fbor-Sf-C);
        }

        & bottom {
            background: var(--fbor-Sbo-C);
        }

        & right {
            background: var(--fbor-Sr-C);
        }
    }

    body cube:nth-of-type(5) {

        & back {
            background: var(--batl-Sba-C);
        }

        & top {
            background: var(--batl-St-C);
        }

        & left {
            background: var(--batl-Sl-C);
        }
    }

    body cube:nth-of-type(6) {

        & back {
            background: var(--batr-Sba-C);
        }

        & top {
            background: var(--batr-St-C);
        }

        & right {
            background: var(--batr-Sr-C);
        }
    }

    body cube:nth-of-type(7) {

        & back {
            background: var(--babol-Sba-C);
        }

        & bottom {
            background: var(--babol-Sbo-C);
        }

        & left {
            background: var(--babol-Sl-C);
        }
    }

    body cube:nth-of-type(8) {

        & back {
            background: var(--babor-Sba-C);
        }

        & bottom {
            background: var(--babor-Sbo-C);
        }

        & right {
            background: var(--babor-Sr-C);
        }
    }
}

/* MARK: invoke animation */
/* right*/
@container style(--rightTurnClockWise2: true) {
    body {

        & cube:nth-of-type(2),
        cube:nth-of-type(4),
        cube:nth-of-type(6),
        cube:nth-of-type(8) {
            animation: --turn-right var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--rightTurnClockCounter2: true) {
    body {

        & cube:nth-of-type(2),
        cube:nth-of-type(4),
        cube:nth-of-type(6),
        cube:nth-of-type(8) {
            animation: --turn-left var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* left */
@container style(--leftTurnClockWise2: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(3),
        cube:nth-of-type(5),
        cube:nth-of-type(7) {
            animation: --turn-left var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--leftTurnClockCounter2: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(3),
        cube:nth-of-type(5),
        cube:nth-of-type(7) {
            animation: --turn-right var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* top */

@container style(--topTurnClockWise2: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(5),
        cube:nth-of-type(6) {
            animation: --turn-top var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--topTurnClockCounter2: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(5),
        cube:nth-of-type(6) {
            animation: --turn-bottom var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* bottom */
@container style(--bottomTurnClockWise2: true) {

    body {

        & cube:nth-of-type(3),
        cube:nth-of-type(4),
        cube:nth-of-type(7),
        cube:nth-of-type(8) {
            animation: --turn-bottom var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--bottomTurnClockCounter2: true) {
    body {

        & cube:nth-of-type(3),
        cube:nth-of-type(4),
        cube:nth-of-type(7),
        cube:nth-of-type(8) {
            animation: --turn-top var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* front */
@container style(--frontTurnClockWise2: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(3),
        cube:nth-of-type(4) {
            animation: --turn-front var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--frontTurnClockCounter2: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(3),
        cube:nth-of-type(4) {
            animation: --turn-back var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}




/* MARK: Color-changing */

/* MARK: turn 3 */
/* Update variables */
/* Idee om 2 custom properties aan te maken: Sanne */
saving-layer3 {

    /* Update all variables  */
    --ftl-Sf-C2: var(--ftl-Sf-C);
    --ftl-St-C2: var(--ftl-St-C);
    --ftl-Sl-C2: var(--ftl-Sl-C);

    --ftr-Sf-C2: var(--ftr-Sf-C);
    --ftr-St-C2: var(--ftr-St-C);
    --ftr-Sr-C2: var(--ftr-Sr-C);

    --fbol-Sf-C2: var(--fbol-Sf-C);
    --fbol-Sbo-C2: var(--fbol-Sbo-C);
    --fbol-Sl-C2: var(--fbol-Sl-C);

    --fbor-Sf-C2: var(--fbor-Sf-C);
    --fbor-Sbo-C2: var(--fbor-Sbo-C);
    --fbor-Sr-C2: var(--fbor-Sr-C);

    --batl-Sba-C2: var(--batl-Sba-C);
    --batl-St-C2: var(--batl-St-C);
    --batl-Sl-C2: var(--batl-Sl-C);

    --batr-Sba-C2: var(--batr-Sba-C);
    --batr-St-C2: var(--batr-St-C);
    --batr-Sr-C2: var(--batr-Sr-C);

    --babol-Sba-C2: var(--babol-Sba-C);
    --babol-Sbo-C2: var(--babol-Sbo-C);
    --babol-Sl-C2: var(--babol-Sl-C);

    --babor-Sba-C2: var(--babor-Sba-C);
    --babor-Sbo-C2: var(--babor-Sbo-C);
    --babor-Sr-C2: var(--babor-Sr-C);

    /* rechts met de klok mee */
    @container style(--rightTurnClockWise3: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--fbor-Sbo-C);
        --ftr-St-C2: var(--fbor-Sf-C);
        --ftr-Sr-C2: var(--fbor-Sr-C);

        /* Front bottom right block */
        --fbor-Sf-C2: var(--babor-Sbo-C);
        --fbor-Sbo-C2: var(--babor-Sba-C);
        --fbor-Sr-C2: var(--babor-Sr-C);

        /* Back top right block */
        --batr-Sba-C2: var(--ftr-St-C);
        --batr-St-C2: var(--ftr-Sf-C);
        --batr-Sr-C2: var(--ftr-Sr-C);

        /* Back bottom right block */
        --babor-Sba-C2: var(--batr-St-C);
        --babor-Sbo-C2: var(--batr-Sba-C);
        --babor-Sr-C2: var(--batr-Sr-C);
    }

    /* rechts tegen de klok in */
    @container style(--rightTurnClockCounter3: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--batr-St-C);
        --ftr-St-C2: var(--batr-Sba-C);
        --ftr-Sr-C2: var(--batr-Sr-C);

        /* Front bottom right block */
        --fbor-Sf-C2: var(--ftr-St-C);
        --fbor-Sbo-C2: var(--ftr-Sf-C);
        --fbor-Sr-C2: var(--ftr-Sr-C);

        /* Back top right block */
        --batr-Sba-C2: var(--babor-Sbo-C);
        --batr-St-C2: var(--babor-Sba-C);
        --batr-Sr-C2: var(--babor-Sr-C);

        /* Back bottom right block */
        --babor-Sba-C2: var(--fbor-Sbo-C);
        --babor-Sbo-C2: var(--fbor-Sf-C);
        --babor-Sr-C2: var(--fbor-Sr-C);
    }

    /* MARK: links met de klok mee */
    @container style(--leftTurnClockWise3: true) {

        /* Front top left block */
        --ftl-Sf-C2: var(--batl-St-C);
        --ftl-St-C2: var(--batl-Sba-C);
        --ftl-Sl-C2: var(--batl-Sl-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--ftl-St-C);
        --fbol-Sbo-C2: var(--ftl-Sf-C);
        --fbol-Sl-C2: var(--ftl-Sl-C);

        /* Back top left block */
        --batl-Sba-C2: var(--babol-Sbo-C);
        --batl-St-C2: var(--babol-Sba-C);
        --batl-Sl-C2: var(--babol-Sl-C);

        /* Back bottom left block */
        --babol-Sba-C2: var(--fbol-Sbo-C);
        --babol-Sbo-C2: var(--fbol-Sf-C);
        --babol-Sl-C2: var(--fbol-Sl-C);
    }

    /* MARK: links tegen de klok in */
    @container style(--leftTurnClockCounter3: true) {

        /* Front top left block */
        --ftl-Sf-C2: var(--fbol-Sbo-C);
        --ftl-St-C2: var(--fbol-Sf-C);
        --ftl-Sl-C2: var(--fbol-Sl-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--babol-Sbo-C);
        --fbol-Sbo-C2: var(--babol-Sba-C);
        --fbol-Sl-C2: var(--babol-Sl-C);

        /* Back top left block */
        --batl-Sba-C2: var(--ftl-St-C);
        --batl-St-C2: var(--ftl-Sf-C);
        --batl-Sl-C2: var(--ftl-Sl-C);

        /* Back bottom left block */
        --babol-Sba-C2: var(--batl-St-C);
        --babol-Sbo-C2: var(--batl-Sba-C);
        --babol-Sl-C2: var(--batl-Sl-C);
    }

    /* MARK: front met de klok mee */
    @container style(--frontTurnClockWise3: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--ftl-Sf-C);
        --ftr-St-C2: var(--ftl-Sl-C);
        --ftr-Sr-C2: var(--ftl-St-C);

        /* Front bottom right block */
        --fbor-Sf-C2: var(--ftr-Sf-C);
        --fbor-Sbo-C2: var(--ftr-Sr-C);
        --fbor-Sr-C2: var(--ftr-St-C);

        /* Front top left block */
        --ftl-Sf-C2: var(--fbol-Sf-C);
        --ftl-St-C2: var(--fbol-Sl-C);
        --ftl-Sl-C2: var(--fbol-Sbo-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--fbor-Sf-C);
        --fbol-Sbo-C2: var(--fbor-Sr-C);
        --fbol-Sl-C2: var(--fbor-Sbo-C);
    }

    /* MARK: front tegen de klok in */
    @container style(--frontTurnClockCounter3: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--fbor-Sf-C);
        --ftr-St-C2: var(--fbor-Sr-C);
        --ftr-Sr-C2: var(--fbor-Sbo-C);

        /* Front bottom right block */
        --fbor-Sf-C2: var(--fbol-Sf-C);
        --fbor-Sbo-C2: var(--fbol-Sl-C);
        --fbor-Sr-C2: var(--fbol-Sbo-C);

        /* Front top left block */
        --ftl-Sf-C2: var(--ftr-Sf-C);
        --ftl-St-C2: var(--ftr-Sr-C);
        --ftl-Sl-C2: var(--ftr-St-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--ftl-Sf-C);
        --fbol-Sbo-C2: var(--ftl-Sl-C);
        --fbol-Sl-C2: var(--ftl-St-C);
    }

    /* MARK: Top met de klok mee */
    @container style(--topTurnClockWise3: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--batr-Sr-C);
        --ftr-St-C2: var(--batr-St-C);
        --ftr-Sr-C2: var(--batr-Sba-C);

        /* Back top right block */
        --batr-Sba-C2: var(--batl-Sl-C);
        --batr-St-C2: var(--batl-St-C);
        --batr-Sr-C2: var(--batl-Sba-C);

        /* Front top left block */
        --ftl-Sf-C2: var(--ftr-Sr-C);
        --ftl-St-C2: var(--ftr-St-C);
        --ftl-Sl-C2: var(--ftr-Sf-C);

        /* back top left block */
        --batl-Sba-C2: var(--ftl-Sl-C);
        --batl-St-C2: var(--ftl-St-C);
        --batl-Sl-C2: var(--ftl-Sf-C);
    }

    /* MARK: top tegen de klok in */
    @container style(--topTurnClockCounter3: true) {

        /* Front top right block */
        --ftr-Sf-C2: var(--ftl-Sl-C);
        --ftr-St-C2: var(--ftl-St-C);
        --ftr-Sr-C2: var(--ftl-Sf-C);

        /* Back top right block */
        --batr-Sba-C2: var(--ftr-Sr-C);
        --batr-St-C2: var(--ftr-St-C);
        --batr-Sr-C2: var(--ftr-Sf-C);

        /* Front top left block */
        --ftl-Sf-C2: var(--batl-Sl-C);
        --ftl-St-C2: var(--batl-St-C);
        --ftl-Sl-C2: var(--batl-Sba-C);

        /* back top left block */
        --batl-Sba-C2: var(--batr-Sr-C);
        --batl-St-C2: var(--batr-St-C);
        --batl-Sl-C2: var(--batr-Sba-C);
    }

    /* MARK: Bottom met de klok mee */
    @container style(--bottomTurnClockWise3: true) {

        /* Front bottom right block */
        --fbor-Sf-C2: var(--fbol-Sl-C);
        --fbor-Sbo-C2: var(--fbol-Sbo-C);
        --fbor-Sr-C2: var(--fbol-Sf-C);

        /* Back bottom right block */
        --babor-Sba-C2: var(--fbor-Sr-C);
        --babor-Sbo-C2: var(--fbor-Sbo-C);
        --babor-Sr-C2: var(--fbor-Sf-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--babol-Sl-C);
        --fbol-Sbo-C2: var(--babol-Sbo-C);
        --fbol-Sl-C2: var(--babol-Sba-C);

        /* back bottom left block */
        --babol-Sba-C2: var(--babor-Sr-C);
        --babol-Sbo-C2: var(--babor-Sbo-C);
        --babol-Sl-C2: var(--babor-Sba-C);
    }

    /* MARK: Bottom tegen de klok in */
    @container style(--bottomTurnClockCounter3: true) {

        /* Front bottom right block */
        --fbor-Sf-C2: var(--babor-Sr-C);
        --fbor-Sbo-C2: var(--babor-Sbo-C);
        --fbor-Sr-C2: var(--babor-Sba-C);

        /* Back bottom right block */
        --babor-Sba-C2: var(--babol-Sl-C);
        --babor-Sbo-C2: var(--babol-Sbo-C);
        --babor-Sr-C2: var(--babol-Sba-C);

        /* Front bottom left block */
        --fbol-Sf-C2: var(--babor-Sr-C);
        --fbol-Sbo-C2: var(--babor-Sbo-C);
        --fbol-Sl-C2: var(--babor-Sf-C);

        /* back bottom left block */
        --babol-Sba-C2: var(--fbol-Sl-C);
        --babol-Sbo-C2: var(--fbol-Sbo-C);
        --babol-Sl-C2: var(--fbol-Sf-C);
    }
}

/* update scene */
@container style(--turn: 3) {

     Section:nth-of-type(2) article:nth-of-type(1) fieldset {
        display: none;
    }

    section:nth-of-type(2) article:nth-of-type(1) fieldset:nth-of-type(4) {
        display: grid;
    }


    /* reset all of the colors */
    body cube:nth-of-type(1) {

        & front {
            background: var(--ftl-Sf-C2);
        }

        & top {
            background: var(--ftl-St-C2);
        }

        & left {
            background: var(--ftl-Sl-C2);
        }
    }

    body cube:nth-of-type(2) {

        & front {
            background: var(--ftr-Sf-C2);
        }

        & top {
            background: var(--ftr-St-C2);
        }

        & right {
            background: var(--ftr-Sr-C2);
        }
    }

    body cube:nth-of-type(3) {

        & front {
            background: var(--fbol-Sf-C2);
        }

        & bottom {
            background: var(--fbol-Sbo-C2);
        }

        & left {
            background: var(--fbol-Sl-C2);
        }
    }

    body cube:nth-of-type(4) {

        & front {
            background: var(--fbor-Sf-C2);
        }

        & bottom {
            background: var(--fbor-Sbo-C2);
        }

        & right {
            background: var(--fbor-Sr-C2);
        }
    }

    body cube:nth-of-type(5) {

        & back {
            background: var(--batl-Sba-C2);
        }

        & top {
            background: var(--batl-St-C2);
        }

        & left {
            background: var(--batl-Sl-C2);
        }
    }

    body cube:nth-of-type(6) {

        & back {
            background: var(--batr-Sba-C2);
        }

        & top {
            background: var(--batr-St-C2);
        }

        & right {
            background: var(--batr-Sr-C2);
        }
    }

    body cube:nth-of-type(7) {

        & back {
            background: var(--babol-Sba-C2);
        }

        & bottom {
            background: var(--babol-Sbo-C2);
        }

        & left {
            background: var(--babol-Sl-C2);
        }
    }

    body cube:nth-of-type(8) {

        & back {
            background: var(--babor-Sba-C2);
        }

        & bottom {
            background: var(--babor-Sbo-C2);
        }

        & right {
            background: var(--babor-Sr-C2);
        }
    }
}

/* MARK: invoke animation */
/* Source: delay for the colors using transition -> Nienke */

/* right*/
@container style(--rightTurnClockWise3: true) {
    body {

        & cube:nth-of-type(2),
        cube:nth-of-type(4),
        cube:nth-of-type(6),
        cube:nth-of-type(8) {
            animation: --turn-right var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--rightTurnClockCounter3: true) {
    body {

        & cube:nth-of-type(2),
        cube:nth-of-type(4),
        cube:nth-of-type(6),
        cube:nth-of-type(8) {
            animation: --turn-left var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* left */
@container style(--leftTurnClockWise3: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(3),
        cube:nth-of-type(5),
        cube:nth-of-type(7) {
            animation: --turn-left var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--leftTurnClockCounter3: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(3),
        cube:nth-of-type(5),
        cube:nth-of-type(7) {
            animation: --turn-right var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* top */

@container style(--topTurnClockWise3: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(5),
        cube:nth-of-type(6) {
            animation: --turn-top var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--topTurnClockCounter3: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(5),
        cube:nth-of-type(6) {
            animation: --turn-bottom var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* bottom */
@container style(--bottomTurnClockWise3: true) {

    body {

        & cube:nth-of-type(3),
        cube:nth-of-type(4),
        cube:nth-of-type(7),
        cube:nth-of-type(8) {
            animation: --turn-bottom var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--bottomTurnClockCounter3: true) {
    body {

        & cube:nth-of-type(3),
        cube:nth-of-type(4),
        cube:nth-of-type(7),
        cube:nth-of-type(8) {
            animation: --turn-top var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

/* front */
@container style(--frontTurnClockWise3: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(3),
        cube:nth-of-type(4) {
            animation: --turn-front var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}

@container style(--frontTurnClockCounter3: true) {
    body {

        & cube:nth-of-type(1),
        cube:nth-of-type(2),
        cube:nth-of-type(3),
        cube:nth-of-type(4) {
            animation: --turn-back var(--animation-duration) 1 var(--animation-easing);

            &>* {
                transition: background-color 0s var(--animation-duration)
            }
        }
    }
}