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

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;
} */
/*! 1.Зміна кольору за допомогою анімації */
.box1 {
    width: 400px;
    height: 400px;
    outline: 4px double #1000c4;
    /** Анімація-2 - шлях */
    animation-name: changeBgColor; /*! 1.Назва анімації */
    animation-duration: 3000ms; /*! 2.Тривалість анімації */
    animation-timing-function: cubic-bezier(0.83, -0.08, 0.32, 1); /*! 3.Функція розподілу часу */
    animation-delay: 0ms; /*! 4.Затримка перед початком анімації */
    animation-iteration-count: 1; /*! 5.Кількість повних повторень анімації (або постійно - infinite)*/
    /* animation-iteration-count: infinite;  */
    animation-direction: normal; /*! 6.Напрямок відтворення анімації*/
    /* animation-direction: alternate; */
}

/** Анімація-2 - зміна стану + тригер */
@keyframes changeBgColor {
    0% {
        background-color: red;
    }

    50% {
        background-color: green;
    }

    100% {
        background-color: blue;
    }
}


/*! =============================== */
/* .part_2 {
    display: none;
} */
/*! 2.Зміна розташування за допомогою анімації */
.box2 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: blue;
    box-shadow: inset 0 0 60px 12px rgba(0, 0, 0, 0.7);
    /** Анімація-2 - шлях */
    /*! 1.Назва анімації */
    animation-name: bouncing;
    /*! 2.Тривалість анімації */
    animation-duration: 5s;
    /*! 3.Функція розподілу часу */
    /*todo https://cubic-bezier.com/#.17,.67,.83,.67 */
    animation-timing-function: cubic-bezier(0.83, -0.08, 0.32, 1);
    /*! 4.Затримка перед початком анімації */
    animation-delay: 0ms;
    /*! 5.Кількість повних повторень анімації (або постійно - infinite)*/
    animation-iteration-count: 1;
    /* animation-iteration-count: infinite; */
    /*! 6.Напрямок відтворення анімації*/
    /*? починається з 0%, закінчується на 100% */
    animation-direction: normal;
    /*? починається зі 100%, закінчується на 0% */
    /* animation-direction: reverse; */
    /*? починається з 0%, йде до 100% */
    /*? після чого відбувається зміна напрямку на кожному наступному повторенні */
    /* animation-direction: alternate; */
    /*? починається зі 100%, закінчується на 0% */
    /*? після чого відбувається зміна напрямку на кожному наступному повторенні */
    /* animation-direction: alternate-reverse; */
    /*! 7.Визначає, що відбувається зі стилями елемента до початку анімації і після її завершення */
    /*? стилі анімації впливають на елемент тільки під час анімації */
    animation-fill-mode: none;
    /*? стилі, застосовані в кінці анімації, залишаються на елементі після її завершення */
    /* animation-fill-mode: forwards; */
    /*? стартові стилі анімації будуть застосовані до елемента ще до старту анімації */
    /* animation-fill-mode: backwards; */
    /*? поєднує forwards і backwards, стилі застосовуються до і після анімації */
    /* animation-fill-mode: both; */
    /*! 8.Дозволяє призупинити відтворення анімації */
    /*? за замовчуванням встановлено значення running */
    animation-play-state:running;
    /*? анімація буде припинена (наприклад, при hover)*/
    /* animation-play-state:paused; */
    /*! 9.Збірна властивість animation */
    /*? дозволяє коротше записати властивості анімації */
    /* animation: bouncing 3000ms linear 1s infinite alternate forwards running; */
}

/** Анімація-2 - зміна стану + тригер */
@keyframes bouncing {
    0% {
        /* margin-top: 0;
        margin-right: 0; */
        transform: translate(0);
        box-shadow: 
            inset 0 0 60px 12px rgba(0, 0, 0, 0.7),
            -5px -5px 10px rgba(0, 0, 0, 0.5);
    }

    100% {
        /* margin-top: 300px;
        margin-right: -300px; */
        transform: translate(300px, 300px);
        box-shadow:
            inset 0 0 80px 12px rgba(0, 0, 0, 0.7), 
            -50px -50px 30px rgba(0, 0, 0, 0.1);
    }
}


/*! =============================== */
/* .part_3 {
    display: none;
} */
.button3 {
    padding: 15px 25px; 
    font-size: 3rem;
    /** Анімація-2 */
    /* animation-name: pulse-button;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: normal; */
    /* animation-direction: alternate; */
}
/*! 3.Анімація на кнопці при події hover */
@keyframes pulse-button {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        /* transform: scale(0.9); */
    }
}

.button3:hover {
    /*! 1.Назва анімації */
    animation-name: pulse-button;
    /*! 2.Тривалість анімації */   
    animation-duration: 2s;
    /*! 3.Функція розподілу часу */
    animation-timing-function: ease-in-out;
    /*! 5.Кількість повних повторень анімації - постійно */
    animation-iteration-count: infinite;
    /*! 6.Напрямок відтворення анімації*/
    animation-direction: normal;
    /* animation-direction: alternate; */
}

/*! =============================== */
/* .part_3-1 {
    display: none;
} */
.part_3-1 .button {
    padding: 15px 25px; 
    font-size: 3rem;
    background-color: #00dfdf;
    /*? Анімація-1 - шлях */
    transition:
        opacity 3s cubic-bezier(0.83, -0.08, 0.32, 1) 100ms,
        transform 3s cubic-bezier(0.83, -0.08, 0.32, 1) 100ms;
}

/*! 3.CSS-переходи на кнопці при події hover */
.part_3-1 .button:hover {
    opacity: 0.3;
    transform: scale(1.1);
    /*? Анімація-1_1 */
    /* transition:
        opacity 3s cubic-bezier(0.83, -0.08, 0.32, 1) 100ms,
        transform 3s cubic-bezier(0.83, -0.08, 0.32, 1) 100ms; */
    /*? Анімація-1_2 */
    /* transition:
        opacity 1s cubic-bezier(0.83, -0.08, 0.32, 1) 100ms,
        transform 1s cubic-bezier(0.83, -0.08, 0.32, 1) 100ms; */
}


/*! =============================== */
/* .part_4 {
    display: none;
} */
/*! 4.Анімація форми та руху, яка припиняеться при події hover */
.content {
    padding: 50px;
}

.content-cube-ball {
    height: 200px;
    width: 200px;
    background-color: blue;
    border-radius: 50%;
    position: relative;
    left: 0;
    /** Анімація-2 - шлях */
    animation-name: cube-ball;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/** Анімація-2 - зміна стану + тригер */
@keyframes cube-ball {
    0% {
        left: 0;
    }

    40% {
        border-radius: 0;
        background-color: chocolate;
    }

    60% {
        border-radius: 0;
        background-color: coral;
    }

    100% {
        left: 500px;
        background-color: cornflowerblue;
        
    }
}

/** Анімація-2 - пауза в анімації при події hover */
.content:hover .content-cube-ball {
    animation-play-state: paused;
}


/*! =============================== */
/* .part_5 {
    display: none;
} */
/*! 5.Анімація СВІТЛОФОР при події hover */
.traffic-lights {
    margin-top: 20px;
    width: 200px;
    padding: 25px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    border-radius: 20px;
    background-color: #5e7272;
    outline: 8px double darkblue;
}

.traffic-lights li {
    width: 150px;
    height: 150px;
    border: 4px solid rgb(46, 46, 46);
    border-radius: 50%;
}

.traffic-signal {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    opacity: 0.1;
}

.red {
    background-color: red;
    /*! Анімація при завантаженні сторінки */
    /* animation-name: pulse-traffic-lights;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 1; */
}
.yellow {
    background-color: yellow;
    /*todo Анімація при завантаженні сторінки */
    /* animation-name: pulse-traffic-lights;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-delay: 6s;
    animation-iteration-count: 1; */
}
.green {
    background-color: #08fc00;
    /** Анімація при завантаженні сторінки */
    /* animation-name: pulse-traffic-lights;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-delay: 11s;
    animation-iteration-count: 1; */
}

/* сценарій анімації */
@keyframes pulse-traffic-lights {
    0% {
        opacity: 0.1;
    }

    5% {
        opacity: 1;
    }

    65% {
        opacity: 1;
    }

    70% {
        opacity: 0.1;
    }

    75% {
        opacity: 1;
    }

    80% {
        opacity: 0.1;
    }

    85% {
        opacity: 1;
    }

    90% {
        opacity: 0.1;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 0.1;
    }
}

.traffic-lights:hover {
    cursor: pointer;
}
/* анімація при події hover */
.traffic-lights:hover .red{
    animation-name: pulse-traffic-lights;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
}
.traffic-lights:hover .yellow{
    animation-name: pulse-traffic-lights;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-delay: 6s;
    animation-iteration-count: 1;
}
.traffic-lights:hover .green{
    /* * var.1 - в кінці гасне (як всі)*/
    animation-name: pulse-traffic-lights;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-delay: 11s;
    animation-iteration-count: 1;
    /* * var.2 - в кінці постійно горить */
    /* animation-name: pulse-traffic-lights-green;
    animation-fill-mode: forwards; */
}

/* * var.2 - зелений в кінці постійно горить */
@keyframes pulse-traffic-lights-green {
    0% {
        opacity: 0.1;
    }

    5% {
        opacity: 1;
    }

    /* 65% {
        opacity: 1;
    }

    70% {
        opacity: 0.1;
    }

    75% {
        opacity: 1;
    }

    80% {
        opacity: 0.1;
    }

    85% {
        opacity: 1;
    }

    90% {
        opacity: 0.1;
    } */

    95% {
        opacity: 1;
    }
    /* * var.2 - в кінці постійно горить */
    100% {
        /* opacity: 0.1; */
        opacity: 1;
    }
}












/*! =============================== */
.part_6 {
    display: none;
}
/*! 6.HW-30 (1-й варіант) */
.part_6 .container {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: rgb(199, 199, 199);
}

.part_6 .container__box {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: red;
    /** Анімація-2 - шлях */
    animation-name: element-movement;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    /* animation-direction: alternate; */
}

/** сценарій анімації */
@keyframes element-movement {
    0% {
        /*? ці властивості можна не задавати: */
        left: 0;
        top: 0;
        background-color: red;
    }

    25% {
        /* ❌ - НЕ ПРАЦЮЄ */
        /* left: 0;
        bottom: 0; */
        /* ✅ */
        left: 0;
        top: 300px;
        background-color: blue;
    }

    50% {
        /* ❌ - НЕ ПРАЦЮЄ */
        /* right: 0;
        bottom: 0; */
        /* ✅ */
        left: 300px;
        top: 300px;
        background-color: green;
    }

    75% {
        /* ❌ - НЕ ПРАЦЮЄ */
        /* right: 0;
        top: 0; */
        /* ✅ */
        left: 300px;
        top: 0;
        background-color: yellow;
        
    }

    100% {
        left: 0;
        top: 0;
        background-color: red;
    }
}


/*! =============================== */
.part_7 {
    display: none;
}
/*! 7.HW-30 (2-й варіант) */
.part_7 .container {
    /* position: relative; */
    width: 400px;
    height: 400px;
    background-color: rgb(255, 234, 249);
}

.part_7 .container__box {
    width: 100px;
    height: 100px;
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */
    background-color: red;
    /** Анімація-2 - шлях */
    animation-name: element-movement;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    /* animation-direction: alternate; */
}

/** сценарій анімації */
@keyframes element-movement {
    0% {
        /*? ці властивості можна не задавати: */
        /* left: 0;
        top: 0;
        background-color: red; */
    }

    25% {
        /* ✅ (1-й варіант) */
        /* left: 0;
        top: 300px; */
        /* ✅ (2-й варіант) */
        /* transform: translateY(300%); */
        transform: translateY(300px);
        background-color: blue;
    }

    50% {
        /* ✅ (1-й варіант) */
        /* left: 300px;
        top: 300px; */
        /* ✅ (2-й варіант) */
        /* transform: translate(300%, 300%); */
        transform: translate(300px, 300px);
        background-color: green;
    }

    75% {
        /* ✅ (1-й варіант) */
        /* left: 300px;
        top: 0; */
        /* ✅ (2-й варіант) */
        /* transform: translateX(300%); */
        transform: translateX(300px);
        background-color: yellow;
        
    }

    100% {
        /* ✅ (1-й варіант) */
        /* left: 0;
        top: 0; */
        /* ✅ (2-й варіант) */
        transform: translate(0);
        background-color: red;
    }
}




/*? ______________________________________________________ */
/*! =============================== */
.part_0 {
    display: none;
}
/*! 0.Заголовок */