:root {
    /* *============ CSS-змінні ============ */
    --color-font-body: #7b00ab;
    --color-background-body: #defff5;
}

/* html {
    font-size: 40px;
} */

body {
    padding: 20px;
    font-family: 'Montserrat', serif;
    font-weight: 700;
    /* font-size: 20px; */
    font-size: 32px;
    color: var(--color-font-body);
    background-color: var(--color-background-body);
}

/* *========================================= */

/*! Одиниці вимірювання в CSS: px, %, em, rem */
.parent-list {
    width: 1300px;
    /* height: 600px; */
    display: flex;
    /* outline: 4px double tomato; */
    background-color: rgb(202, 132, 255);
}

.item {
    height: 200px;
    background-color: #ffff9f;
    outline: 2px dashed rgb(24, 0, 179);
}

.item:nth-child(1) {
    width: 400px;
    background-color: #e7ffba;
}

.item:nth-child(2) {
    width: 30%;
    background-color: #faffba;
}

.item:nth-child(3) {
    width: 10em;
    background-color: #ffe3ba;
}

.item:nth-child(4) {
    width: 10rem;
    background-color: #baccff;
}


/*! Приклади одиниць вимірювання */
.text {
    margin-top: 20px;
    font-size: 20px;
    color: blue;
}

strong {
    font-size: 2em;
    /* font-size: 200%; */
    color: red;
}

span {
    font-size: 2rem;
    color: green;
}

/*! Псевдоелементи-2​ */
.text12 {
    margin-top: 20px;
    color: darkred;
}
.sel::selection {
    color: blue;
    background-color: yellow;
}
.fl::first-letter {
    color: red;
    font-size: 40px;
}
.fline::first-line {
    color: blue;
    font-size: 40px;
    font-style: italic;
}


/*! Псевдоелементи-2​ */
.main-item {
    width: 400px;
    /* display: inline-flex; */
        /* display: grid; */
        display: flex;
        /* flex-direction: column; */
        /* align-items: center; */
    /* width: 200px; */
    /* height: 200px; */
    margin-top: 20px;
    margin-left: 200px;
    /* text-align: center; */
    background-color: #baccff;
    outline: 4px double red;
}

.main-item::before {
    /* margin-left: -100px; */
    margin-right: 20px;
    /* display: inline-block; */
    font-size: 20px;
    /* ! */
    /* content: ''; */
    content: '::before';

    width: 100px;
    height: 100px;
    background-color: orange;
    outline: 1px dashed rgb(24, 0, 179);
}

.main-item::after {
    /* margin-left: 200px; */
    margin-left: 20px;
    /* display: inline-block; */
    font-size: 20px;
    /* ! */
    /* content: ''; */
    content: '::after';

    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 208);
    outline: 1px dashed rgb(24, 0, 179);
}


/*! Псевдоелементи​ (приклад) */
.list {
    margin: 20px 0 0 40px;
}

.list-item:not(:last-child) {
    margin-bottom: 5px;
}

.list-link {
    display: inline-flex;
    align-items: center;
    /* color: currentColor; */
    color: inherit;
    /* text-decoration: none; */
    font-size: 32px;
}
.list-link:hover {
    color: #2196f3;
}

.list-link::before,
.list-link::after {
    content: "";
    width: 24px;
    height: 24px;
    background-size: contain;
    background-color: rgb(0, 166, 255);

}

/** Adds and hides eyes icon after the link text */
.list-link::after {
    /* display: none; */
    margin-left: 16px;
    /* background-image: url("https://cdn-icons-png.flaticon.com/512/599/599516.png") */
}

/** Show arrow icon on hover */
.list-link:hover::after {
    display: block;
}

/*!  Властивості фону — background-image */
.hero {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #b1ae00;
    border: 2px solid #fd7e14;
    background-color: #2a2a2a;
    background-image: url(https://cdn.pixabay.com/photo/2020/07/06/01/33/forest-5375005_1280.jpg);
    background-position: center;
}

.hero {
    margin-top: 50px;
}

.hero+.hero {
    margin-top: 10px;
}

h2 {
    color: tomato;
}

.title {
    margin-top: 0;
    /* color: inherit; */
    /* color: currentColor; */
    /* color: initial; */
}

.text2 {
    margin: 0;
    text-transform: uppercase;
}

.hero.no-image {
    background-image: none;
}

.hero.no-bg {
    background-color: initial;
}


/*!  Властивості фону — background-repeat */
.container {
    max-width: 960px;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: auto;
    margin-right: auto;
}

.tile-set {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 40px;
    gap: 30px;
}

.tile {
    position: relative;
    height: 120px;
    flex-basis: calc(100% / 2 - 40px);
    border: 2px dashed #2a2a2a;
    border-radius: 4px;
    background-color: #fff;
    background-image: url("https://cdn0.iconfinder.com/data/icons/essentials-volume-6/128/apple-512.png");
    background-size: 40px;
    /* background-size: cover; */
}

.tile::before {
    position: absolute;
    top: -32px;
    width: 100%;
    content: "";
    font-weight: 700;
    font-size: 20px;
    text-align: center;
}

.repeat {
    background-repeat: repeat;
}
.repeat::before {
    content: "repeat";
}

.repeat-x {
    background-repeat: repeat-x;
}
.repeat-x::before {
    content: "repeat-x";
}

.repeat-y {
    background-repeat: repeat-y;
}
.repeat-y::before {
    content: "repeat-y";
}

.no-repeat {
    background-repeat: no-repeat;
}
.no-repeat::before {
    content: "no-repeat";
    font-family: monospace;
}


/*!  Властивості фону — background-position */
.wrapper {
    width: 400px;
    height: 400px;
    margin: 20px auto;

    background-color: green;
    background-image: url("https://image.ibb.co/n0M0cQ/red90x90.jpg");
    background-repeat: no-repeat;

    /* Поставить фонове зображення у верхній лівий кут */
    /* background-position: left top; */

    /* Поставить фонове зображення у нижній правий кут */
    /* background-position: right bottom; */
    
    /* Поставить фонове зображення по центру */
    /* background-position: center; */

    /* Поставить фонове зображення по центру */
    /* background-position: 50% 50%; */

    /* Поставить фонове зображення 100px від лівого краю і 200px від верху */
    /* background-position: 100px 200px; */

    /* Поставить фонове зображення від меж на 30px справа і 20px знизу */
    /* background-position: right 100px bottom 20px; */
}


/*!  Властивості фону — background-size */
.wrapper2 {
    width: 600px;
    height: 600px;
    margin: 20px auto;
    outline: 2px dotted red;

    background-color: lightgray;
    background-image: url("https://image.ibb.co/mjdbZ5/bg5.jpg");
    background-repeat: no-repeat;
    background-position: center;

    /* Вихідні розміри зображення, значення за замовчуванням */
    background-size: auto auto;

    /* Ширина 200px, висота буде пропорційна */
    background-size: 400px;

    /* Ширина 200px, висота 300px */
    /* background-size: 200px 300px; */

    /* Гарантовано зберігає пропорції зображення */
    /* Зображенню задаються максимально можливі 
        розміри (не більші за оригінал), 
        за яких воно повністю поміщається в елемент. */
    /* background-size: contain; */

    /* Гарантовано зберігає пропорції зображення */
    /* Зображенню задаються максимально можливі 
        розміри (не більші за оригінал), 
        за яких воно повністю поміщається в елемент. */
    /* background-size: cover; */
}


/*!  Властивості фону — background-attachment */
.container2 {
    max-width: 1600px;
    margin: 20px auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-image: url("https://cdn.pixabay.com/photo/2020/10/07/10/51/mountains-5634817_1280.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /*  фон прокручується разом із вмістом. 
        Це значення за замовчуванням  */
    /* background-attachment: scroll; */

    /*  фон НЕ прокручується, зафіксований на місці  */
    /* background-attachment: fixed; */
}

.box {
    height: 300px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
}
.box:nth-child(1) {
    background-color: #2196f3;
}
.box:nth-child(2) {
    background-color: #4caf50;
}
.box:nth-child(3) {
    background-color: #ff9800;
}
.box:nth-child(4) {
    background-color: #e91e63;
}


/*!  Властивості фону — Багатошаровий фон */
.canvas {
    max-width: 1000px;
    height: 400px;
    margin-top: 20px;

    background-image: 
        url("https://cdn-icons-png.flaticon.com/512/361/361678.png"),
        url("https://cdn-icons-png.flaticon.com/512/4206/4206277.png"),
        url("https://cdn-icons-png.flaticon.com/512/814/814513.png"), 
        url('https://stickerswiki.ams3.cdn.digitaloceanspaces.com/Pig_Valera/223715.512.webp'),
        url("https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_1280.jpg");

    background-repeat: 
        no-repeat;

    background-size: 
        80px, 
        100px, 
        150px, 
        130px, 
        cover;

    background-position: 
        top 120px right 130px, 
        top 270px left 130px, 
        center, 
        100px 60px,
        center;
}

/*! Властивості фону — Збірна властивість */
.wrapper3 {
    width: 400px;
    height: 400px;
    margin: 20px auto;

    /*? Окремі властивісті */
    background-color: green;
    background-image: url("https://cdn0.iconfinder.com/data/icons/essentials-volume-6/128/apple-512.png");
    background-repeat: no-repeat;
    background-position: 100px 200px;
    background-size: 80px;
    background-attachment: scroll;

    /*? Збірна властивість */
    /* background:
        green 
        url("https://cdn0.iconfinder.com/data/icons/essentials-volume-6/128/apple-512.png") 
        no-repeat 
        100px 200px/80px 
        scroll; */
}
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* todo */
/* * ----------------------------------------------- */
/*todo  Властивості фону — Багатошаровий фон (hw-16_1) */
.bg-box {
    /* width: 1200px; */
    /* height: 675px; */
    width: 50vw;
    height: calc(50vw*9/16);
    margin: 20px auto;

    /** background-властивості */
    background-color: green;

    background-image:
        /*? lamp */
        /* url("../images/lamp.png"), */
        url("https://www.freeiconspng.com/uploads/lamp-png-0.png"),
        /*? green-grass */
        /* url("../images/green-grass.png"), */
        url("https://www.freeiconspng.com/uploads/grass-png-images-pictures-transparent-28.png"),
        /*? cupcake */
        url("../images/cupcake.png"),
        /* url("https://avatanplus.com/files/resources/mid/58eb07b830eab15b56162788.png"), */
        /*? hedgehog */
        url("../images/hedgehog.webp"),
        /* url("https://vignette.wikia.nocookie.net/mashaandthebear/images/e/e0/%D0%81%D0%B6%D0%B8%D0%BA.png/revision/latest?cb=20180209130328&path-prefix=ru"), */
        /*? landscape */
        url("../images/landscape.webp");
        /* url("https://img.goodfon.ru/wallpaper/big/0/5b/pole-zelen-trava-dom-derevya.webp"); */

    background-repeat:
        /*? lamp */
        repeat-x,
        /*? green-grass */
        repeat-x,
        /*? cupcake */
        repeat-y,
        /*? hedgehog */
        repeat-y,
        /*? landscape */
        no-repeat;

    background-size:
        /*? lamp */
        /* 4%, */
        calc(100% / 25),
        /*? green-grass */
        /* 22.22%, */
        calc(100% / 4.5),
        /*? cupcake */
        /* auto 5%,  */
        auto calc(100% / 20),
        /*? hedgehog */
        /* auto 4%,  */
        auto calc(100% / 25),
        /*? landscape */
        /* cover; */
        /* contain; */
        auto;

    background-position:
        /*? lamp */
        left top,
        /*? green-grass */ 
        left bottom,
        /*? cupcake */
        right top,
        /*? hedgehog */ 
        left top,
        /*? landscape */
        center;
}