:root {
    /** ============ CSS-змінні ============ */
    --color-font-body: #220c0c;
    --color-background-body: #fff8de;
    --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.Елемент <svg> */
.part_1 img {
    margin-bottom: 15px;
    background-color: #786a00;
    /* background-color: #067800; */
    outline: 2px solid orangered;
}

.svg1 {
    /* display: none; */
    background-color: #786a00; /* ✅ */
    outline: 2px solid orangered; /* ❌ */
    fill: brown; /* ❌ */
}

/*? властивості оформлення фігур */
/* #fresh-food {
    fill: green;
    fill-opacity: 0.5;
    stroke: red;
    stroke-opacity: 0.5;
    stroke-width: 2;
} */


/* ! */
/* .part_2 {
    display: none;
} */
/*! 2.Елемент <rect> */
/* .first-rect2 {
    width: 300px;
    height: 200px;
    fill: blue;
    stroke: orange;
    stroke-width: 12px;
} */
/*? або так: */
/* .svg2>rect {
    width: 300px;
    height: 200px;
    fill: blue;
    stroke: orange;
    stroke-width: 12px;
} */


/* ! */
/* .part_3 {
    display: none;
} */
/*! 3.Елемент <circle> */


/* ! */
/* .part_4 {
    display: none;
} */
/*! 4.Елемент <ellipse> */


/* ! */
/* .part_5 {
    display: none;
} */
/*! 5.Елемент <line> */


/* ! */
/* .part_6 {
    display: none;
} */
/*! 6.Елемент <polygon> */


/* ! */
/* .part_7 {
    display: none;
} */
/*! 7.Елемент <path> */
/* ❌ */
/* .part_7 svg {
    fill: orange;
} */
/* ✅ */
/* .part_7 path {
    fill: blue;
} */


/* ! */
/* .part_8 {
    display: none;
} */
/*! 8.Елемент <g> ПРИКЛАД-1 */
#canvas-backgrond {
    fill: tomato; 
}
#canvas-grid {
    fill: blue; 
}


/* ! */
/* .part_9 {
    display: none;
} */
/*! 9.Елемент <g> ПРИКЛАД-2 */
#my-group {
    fill: orange; /* ❌ */
    fill-opacity: 0.5; /* ✅ */
    stroke: black; /* ✅ */
    stroke-width: 2; /* ✅ */
}

#my-group- circle {
    fill: orange; /* ✅ */
    fill-opacity: 0.5; /* ✅ */
    stroke: black; /* ✅ */
    stroke-width: 2; /* ✅ */
}


/* ! */
.part_10-1 {
    /* display: none; */
    min-height: auto;
}
/* .part_10-2 {
    display: none;
} */
/*! 10-1.Елемент <symbol> ПРИКЛАД-1 (перевикористання SVG) */
/*! 10-2.Елемент <use>: перевикористання за допомогою елемента <symbol> ПРИКЛАД-1 */
#sym01 {
    fill: green; /* ❌ */
    fill-opacity: 0.5; /* ✅ */
}


/* ! */
.part_11-1 {
    /* display: none; */
    min-height: auto;
}
/* .part_11-2 {
    display: none;
} */
/*! 11-1.Елемент <symbol> ПРИКЛАД-2 (перевикористання SVG) */
/*! 11-2.Елемент <use>: перевикористання за допомогою елемента <symbol> ПРИКЛАД-2 */
#sym02 {
    fill: red; /* ❌ */
    stroke: orange; /* ✅ */
    stroke-width: 4; /* ✅ */
}


/* ! */
.part_12 {
    /* display: none; */
    min-height: auto;
}
/*! 12.SVG-документ */
/* ❌ + ✅ */
.part_12 svg {
    outline: 1px solid orangered; /* ❌ */
    background-color: #00aeff; /* ✅ */
    fill: green; /* ❌ */
}


/* ! */
/* .part_13 {
    display: none;
} */
/*! 13.Файл icon.svg */
.svg-icon {
    outline: 1px solid orangered; /* ✅ */
    background-color: #00aeff; /* ✅ */
    fill: green; /* ❌ */
}


/* ! */
.part_14 {
    /* display: none; */
    outline: 2px solid blue;
}
/*! 14.Оформлення фігур шляхом перевикористання */
.svg14 {
    outline: 1px dashed green;
}

.container14 {
    padding: 16px;
    display: flex;
    justify-content: center;
    gap: 24px;
    outline: 4px double red;
}
.icon14 {
    border: 2px dashed #2a2a2a;
    border-radius: 8px;
    fill: red; /* ✅ */
    stroke: #00aeff; /* ✅ */
    stroke-width: 2px; /* ✅ */
}
/* ✅ */
.icon14:last-child {
    fill-opacity: 0.5;
    stroke-opacity: 0.5;
}
/* ✅ */
.icon14:hover {
    fill: #00aeff;
    fill-opacity: 0.7;
    stroke: red;
    stroke-opacity: 0.7;
    stroke-width: 1px;
    
}


/* ! */
/* .part_15 {
    display: none;
} */
/*! 15.IconMoon App */


/* ! */
/* .part_16 {
    display: none;
} */
/*! 16.Файли instagram.svg та instagram-omg.svg by svgomg */
.instagram-icon16 {
    margin-bottom: 10px;
    border: 4px double black;
    border-radius: 8px;
    background-color: cadetblue;
    /* ❌ */
    fill: rgb(51, 255, 0);
    stroke: #00aeff;
}

/* ! */
/* .part_17 {
    display: none;
} */
/*! 17.Код файла instagram.svg як SVG-документ в HTML */
.instagram-icon-svg17 {
    margin-left: 12px;
    margin-right: 12px;
    outline: 1px dashed #2a2a2a;
    /* ✅ */
    fill: blue;
    stroke: #ff0000;
    stroke-width: 1px;
}
/* ✅ */
.instagram-icon-svg17:hover {
    fill: red;
    stroke: green;
}




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