:root {
    /** ============ CSS-змінні ============ */
    --color-font-body: #220c0c;
    --color-background-body: #ffe8fb;
    --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; */
    padding: 20px 0px 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;
    margin: 0 auto;
    min-height: 100vh;
    /* width: 100vw; */
    /* outline: 1px solid red; */
}

/* *======================================= */
/* ! */
/* .part_1 {
    display: none;
} */
/*! 1.Адаптивна (adaptive) та Чутлива (responsive) верстки */
/** 01. Від 0 (320px) (до 599px) - orange */
/*? Загальні стилі container */
.container {
    min-width: 320px;
    /* ! ширина в'юпорту, нижче якої дизайн не підтримується */
    margin: 0 auto;
    padding-top: 20px;
    background-color: orange;
    /*?  Text styles  */
    text-align: center;
    height: 200px;
    font-size: 32px;
    /* white-space: nowrap; */
}

/*? Встановлюємо базову (початкову) ширину adaptive контейнера. */
.container.adaptive {
    max-width: 320px;
    /*! початкове значення максимальної ширини */
    margin-bottom: 40px;
}

/*? Встановлюємо максимальну ширину responsive контейнера. */
.container.responsive {
    max-width: 1140px;
}

.label {
    margin-bottom: 20px;
    color: white;
}

/*? Приховуємо зайві заголовки медіазапитів  */
.label-2,
.label-3,
.label-4 {
    display: none;
}


/*? Медіа-запити: */
/** 02. Від 600px - skyblue */
@media screen and (min-width: 600px) {
    .container {
        background-color: skyblue;
    }

    .container.adaptive {
        max-width: 600px;
    }

    .label-1,
    .label-3,
    .label-4 {
        display: none;
    }

    .label-2 {
        display: block;
    }
}

/** 03. Від 900px - lightgreen */
@media screen and (min-width: 900px) {
    .container {
        background-color: lightgreen;
    }

    .container.adaptive {
        max-width: 900px;
    }

    .label-1,
    .label-2,
    .label-4 {
        display: none;
    }

    .label-3 {
        display: block;
    }
}

/** 04. Від 1140px до ~ - tomato */
@media screen and (min-width: 1140px) {
    .container {
        background-color: tomato;
    }

    .container.adaptive {
        max-width: 1140px;
    }

    .label-1,
    .label-2,
    .label-3 {
        display: none;
    }

    .label-4 {
        display: block;
    }
}


/* ! */
/* .part_2 {
    display: none;
} */
/*! 2.CSS-інструменти для responsive */
.container2 {
    /*? для .element2-1  */
    /* width: 80vw; */
    /*? для .element2-3  */
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    background-color: cadetblue;
}

.element2-1 {
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: blue;
    background-color: rgb(235, 135, 232);
}

.element2-2 {
    width: 50vw;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: blue;
    background-color: rgb(235, 135, 139);
}

.element2-3 {
    width: 50vmin;
    height: 50vmax;
    display: flex;
    justify-content: center;
    align-items: center;
    color: blue;
    background-color: rgb(132, 222, 150);
}

/* ! */
/* .part_3 {
    display: none;
} */
/*! 3.Стратегія Mobile First {Адаптивна (adaptive) верстка} */
.mobile-first {
    margin-top: 600px;
    margin-bottom: 50px;
}

/** 01. Від 0 (320px) (до 767px)  */
/*? Загальні стилі container */
.container3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 320px;
    max-width: 1440px;
    margin: 0 auto;
}

/*? Загальні стилі element3 */
.element3 {
    /*! Чутлива (responsive) верстка */
    /* width: 100%; */
    /*! Адаптивна (adaptive) верстка */
    width: 100%;
    max-width: 480px;

    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    /*! Застосується до всіх медіа-запитів */
    /* border: 2px solid black; */
}

.element3:nth-child(1) {
    background-color: #F44336;
}
.element3:nth-child(2) {
    background-color: #3F51B5;
}
.element3:nth-child(3) {
    background-color: #4CAF50;
}
.element3:nth-child(4) {
    background-color: #00BCD4;
}
.element3:nth-child(5) {
    background-color: #E91E63;
}
.element3:nth-child(6) {
    background-color: #009688;
}

/*! Медіа-запити: */
/** 02. Від 768px (до 1023px) */
@media screen and (min-width: 768px) {
    .container3 {
        /*? зміни властивостей та додаткові властивості */
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .element3 {
        /*! Чутлива (responsive) верстка */
        /* flex-basis: calc((100% - 10px) / 2); */
        /*! Адаптивна (adaptive) верстка */
        max-width: calc((768px - 10px) / 2);
        /*? додаткові властивості */
        font-size: 32px;
        font-weight: 700;
    }
}

/** 03. Від 1024px (до ~) */
@media screen and (min-width: 1024px) {
    .container3 {
        /*? зміна властивості */
        gap: 20px;
        /*! Адаптивна (adaptive) верстка */
        /*? зміни властивостей та додаткові властивості */
        display: grid;
        grid-template-columns: repeat(3, max(calc((1024px - 40px) / 3)));
    }
    .element3 {
        /*! Чутлива (responsive) верстка */
        /* flex-basis: calc((100% - 40px) / 3); */
        /*! Адаптивна (adaptive) верстка */
        /* max-width: calc((1024px - 40px) / 3);  */ /*! так працює не зовсім вірно */
        /*? додаткові властивості */
        font-style: italic;
    }
}



/* ! */
/* .part_4 {
    display: none;
} */
/*! 4.Синтаксис медіа-запиту */

/* .container4 {
    display: flex;
    align-items: center;
    margin: 0 auto;
    outline: auto;
} */





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

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