:root {
    /** ============ CSS-змінні ============ */
    --color-font-body: #4b2500;
    --color-background-body: #f2ffd6;
    --color-title-lesson: #4b4200;
    --color-title-section: red;
    --color-title-subsection: blue;

    /* Розмір Точки трансформації (тільки для lesson-FE2_6-28_test) */
    --dot-size: 16px;
}

body {
    font-family: 'Montserrat', serif;
    font-size: 1.5rem;
    padding: 20px 20px 150px;
    /* min-height: 100vh; */
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* flex-wrap: wrap; */
    /* justify-content: center; */
    /* text-align: center; */
    align-items: center;
    color: var(--color-font-body);
    background-color: var(--color-background-body);
}

.title-lesson {
    text-align: center;
    color: var(--color-title-lesson);
    text-shadow: 4px 2px 6px #43300088;
    /* ! for position: fixed */
    /* margin-bottom: 350px; */
}

.title-section {
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    color: var(--color-title-section);
    text-shadow: 4px 2px 6px #a17301bd;
}

.title-subsection {
    margin-top: 10px;
    margin-bottom: 15px;
    font-style: italic;
    color: var(--color-title-subsection);
    text-shadow: 4px 2px 6px #0114a1bd;
}


.part {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    /* outline: 1px solid red; */
}

/* *======================================= */
/* ! */
/* .part_1 {
    display: none;
    position: fixed;
    top: 100px;
} */
/*! 1.CSS-переходи */
.box1 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px 30px;
    border: 2px solid #363636;
    border-radius: 20px;
    box-shadow: 6px 6px 12px rgba(69, 69, 69, 0.7);
    background-color: #ebffc1;

    /* outline: 1px dotted red; */
}

.code1 {
    font-size: 2rem;
    font-weight: 700;
    color: rgb(0, 110, 0);
}

.span1 {
    font-weight: 400;
    font-style: italic;
    color: rgb(195, 0, 0)
}


/* ! */
/* .part_1-1 {
    display: none;
} */
/*! 1-1.Магія за допомогою CSS */
.box1-1 {
    overflow: hidden;
    width: 1060px;
    height: 629px;
    border: 15px solid rgb(0, 66, 0);
    border-radius: 50px;
    box-shadow:
        /* inset 0 0 6px 12px rgba(0, 0, 0, 0.4), */
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.034),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.048),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.06),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.072),
        41.8px 41.8px 33.4px rgba(202, 73, 18, 0.429),
        00px 100px 80px rgba(202, 94, 18, 0.466);
    /* ? */
    outline: 2px solid rgba(255, 99, 71, 0.5);
}

.box_image1-1 {
    /*todo var.1 Декоративне зображення */
    width: 5235px;
    height: 600px;
    background-position: left top;
    background-size: auto 600px;
    background-image:
        linear-gradient(to right,
            rgba(255, 241, 91, 0.1),
            rgba(27, 29, 88, 0.45)),
        url("../images/pano_img_3691-3720_for_tl.jpg");
    /* todo____________________________ */
    /**  Анимация-2  */
    animation-name: move;
    animation-direction: alternate;
    /* animation-direction: alternate-reverse; */
    /* animation-direction: reverse; */
    animation-duration: 120s;
    animation-timing-function: linear;
    animation-delay: 1500ms;
    animation-iteration-count: infinite;
}

@keyframes move {
    0% {
        transform: translatex(0);
    }

    100% {
        transform: translatex(-4205px);
    }
}

.image1-1 {
    display: block;
    max-width: max-content;
    height: 600px;
}

.audio1-1 {
    margin-top: 20px;
    display: block;
    width: 800px;
}


/* ! */
/* .part_2 {
    display: none;
} */
/*! 2.CSS-переходи (приклад) */
.box2 {
    margin-top: 30px;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    border-radius: 10px;
    color: #f2ffd6;
    background-color: tomato;
    box-shadow:
        inset 0 0 24px 12px rgba(0, 0, 0, 0.4),
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    /*?  Анимация-1 - Встановлює значення переходу: */
    /** transition-property */
    /* transition-property: all; */
    /* transition-property: background-color; */
    /* transition-property: transform; */
    /* transition-property: background-color, transform; */
    /** transition-duration */
    /* transition-duration: 0ms; */
    /* transition-duration: 500ms; */
    /* transition-duration: 1500ms; */
    /* transition-duration: 2500ms; */
    /** transition-timing-function */
    /* transition-timing-function: ease; */
    /* transition-timing-function: linear; */
    /* transition-timing-function: ease-in; */
    /* transition-timing-function: ease-out; */
    /* transition-timing-function: ease-in-out; */
    /* transition-timing-function: cubic-bezier(0.39, 1.03, 0.82, 0.08); */
    /** transition-delay */
    /* transition-delay: 0; */
    /* transition-delay: 500ms; */
    /* transition-delay: 1500ms; */

    /*todo Зміна властивостей transition-property без єфекту hover */
    /* background-color: teal;
    transform: rotate(180deg); */
}

/*todo При наведенні змінюється значення анімованих властивостей. */
.box2:hover {
    cursor: pointer;
    background-color: teal;
    transform: rotate(180deg);
}


/* ! */
/* .part_3 {
    display: none;
} */
/*! 3.CSS-переходи (transition-duration​) */
.box3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 40px 40px;
    border: 2px dashed #2a2a2a;
    border-radius: 12px;
}

.circle3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    /* margin-left: 30px;
    margin-right: 30px; */
    border-radius: 50%;
    box-shadow:
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    /*?  Анимация-1 */
    transition-property: transform;
}

.box3:hover .circle3 {
    transform: scale(1.5);
}

.circle3:nth-child(1) {
    background-color: orange;
    transition-duration: 500ms;
}

.circle3:nth-child(2) {
    background-color: #03a9f4;
    transition-duration: 1500ms;
}

.circle3:nth-child(3) {
    background-color: palevioletred;
    transition-duration: 3000ms;
}



/* ! */
/* .part_4 {
    display: none;
} */
/*! 4.CSS-переходи (transition-timing-function​) */
.box4 {
    width: 80vw;
    border: 2px dashed #2a2a2a;
    border-radius: 4px;
    padding: 10px;
}

.circle4 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow:
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);

    transform: translateX(0);
    /*?  Анимация-1 */
    transition-property: transform;
    transition-duration: 2000ms;
}

.circle4:not(:last-child) {
    margin-bottom: 5px;
}

.box4:hover .circle4 {
    transform: translateX(calc(80vw - 80px));
}

.circle4:nth-child(1) {
    background-color: #f44336;
    transition-timing-function: ease;
}

.circle4:nth-child(2) {
    background-color: #3f51b5;
    transition-timing-function: linear;
}

.circle4:nth-child(3) {
    background-color: #00bcd4;
    transition-timing-function: ease-in;
}

.circle4:nth-child(4) {
    background-color: #4caf50;
    transition-timing-function: ease-out;
}

.circle4:nth-child(5) {
    background-color: #ffeb3b;
    transition-timing-function: ease-in-out;
}

.circle4:nth-child(6) {
    background-color: #e91e63;
    transition-timing-function: cubic-bezier(0.39, 1.03, 0.82, 0.08);
}


/* ! */
/* .part_5 {
    display: none;
} */
/*! 5.CSS-переходи (transition-delay) */
.box5 {
    margin-top: 30px;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    border-radius: 10px;
    color: #f2ffd6;
    background-color: green;
    box-shadow:
        inset 0 0 24px 12px rgba(0, 0, 0, 0.4),
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    /*?  Анимация-1 */
    /** transition-property */
    transition-property: background-color, transform;
    /** transition-duration */
    transition-duration: 1500ms;
    /** transition-timing-function */
    transition-timing-function: linear;
    /** transition-delay */
    /* transition-delay: 0; */
    transition-delay: 500ms;
    /* transition-delay: 1500ms; */
}

/*todo При наведенні змінюється значення анімованих властивостей. */
.box5:hover {
    cursor: pointer;
    background-color: red;
    transform: rotate(180deg);
}


/* ! */
/* .part_6 {
    display: none;
} */
/*! 6.CSS-переходи (сценарії з transition-delay) */
.box6 {
    margin-top: 30px;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    border-radius: 10px;
    color: #f2ffd6;
    background-color: yellow;
    box-shadow:
        inset 0 0 24px 12px rgba(0, 0, 0, 0.4),
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    /*?  Анимация-1 */
    transition-property: background-color, transform;
    transition-duration: 1000ms, 500ms;
    transition-timing-function: linear, ease-in-out;
    transition-delay: 0ms, 1000ms;
    /** Короткий запис CSS-переходів​ */
    /* transition:
        background-color 1000ms linear,
        transform 500ms ease-in-out 1000ms; */
}

/*todo При наведенні змінюється значення анімованих властивостей. */
.box6:hover {
    /* cursor: pointer; */
    background-color: blue;
    transform: rotate(-180deg);
}


/* ! */
/* .part_7 {
    display: none;
} */
/*! 2D-трансформації */
/*! 7.Властивість transform (Масштабування) */
.container7 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 40px 40px;
    border: 2px dashed #2a2a2a;
    border-radius: 12px;
}

.box7 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    font-weight: 700;
    border-radius: 50%;
    box-shadow:
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    /*?  Анимация-1 */
    transition-property: transform;
}

.box7:nth-child(1) {
    background-color: orange;
    transition-duration: 1000ms;
}

.container7:hover .box7:nth-child(1) {
    transform: scale(1.25);
}

.box7:nth-child(2) {
    background-color: #03a9f4;
    transition-duration: 1000ms;
}

.container7:hover .box7:nth-child(2) {
    transform: scale(1.0);
}

.box7:nth-child(3) {
    background-color: palevioletred;

    transition-duration: 1000ms;
}

.container7:hover .box7:nth-child(3) {
    transform: scale(0.75);
}


/* ! */
/* .part_8 {
    display: none;
} */
/*! 8.Властивість transform (Поворот) */
.container8 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 40px 40px;
    border: 2px dashed #2a2a2a;
    border-radius: 12px;
}

.box8 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 180px;
    font-weight: 700;
    border-radius: 20px;
    box-shadow:
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    /*?  Анимация-1 */
    transition-property: transform;
}

.box8:nth-child(1) {
    background-color: orange;
    transition-duration: 1000ms;
}

.container8:hover .box8:nth-child(1) {
    transform: rotate(30deg);
}

.box8:nth-child(2) {
    background-color: #03a9f4;
    transition-duration: 1000ms;
}

.container8:hover .box8:nth-child(2) {
    transform: rotate(115deg);
}

.box8:nth-child(3) {
    background-color: palevioletred;

    transition-duration: 1000ms;
}

.container8:hover .box8:nth-child(3) {
    transform: rotate(-45deg);
}


/* ! */
/* .part_9 {
    display: none;
} */
/*! 9.Властивість transform (Зміщення) */
.container9 {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 40px 40px;
    border: 2px dashed #2a2a2a;
    border-radius: 12px;
}

.box9 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 125px;
    font-weight: 700;
    text-align: center;
    border-radius: 20px;
    box-shadow:
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    /*?  Анимация-1 */
    transition-property: transform;
}

.box9:nth-child(1) {
    background-color: orange;
    transition-duration: 1000ms;
}

.container9:hover .box9:nth-child(1) {
    transform: translateX(50px);
}

.box9:nth-child(2) {
    background-color: #03a9f4;
    transition-duration: 1000ms;
}

.container9:hover .box9:nth-child(2) {
    transform: translateY(110px);
}

.box9:nth-child(3) {
    background-color: palevioletred;

    transition-duration: 1000ms;
}

.container9:hover .box9:nth-child(3) {
    transform: translate(-50px, -100px);
}


/* ! ✌ */
/* .part_10 {
    display: none;
} */
/*! 10.Центрування елемента */
.parent10 {
    position: relative;
    width: 500px;
    height: 300px;

    border: 10px solid #165d10;
    border-radius: 10px;
    background-color: #4db53f;
}

.box10 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: wheat;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*! Поєднання декількох трансформацій одного елемента */
    /* transform: translate(-50%, -50%) rotate(90deg) scale(1.5); */

    border: 10px solid #d74400;
    border-radius: 10px;
    background-color: #8b1e00;
}

/** Центрування елемента з декількома трансформаціями при ховері */
/* .parent10:hover .box10 {
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%) rotate(90deg) scale(1.5);
} */


/* ! */
/* .part_11 {
    display: none;
} */
/*! 11.Властивість transform (Викривлення) */
.container11 {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 40px 40px;
    border: 2px dashed #2a2a2a;
    border-radius: 12px;
}

.box11 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 125px;
    font-weight: 700;
    text-align: center;
    border-radius: 20px;
    box-shadow:
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    /*?  Анимация-1 */
    transition-property: transform;
}

.box11:nth-child(1) {
    background-color: orange;
    transition-duration: 1000ms;
}

.container11:hover .box11:nth-child(1) {
    transform: skewX(30deg);
}

.box11:nth-child(2) {
    background-color: #03a9f4;
    transition-duration: 2000ms;
}

.container11:hover .box11:nth-child(2) {
    transform: skewY(30deg);
}

.box11:nth-child(3) {
    background-color: palevioletred;
    transition-duration: 3000ms;
}

.container11:hover .box11:nth-child(3) {
    transform: skew(30deg, 30deg);
    /* transform: skew(30deg, -30deg); */
}



/* ! */
/* .part_12 {
    display: none;
} */
/*! 12.Точка трансформації​ */
.part_12 .container {
    min-height: 100vh;
    width: 550px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
}

.part_12 .box {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid tomato;
    border-radius: 4px;
    font-size: 17px;
}

.part_12 .box::before {
    position: absolute;
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    /**  Анимация-2  */
    animation: rotateWithOrigin 3000ms linear 1000ms infinite;
}

.part_12 .box:nth-child(1)::before {
    transform-origin: top left;
}

.part_12 .box:nth-child(2)::before {
    transform-origin: top center;
}

.part_12 .box:nth-child(3)::before {
    transform-origin: top right;
}

.part_12 .box:nth-child(4)::before {
    transform-origin: center left;
}

.part_12 .box:nth-child(5)::before {
    transform-origin: center center;
}

.part_12 .box:nth-child(6)::before {
    transform-origin: center right;
}

.part_12 .box:nth-child(7)::before {
    transform-origin: bottom left;
}

.part_12 .box:nth-child(8)::before {
    transform-origin: bottom center;
}

.part_12 .box:nth-child(9)::before {
    transform-origin: bottom right;
}

.part_12 .box::after {
    position: absolute;
    display: inline-block;
    content: "";
    width: var(--dot-size);
    height: var(--dot-size);
    background-color: blue;
    border-radius: 50%;
}

.part_12 .box:nth-child(1)::after {
    top: calc(var(--dot-size) / -2);
    left: calc(var(--dot-size) / -2);
}

.part_12 .box:nth-child(2)::after {
    top: calc(var(--dot-size) / -2);
    left: center;
}

.part_12 .box:nth-child(3)::after {
    top: calc(var(--dot-size) / -2);
    right: calc(var(--dot-size) / -2);
}

.part_12 .box:nth-child(4)::after {
    top: center;
    left: calc(var(--dot-size) / -2);
}

.part_12 .box:nth-child(5)::after {
    top: center;
    left: center;
}

.part_12 .box:nth-child(6)::after {
    top: center;
    right: calc(var(--dot-size) / -2);
}

.part_12 .box:nth-child(7)::after {
    bottom: calc(var(--dot-size) / -2);
    left: calc(var(--dot-size) / -2);
}

.part_12 .box:nth-child(8)::after {
    bottom: calc(var(--dot-size) / -2);
    left: center;
}

.part_12 .box:nth-child(9)::after {
    bottom: calc(var(--dot-size) / -2);
    right: calc(var(--dot-size) / -2);
}

@keyframes rotateWithOrigin {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}


/* ! */
/* .part_13 {
    display: none;
    outline: 1px solid red;
} */
/*! 13.Приклади різних трансформацій​ */
.part_13 .title-section {
    margin-top: 150px;
    margin-bottom: 50px;
}

.part_13 .container {
    min-height: 70vh;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    /* outline: 1px dashed blue; */
}

.part_13 span {
    /* font-family: 'Playfair Display'; */
    font-family: 'Roboto';
    font-size: 0.7em;
    font-weight: 700;
    display: inline-block;
    line-height: 1.1;
}

.part_13 .wrap {
    display: inline-block;
    text-align: center;
    margin: 0 40px 2em 0;
    background: rgba(228, 225, 228, .5);
}

.part_13 div {
    width: 200px;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
    /*?  Анимация-1  */
    -o-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.part_13 .one,
.part_13 .four,
.part_13 .seven,
.part_13 .ten {
    background: rgba(135, 86, 120, .4);
}

.part_13 .one:hover {
    -o-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}

.part_13 .two,
.part_13 .five,
.part_13 .eight,
.part_13 .eleven {
    background: rgba(0, 228, 246, .4);
}

.part_13 .two:hover {
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

.part_13 .three,
.part_13 .six,
.part_13 .nine {
    background: rgba(255, 153, 0, .4);
}

.part_13 .three:hover {
    -o-transform: translate(-20px, 20px);
    -ms-transform: translate(-20px, 20px);
    -moz-transform: translate(-20px, 20px);
    -webkit-transform: translate(-20px, 20px);
    transform: translate(-20px, 20px);
}

.part_13 .four:hover {
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.part_13 .five:hover {
    -o-transform: scaleY(1.2);
    -ms-transform: scaleY(1.2);
    -moz-transform: scaleY(1.2);
    -webkit-transform: scaleY(1.2);
    transform: scaleY(1.2);
}

.part_13 .six:hover {
    -o-transform: scale(1.2, 0.5);
    -ms-transform: scale(1.2, 0.5);
    -moz-transform: scale(1.2, 0.5);
    -webkit-transform: scale(1.2, 0.5);
    transform: scale(1.2, 0.5);
}

.part_13 .seven:hover {
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
}

.part_13 .eight:hover {
    -o-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
}

.part_13 .nine:hover {
    -o-transform: skewY(-20deg);
    -ms-transform: skewY(-20deg);
    -moz-transform: skewY(-20deg);
    -webkit-transform: skewY(-20deg);
    transform: skewY(-20deg);
}

.part_13 .ten:hover {
    -o-transform: skew(-20deg, 20deg);
    -ms-transform: skew(-20deg, 20deg);
    -moz-transform: skew(-20deg, 20deg);
    -webkit-transform: skew(-20deg, 20deg);
    transform: skew(-20deg, 20deg);
}

.part_13 .eleven:hover {
    -o-transform: matrix(1.2, 0, 0.5, 1.2, 50, 0);
    -ms-transform: matrix(1.2, 0, 0.5, 1.2, 50, 0);
    -moz-transform: matrix(1.2, 0, 0.5, 1.2, 50, 0);
    -webkit-transform: matrix(1.2, 0, 0.5, 1.2, 50, 0);
    transform: matrix(1.2, 0, 0.5, 1.2, 50, 0);
}



/* ! */
/* .part_14 {
    display: none;
} */
/*! 14.Перспектива (базовий приклад)​ */
.part_14 .title-section {
    margin-bottom: 50px;
}

.part_14 .container {
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 50px;
    /* outline: 1px dashed blue; */
}

.part_14 .scene {
    height: 200px;
    width: 200px;
    border: 2px solid black;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.part_14 .box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 4px;
    color: white;
    font-size: 20px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    /*?  Анимация-1  */
    transition: transform 1s ease-in-out;
}

.part_14 .box.rotate-x {
    transform: rotateX(60deg);
    /**  Анимация-2  */
    animation: rotateX-14 1500ms infinite alternate ease-in-out 1000ms;
    background-color: orange;
}

.part_14 .box.rotate-y {
    transform: rotateY(60deg);
    /**  Анимация-2  */
    animation: rotateY-14 1500ms infinite alternate ease-in-out 1000ms;
    background-color: teal;
}

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

    100% {
        transform: rotateX(60deg);
    }
}

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

    100% {
        transform: rotateY(60deg);
    }
}

/* ! */
/* .part_15 {
    display: none;
} */
/*! 15.Перспектива (з функцією perspective()​)​ */
.part_15 .title-section {
    margin-bottom: 50px;
}

.part_15 .container {
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 50px;
    /* outline: 1px dashed blue; */
}

.part_15 .scene {
    height: 200px;
    width: 200px;
    border: 2px solid black;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.part_15 .box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 4px;
    color: white;
    font-size: 20px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    /*?  Анимация-1  */
    transition: transform 1s ease-in-out;
}

.part_15 .box.rotate-x {
    transform: perspective(400px) rotateX(45deg);
    /**  Анимация-2  */
    animation: rotateX-15 1500ms infinite alternate ease-in-out 1000ms;
    background-color: red;
}

.part_15 .box.rotate-y {
    transform: perspective(400px) rotateY(45deg);
    /**  Анимация-2  */
    animation: rotateY-15 1500ms infinite alternate ease-in-out 1000ms;
    background-color: blue;
}


@keyframes rotateX-15 {
    0% {
        transform: perspective(400px) rotateX(0deg);
    }

    100% {
        transform: perspective(400px) rotateX(60deg);
    }
}

@keyframes rotateY-15 {
    0% {
        transform: perspective(400px) rotateY(0deg);
    }

    100% {
        transform: perspective(400px) rotateY(60deg);
    }
}


/* ! */
/* .part_16 {
    display: none;
} */
/*! 16.Однакова перспектива для групи елементів​ */
.part_16 .title-section {
    margin-bottom: 50px;
}

.part_16 .scene {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 390px;
    border: 3px solid black;
    border-radius: 4px;
    margin: -10px;
    background-color: #fff;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.part_16 .box {
    flex-basis: 100px;
    height: 100px;
    margin: 10px;
    border-radius: 4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    /*! Задаємо перспективу для кожного елемента окремо */
    transform: perspective(400px) rotateY(45deg);
    /*?  Анимация-1  */
    transition: transform 1s ease-in-out;
    /**  Анимация-2  */
    animation: rotateY-16 3000ms infinite alternate backwards ease-in-out 1000ms;
}

.part_16 .box:nth-child(1) {
    background-color: #f44336;
}

.part_16 .box:nth-child(2) {
    background-color: #9c27b0;
}

.part_16 .box:nth-child(3) {
    background-color: #3f51b5;
}

.part_16 .box:nth-child(4) {
    background-color: #03a9f4;
}

.part_16 .box:nth-child(5) {
    background-color: #009688;
}

.part_16 .box:nth-child(6) {
    background-color: #4caf50;
}

.part_16 .box:nth-child(7) {
    background-color: #ffc107;
}

.part_16 .box:nth-child(8) {
    background-color: #795548;
}

.part_16 .box:nth-child(9) {
    background-color: #e91e63;
}

@keyframes rotateY-16 {
    0% {
        transform: perspective(400px) rotateY(60deg);
    }
    100% {
        transform: perspective(400px) rotateY(-60deg);
    }
}







/*? ______________________________________________________ */
/* ! */
.part_0 {
    display: none;
}

/*! 0.Заголовок */