:root {
    /** ============ CSS-змінні ============ */
    --color-font-body: #4b2500;
    --color-background-body: #f1e7ff;
    --color-title-lesson: #4b4200;
    --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-1.Анімовані властивості події hover на кнопці */
.btn1 {
    position: relative;
    /* ! */
    overflow: hidden;
    height: 100px;
    margin: 50px 0;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    font-size: 4rem;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    background-color: #008080;
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.2),
        4px 4px 8px rgba(0, 0, 0, 0.1);
    box-shadow:
        inset 0 0 16px 8px rgba(0, 0, 0, 0.3),
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12);
    /*? Анімація-1 - шлях */
    /* transition-property: background-color; */
    transition-property: color, background-color;
    transition-duration: 1000ms;
    transition-timing-function: cubic-bezier(0.83, -0.08, 0.32, 1);
    transition-delay: 500ms;
}

.btn1::before,
.btn1::after {
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background-color: #a9bdff;
    background-repeat: no-repeat;
    background-size: 45px 45px;
    background-position: center;
    /*? Анімація-1 - шлях (збірна властивість) */
    transition:
        transform 1000ms cubic-bezier(0.83, -0.08, 0.32, 1) 500ms,
        opacity 1000ms cubic-bezier(0.83, -0.08, 0.32, 1) 500ms;
}

.btn1::before {
    margin-right: 20px;
    opacity: 1;
    background-image: url(../images/cat.webp);
}

.btn1::after {
    position: absolute;
    opacity: 0;
    /*? Анімація-1 - початковий стан-1 */
    top: 100%;
    /*! або: */
    /* top: 100px; */
    background-image: url(../images/dog.webp);
    /*? Анімація-1 - початковий стан-2 */
    /* transform: translateY(calc(-100% + 50px)); */
    /* transform: translateY(-50px); */
}

/*? Анімація-1 - кінцевий стан + тригер */
.btn1:hover::before {
    transform: translateY(-150%);
    opacity: 0;
}

/*? Анімація-1 - кінцевий стан + тригер */
.btn1:hover::after {
    transform: translateY(-150%);
    opacity: 1;
}

/*? Анімація-1 - кінцевий стан + тригер */
.btn1:hover {
    color: #25ffff;
    background-color: #d87093;
}



/*! =============================== */
.part.part_1-1_1 {
    /* display: none; */
    min-height: auto;
    margin-bottom: 100px;
}
/*! 1-1_1(1).Анімовані властивості зміни контенту на кнопці (1-й варіант) */
.part_1-1_1 .box-btn {
    position: relative;
    width: 500px;
    height: 100px;
    /* outline: 1px solid red; */
}

.part_1-1_1 .btn {
    position: absolute;
    /* ! */
    /* overflow: hidden; */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    font-size: 4rem;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    background-color: #008080;
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.2),
        4px 4px 8px rgba(0, 0, 0, 0.1);
    box-shadow:
        inset 0 0 16px 8px rgba(0, 0, 0, 0.3),
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12);
    /*? Анімація-1 - шлях */
    transition-property: opacity;
    /* transition-property: opacity, background-color, color; */
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.83, -0.08, 0.32, 1);
    transition-delay: 100ms;
}

/*? Анімація-1 - початковий стан 2-ої кнопки */
.part_1-1_1 .btn:last-child {
    opacity: 0;
    background-color: #d87093;
    color: #25ffff;
}

/*? Анімація-1 - кінцевий стан 2-ої кнопки + тригер */
.part_1-1_1 .btn:last-child:hover {
    opacity: 1;
    /* color: #25ffff;
    background-color: #d87093; */
}

.part_1-1_1 .btn:first-child:hover {
    opacity: 0;
}

/*! =============================== */
.part.part_1-1_2 {
    /* display: none; */
    min-height: auto;
    margin-bottom: 100px;
}
/*! 1-1_1(2).Анімовані властивості зміни контенту на кнопці (2-й варіант) */
.part_1-1_2 .btn {
    position: relative;
    width: 600px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 4rem;
    letter-spacing: -2px;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    background-color: #008080;
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.2),
        4px 4px 8px rgba(0, 0, 0, 0.1);
    box-shadow:
        inset 0 0 16px 8px rgba(0, 0, 0, 0.3),
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12);
    /*? Анімація-1 - шлях */
    /* transition-property: all; */
    transition-property: background-color, color;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.83, -0.08, 0.32, 1);
    transition-delay: 100ms;
}

.part_1-1_2 .first-content,
.part_1-1_2 .second-content,
.part_1-1_2 .third-content {
    /*? Анімація-1 - шлях */
    /* transition-property: all; */
    transition-property: opacity;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.83, -0.08, 0.32, 1);
    transition-delay: 110ms;
    /*! Це потрібно, якщо використовувати opacity: 0/1; */
    position: absolute; 
}

.part_1-1_2 .second-content,
.part_1-1_2 .third-content {
    /* display: none; */
    opacity: 0;
}

/*? :hover та Анімація-1 */
.part_1-1_2 .btn:hover {
    background-color: #d87093;
    color: #25ffff;
}
.part_1-1_2 .btn:hover .second-content{
    /* display: block; */
    opacity: 1;
}
.part_1-1_2 .btn:hover .first-content{
    /* display: none; */
    opacity: 0;
}

/*? :active та Анімація-1 */
.part_1-1_2 .btn:active {
    background-color: #00b000;
    color: #d70000;
}
.part_1-1_2 .btn:active .third-content{
    /* display: block; */
    opacity: 1;
}
.part_1-1_2 .btn:active .second-content{
    /* display: none; */
    opacity: 0;
}


/*! =============================== */
/* .part.part_1-1_3 {
    display: none;
} */
/*! 1-1_1(3).Анімовані властивості зміни контенту на кнопці (3-й варіант) */
.part_1-1_3 .btn {
    position: relative;
    overflow: hidden;
    width: 500px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    font-size: 4rem;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    background-color: #008080;
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.2),
        4px 4px 8px rgba(0, 0, 0, 0.1);
    box-shadow:
        inset 0 0 16px 8px rgba(0, 0, 0, 0.3),
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12);
    /*? Анімація-1 - шлях (збірна властивість) */
    transition:
        background-color,
        1s 
        cubic-bezier(0.83, -0.08, 0.32, 1) 
        100ms;
}

.part_1-1_3 .content {
    position: absolute;
    width: 100%;
    /*? Анімація-1 - шлях (збірна властивість) */
    transition:
        transform, color,
        1s 
        cubic-bezier(0.83, -0.08, 0.32, 1) 
        100ms;
}

/*? Створюэмо додаткові елементи-контенти: */
.part_1-1_3 .content::before {
    content: "Ну, клікай вже!";
    position: absolute;
    width: 100%;
    left: 0;
    transform: translateY(-120%);
    opacity: 0;
    /*? Анімація-1 - шлях (збірна властивість) */
    transition:
        transform, opacity, color,
        1s 
        cubic-bezier(0.83, -0.08, 0.32, 1) 
        100ms;
}

.part_1-1_3 .btn::after {
    content: "Чудовий клік!";
    position: absolute;
    transform: translateY(-120%);
    opacity: 0;
    /*? Анімація-1 - шлях (збірна властивість) */
    transition:
        transform, opacity, color,
        1s 
        cubic-bezier(0.83, -0.08, 0.32, 1) 
        100ms;
}

/*? :hover та Анімація-1 */
.part_1-1_3 .btn:hover {
    background-color: #d87093;
}
.part_1-1_3 .btn:hover .content {
    /* opacity: 0; */ /*! НЕ ПРАЦЮЄ, бо ховає ще .content::before !!! */
    transform: translateY(120%);
}
.part_1-1_3 .btn:hover .content::before {
    opacity: 1;
    color: #25ffff;
}

/*? :active та Анімація-1 */
.part_1-1_3 .btn:active {
    background-color: #00b000;
}
.part_1-1_3 .btn:active .content {
    transform: translateY(220%);
}
.part_1-1_3 .btn:active .content::before {
    opacity: 0;
}
.part_1-1_3 .btn:active::after {
    opacity: 1;
    transform: translateY(0);
    color: #d70000;
}


/*! =============================== */
/* .part_1-2 {
    display: none;
} */
/*! 1-1_2.Відкриття та приховування елемента без використання JS */
/*? Просто input */
.part_1-2 .header,
.part_1-2 .input-box {
    margin-bottom: 40px;
    width: 400px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    outline: 4px double tomato;
}

.part_1-2 .input-box>label {
    outline: 1px solid grey;
}

.part_1-2 .input-box>input:checked+label {
    background-color: #e8ffcd;
}

/*? Кнопка-label з випадаючим меню */
/* ! */
/* .part_1-2 .header {
    display: none;
} */
.part_1-2 .header {
    position: relative;
    /* flex-direction: column; */
    height: auto;
    padding: 25px 25px;
    outline: 4px double rgb(71, 151, 255);
}

/*! Приховуємо input */
.part_1-2 .header>input {
    display: none;
}

/*! Робимо з label вигляд кнопки (кнопка-label) */
.part_1-2 .header>label {
    /* position: relative; */
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-left: auto;
    outline: 2px solid grey;
    /* background-color: #e8ffcd; */
    box-shadow: 4px 4px 8px gray;
}
.part_1-2 .header>label:hover{
    box-shadow: inset 0 0 8px gray;
}

/*! Подія :checked змінює background-color на label */
.part_1-2 .header>input:checked+label {
    background-color: #e8ffcd;
}

/*! Робимо внутрішній контент (горизонтальні рисочки) кнопки-label */
.input-button-span::after,
.input-button-span::before,
.input-button-span {
    content: '';
    display: block;
    /* position: absolute; */
    /* right: 0; */
    width: 50px;
    height: 8px;
    background-color: #393939;
    background-color: green;
    /*?  Анимация-1  */
    transition: 1s;
}
.input-button-span::before {
    /* top: -8px; */
    margin-top: -20px;
    background-color: red;
    /* opacity: 0.5; */
}
.input-button-span::after {
    /* top: 8px; */
    margin-top: 32px;
    background-color: blue;
}

/*! Список, що розкривається знизу */
.part_1-2 .list {
    /* display: none; */
    /* visibility: hidden; */
    opacity: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    outline: 4px double rgb(71, 151, 255);
    /*?  Анимация-1 */
    transition: 1s;
}

.part_1-2 .item {
    padding: 10px 20px;
    border: 2px solid green;
    border-radius: 8px;
    background-color: #e8ffcd;
    /*?  Анимация-1 */
    transition: .5s;
}
.part_1-2 .item:hover {
    border-color: #00b5b5;
    background-color: #92ffff;
    box-shadow: inset 0 0 8px gray; ;
}

/*! Подія :checked змінює контент (горизонтальні рисочки) кнопки-label на хрестик */
.part_1-2 .header>input:checked+label>.input-button-span {
    transform: rotate(45deg);
}
.part_1-2 .header>input:checked+label>.input-button-span::before {
    margin-top: 0;
    transform: rotate(0);
}
.part_1-2 .header>input:checked+label>.input-button-span::after {
    margin-top: -8px;
    transform: rotate(-90deg);
}

/*! Подія :checked відкриває або приховує список, що розкривається знизу*/
.part_1-2 .header>input:checked+label ~ .list {
    top: 100%;
    /* display: flex; */
    /* visibility: visible; */
    opacity: 1;
}


/*! =============================== */
/* .part_2 {
    display: none;
} */
/*! 1-2.Підкреслення вкладки при ховері в меню */
.list2 {
    display: flex;
    gap: 12px;
}

/* .link2 { */
.item2 {
    overflow: hidden;
    position: relative;
    display: block;
    padding: 10px 20px;
    color: currentColor;
    border: 2px solid green;
    border-radius: 8px;
    /*? Анімація-1+ - початковий стан */
    /* transform: scale(1); */
    /*? Анімація-1+ - шлях (збірна властивість) */
    transition:
        transform 500ms cubic-bezier(0.83, -0.08, 0.32, 1) 1000ms;
}

/* .link2::after { */
.item2::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: tomato;
    /*? Анімація-1 - початковий стан */
    opacity: 0;
    transform: scaleX(0);
    /*? Анімація-1 - шлях (збірна властивість) */
    transition:
        transform 1000ms cubic-bezier(0.83, -0.08, 0.32, 1) 500ms,
        opacity 1000ms cubic-bezier(0.83, -0.08, 0.32, 1) 500ms;
}

/*? Анімація-1 - кінцевий стан + тригер */
/* .item2:hover .link2::after { */
/* .link2:hover::after { */
.item2:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/*? Анімація-1+ - кінцевий стан + тригер */
/* .link2:hover { */
.item2:hover {
    cursor: pointer;
    /* ! */
    /* transform: scale(1.1); */
}


/*! =============================== */
/* .part_3 {
    display: none;
} */
/*! 1-3.Анімація на оверлей статті: */
.article3 {
    width: 370px;
    /* ! */
    overflow: hidden;
    border-radius: 12px;
    box-shadow:
        2px 2px 1px rgba(0, 0, 0, 0.2),
        1px 1px 2px rgba(0, 0, 0, 0.14),
        1px 1px 4px rgba(0, 0, 0, 0.1);
}

.thumb3 {
    position: relative;
    /* ! (дублюэться у .article3) */
    /* overflow: hidden; */
}

.overlay3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: skyblue;
    /*? Анімація-1-overlay - початковий стан */
    /* ! */
    opacity: 0;
    transform: translateX(-100%);
    /*? Анімація-1-overlay - шлях (збірна властивість) */
    transition:
        transform 1000ms cubic-bezier(0.83, -0.08, 0.32, 1) 500ms,
        opacity 1000ms cubic-bezier(0.83, -0.08, 0.32, 1) 500ms;
}

/*todo блок кнопки-іконки */
.buttons-box {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    transform: translate(-50%, -50%);
    outline: 3px solid orange;
    /*? Анімація-1-box - початковий стан */
    /* ! */
    opacity: 0;
    /*? Анімація-1-box - шлях (збірна властивість) */
    transition:
        opacity 1000ms cubic-bezier(0.83, -0.08, 0.32, 1) 500ms;
}

/*todo кнопки та іконки */
.button3 {
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button3 .icon3 {
    width: 32px;
    height: 32px;
}

/*todo блок інформації */
.meta3 {
    padding: 15px;
    background-color: skyblue;
}

.name3,
.price3 {
    margin-bottom: 10px;
    text-align: center;
    color: #6a0000;
}

/*todo all hovers */
/*? Анімація-1-overlay - кінцевий стан + тригер */
.article3:hover .overlay3 {
    opacity: 0.7;
    transform: translateX(0);
}

/*? Анімація-1-box - кінцевий стан + тригер */
.article3:hover .buttons-box {
    opacity: 1;
}

.button3:hover {
    fill: red;
}


/*! =============================== */
/* .part_4 {
    display: none;
} */
/*! 1-4.Анімація модального вікна */
.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 1;
}

/*? Анімація-1 - тригер */
.backdrop.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.no-scroll {
    overflow: hidden;
}

/* ! */
.backdrop.is-hidden .modal {
    /*? Анімація-1 - початковий стан */
    opacity: 0;
    /* transform: scale(0); */
    /* transform: translate(-50%, -50%) scale(0.1); */
    transform: translate(-100%, -100%) scale(0.1);
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 400px;
    min-height: 300px;
    padding: 15px;
    text-align: center;
    background-color: skyblue;
    /*? Анімація-1 - кінцевий стан */
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    /*? Анімація-1 - шлях */
    transition:
        opacity 3000ms cubic-bezier(0.83, -0.08, 0.32, 1) 500ms,
        transform 3000ms cubic-bezier(0.83, -0.08, 0.32, 1) 500ms;
}

.modal .btn {
    position: absolute;
    top: 10px;
    right: 10px;
}


/*! =============================== */
/* .part_5 {
    display: none;
} */
/*! 5.2-1.Бібліотека анімацій animate.style */
.part_5 p {
    font-size: 3rem;
}





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

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