@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

:root {
    /** ============ CSS-змінні ============ */
    --color-font-body: #220c0c;
    --color-background-body: #ffe3de;
    --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;
} */
/* .part_1 {
    height: auto;
} */
/*! 1.Підключення векторної графіки в елементі <img> */
.part_1 img {
    margin: 5px auto;
    border: 2px dashed #2a2a2a;
    border-radius: 8px;
    /* ✅ */
    background-color: rgb(255, 238, 193);
}

.part_1 img:hover {
    cursor: pointer;
    /* ✅ */
    background-color: rgb(157, 255, 255);
    /* ❌ */
    fill: green;
    stroke: yellow;
    stroke-width: 5;
}


/* ! */
/* .part_2 {
    display: none;
} */
/*! 2.Підключення векторної графіки як фон елемента */
.part_2 .box {
    width: 240px;
    height: 240px;
    border: 2px dashed #2a2a2a;
    border-radius: 8px;
    background-color: rgb(255, 238, 193);
    background-image: url(../svg/instagram.svg);
    /* !!!!!!! ❌--- sprite НЕ ПРАЦЮЄ ---❌ !!!!!! */
    /* background-image: url(../images/icons-sprite.svg#instagram); */
    /* !!!!!!________________________________!!!!!! */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.part_2 .box:hover {
    cursor: pointer;
    /* ❌ */
    fill: green;
    stroke: yellow;
    stroke-width: 5;
    /* ✅ */
    border: 2px solid red;
    background-color: rgb(157, 255, 255);
}


/* ! */
/* .part_3 {
    display: none;
} */
/*! 3.Підключення векторної графіки як як вбудований SVG (inline SVG) */
.part_3 .icon-facebook,
.part_3 .icon-twitter {
    width: 200px;
    height: 200px;
    /* ❌ */
    color: grey; 
    fill: grey; 
}

.part_3 .icon-facebook:hover,
.part_3 .icon-twitter:hover {
    cursor: pointer;
    /* ✅ ✅*/
    stroke: orange;
    /* ❌ ❌ */
    fill: green;
    /* ❌ ✅ */
    background-color: yellow;
}

/* ✅ */
/* .part_3 .icon-facebook:hover .letter {
    cursor: pointer;
    fill: palevioletred;
} */
/* ✅ */
/* .part_3 .icon-facebook:hover .background {
    cursor: pointer;
    fill: green;
    stroke: yellow;
    stroke-width: 5;
} */


/* ! */
/* .part_4 {
    display: none;
} */
/*! 4.IconMoon App */


/* ! */
/* .part_41 {
    display: none;
} */
/*! 4-1.Підключення векторної графіки як SVG-спрайт ​*/
.part_41 .icon2 {
    border: 2px dashed #2a2a2a;
    border-radius: 8px;
    fill: darkgreen;
}
/* ✅ */
.part_41 .icon2:hover {
    fill: #03a9f4;
    stroke: crimson;
    stroke-width: 2;
}


/* ! */
/* .part_5 {
    display: none;
} */
/*! 5.Підключення іконок з макету WebStudio як SVG-спрайт ​*/
.part_5 .icon-webstudio {
    width: 430px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* align-items: center; */
    align-content: flex-start;
    outline: 4px double #ff745b;
}

/* .part_5 li {
    outline: 1px solid blue;
} */

.part_5 .icon3 {
    display: block;
    border: 1px dashed #212121;
    border-radius: 8px;
    /* border-radius: 50%; */
    fill: #2383ff;
    background-color: rgb(255, 235, 208);
}
/* ✅ */
.part_5 .icon3:hover {
    fill: #b2ff85;
    fill-opacity: 0.7;
    stroke: crimson;
    stroke-opacity: 0.5;
    /* stroke-width: 2; */
    background-color: #9ccfff;
}


/* ! */
/* .part_6 {
    display: none;
} */
/*! 6.Підключення SVG-зображення як фон елемента за  допомогою SVG-спрайт ​*/
.part_6 .box {
    width: 200px;
    height: 200px;
    border: 2px dashed blueviolet;
    border-radius: 8px;
    background-image: url("../svg-omg/astronaut.svg");
    /* !!!!!!! ❌--- sprite НЕ ПРАЦЮЄ ---❌ !!!!!! */
    /* background-image: url("../images/icons-sprite.svg#astronaut"); */
    /* !!!!!!________________________________!!!!!! */
    background-repeat: no-repeat;
    background-size: 180px;
    background-position: center;
}

.part_6 .box:hover {
    /* ❌ */
    fill: green;
    stroke: yellow;
    stroke-width: 5;
    /* ✅ */
    background-color: #b2ff85;
}


/* ! */
.part_7 {
    display: none;
}
/* ❌ - НЕ ПРАЦЮЄ */
/*! 7.Іконочний шрифт-1 ​*/ 
.part_7 .social-networks {
    font-size: 40px;
}

.part_7 .link-compass2 {
    color: brown;
}
.part_7 .link-compass2:hover {
    font-size: 60px;
    color: rgb(42, 165, 85);
}


/* ! */
/* .part_8 {
    display: none;
} */
/* ✅ - ПРАЦЮЄ */
/*! 8.Іконочний шрифт-2 ​*/ 
/* @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css); */

.part_8 .social-networks {
    display: flex;
    list-style-type: none;
    justify-content: center;
}

.part_8 .social-networks li {
    margin: 0.15em;
    position: relative;
    font-size: 1.2em;
}

.part_8 .social-networks i {
    color: #fff;
    position: absolute;
    /* top: 21px; */
    /* left: 21px; */
    transition: all 0.3s ease-out;
}

.part_8 .social-networks a {
    /* display: inline-block; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.part_8 .social-networks a:before {
    transform: scale(1);
    content: " ";
    width: 60px;
    height: 60px;
    border-radius: 100%;
    display: block;
    background: linear-gradient(45deg, #1441e6, #00ff72);
    transition: all 0.2s ease-out;
}

.part_8 .social-networks a:hover:before {
    /* background: none; */
    transform: scale(0);
    transition: all 0.3s ease-in;
}

.part_8 .social-networks a:hover i {
    transform: scale(1.5);
    color: #1441e6;
    /* background: -webkit-linear-gradient(45deg,  #00ff72, #1441e6); */
    background: none;
    transition: all 0.2s ease-in;
}


/* ! */
/* .part_9 {
    display: none;
} */
/* ✅ - ПРАЦЮЄ */
/* ❌ - НЕ ПРАЦЮЄ */
/*! 9.Іконочний шрифт-3 ​*/
.part_9 .social-networks {
    padding: 16px;
    display: flex;
    gap: 20px;
    outline: 1px dashed orange;
}

.part_9 a {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    outline: 1px dotted pink;
}

.part_9 .icon-home {
    font-size: 40px;
}
.part_9 a:hover .icon-home {
    font-weight: 900;
    color: teal;
}

.part_9 .icon-pencil {
    color: brown;
    font-style: italic;
}
.part_9 a:hover .icon-pencil {
    color: #ffff1b;
    scale: 1.5;
    transform: rotateX(180deg);
}

.part_9 .icon-droplet {
    font-size: 70px;
}
.part_9 a:hover .icon-droplet {
    font-style: italic;
    font-size: 50px;
    text-decoration: none;
    color: rgb(42, 165, 85);
}

.part_9 .icon-music {
    color: green;
    font-weight: 900;
    text-decoration: underline;
}
.part_9 a:hover .icon-music {
    scale: 1.5;
    color: orangered;
    text-decoration: none;
}




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