:root {
    /** ============ CSS-змінні ============ */
    --color-font-body: #220c0c;
    --color-background-body: #def2ff;
    --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; */
}

/* *======================================= */
/*! 1.Стратегія Mobile First {Чутлива (responsive) верстка} */
.title-section {
    margin-top: 500px;
    margin-bottom: 50px;
}

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

/*? Загальні стилі element1 */
.element1 {
    /*! Чутлива (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; */
}

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

/** SASS loop for background color generation. */
/* $colors: "#F44336", "#3F51B5", "#4CAF50", "#00BCD4", "#E91E63", "#009688"; */

/* @each $color in $colors {
    $idx: index($colors, $color);
    .element1:nth-child(#{$idx}) {
        background-color: #{$color};
    }
} */

/*! Медіа-запити: */
/*? 01-1. (від 0) до 767px  */
/* todo Приклад Медіа-функції max-width: */
    /*? додаткові властивості */
/* @media screen and (max-width: 767px) {
    .element1 {
        border: 2px solid black;
    }
} */

/*? 01-2. (від 0) до 767px та від 1024px (до ~) */
/* todo Приклад Логічних операторів (оператор ,​ (буквально «АБО»)) */
    /*? додаткові властивості */
    @media screen and (max-width: 767px), (min-width: 1024px) {
        .element1 {
            border: 2px solid black;
        }
    }

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

/*? 02-1. Від 768px до 1023px  */
/* todo Приклад Логічних операторів (Оператор and​ (буквально «І»))) */
    /*? додаткові властивості */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .element1 {
        text-shadow: 6px 6px 4px #000000;;
    }
}

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


/*! 2.Приклад застосування стратегії Mobile First */
.link2 {
    display: block;
    text-align: center;
}





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

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