:root {
    /* *============ ПЕРЕМЕННЫЕ ЦВЕТА body ============ */
    --color-font-body: #ff0000;
    --color-background-body: #00ffff;
    /* *============================================== */
}

/* *,
*::before,
*::after {
    box-sizing: border-box;
} */

/* ?============================================== */
body {
    color: var(--color-font-body);
    background-color: var(--color-background-body);
    font-family: sans-serif;
}
/* ?============================================== */

.text {
    margin: 20px;
    padding: 15px;
    border: 2px dashed #2196F3;
}


/*? box-sizing: content-box | border-box | inherit */
/* ! content-box — дефолтне значення, 
    !   властивості width і height 
    !   задають ширину і висоту 
    !   області вмісту і НЕ включають 
    !   розміри полів (padding), 
    !   меж (border) і відступів (margin). 
*/

.box {
    /* box-sizing: content-box; */
    /* box-sizing: border-box; */
    width: 150px;
    height: 150px;

    /* margin: 40px; */
    /* padding: 30px; */
    /* border: 5px solid #f44336; */
    background-color: #ffeb3b;
    

    /*! margin 
    - контролює зовнішні відступи 
    від рамки для всіх сторін елемента. 
    Результат роботи залежить 
    від кількості значень властивості: 
    */
    /** Однакові відступи по 40px з усіх сторін */
    /* margin: 40px; */
    /** Відступ зверху і знизу по 10px, зліва і справа по 20px */
    /* margin: 10px 20px; */
    /** Відступ зверху 10px, зліва і справа по 20px, знизу 5px */
    /* margin: 10px 20px 5px; */
    /** Відступ зверху 10px, справа 15px, знизу 20px, зліва 25px */
    /* margin: 10px 15px 20px 25px; */
    /*? властивості для встановлення відступів кожної сторони окремо: */
    /* margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 15px;
    margin-left: 30px; */
    /* 
    * Якщо задати автоматичні лівий і правий відступи, 
    * вільний простір розподіляється порівну між ними 
    * і блоковий елемент центрується: 
    */
    /* margin-right: auto; */
    /* margin-left: auto; */
    /** або використовувати збірну властивість margin */
    /* margin: 0 auto; */


    /*! padding 
    - Збірна властивість контролює 
    внутрішні поля між контентом і рамкою 
    для усіх сторін елемента. 
    Результат роботи залежить від кількості значень властивості: 
    */
    /** Однакові поля по 30px з усіх сторін */
    /* padding: 30px; */
    /** Поля зверху і знизу по 10px, зліва і справа по 20px */
    /* padding: 10px 20px; */
    /** Поле зверху 10px, зліва і справа по 20px, знизу 5px */
    /* padding: 10px 20px 5px; */
    /** Поле зверху 10px, справа 15px, знизу 20px, зліва 25px */
    /* padding: 10px 15px 20px 25px; */
    /*? Встановлення полів кожної сторони окремо: */
    /* padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 30px; */


    /*! border  
    - контролює ширину, 
    стиль 
    і колір рамки 
    (межі) елемента: 
    */
    /* border: 5px solid #f44336; */
    /* * Також існують властивості для того, щоб задати ці значення окремо: */
    /* border-width: 5px;
    border-style: solid;
    border-color: #f44336; */
    /** Індивідуальні рамки​ — можна задати індивідуальні стилі рамці з кожної сторони елемента */
    /*? Встановить стилі верхньої рамки */
    /* border-top-width: 3px;
    border-top-style: solid;
    border-top-color: blue; */
    /*? Встановить стилі правої рамки */
    /* border-right-width: 5px;
    border-right-style: dotted;
    border-right-color: black; */
    /*? Встановить стилі нижньої рамки */
    /* border-bottom-width: 7px;
    border-bottom-style: dashed;
    border-bottom-color: palevioletred; */
    /*? Встановить стилі лівої рамки */
    /* border-left-width: 9px;
    border-left-style: dashed;
    border-left-color: green; */
    /** Закруглена рамка​ — для того щоб закруглити всі кути рамки */
    /*? верхній лівий кут */
    /* border-top-left-radius: 15%; */
    /*? верхній правий кут */
    /* border-top-right-radius: 10px; */
    /*? нижній правий кут */
    /* border-bottom-right-radius: 40px; */
    /*? нижній лівий кут */
    /* border-bottom-left-radius: 50%; */
}

.box-1 {
    width: 140px;
    height: 80px;
    border-radius: 10px;
    background-color: #f44336;
}
.box-2 {
    width: 100px;
    height: 100px;
    border-radius: 20%;
    background-color: #2196f3;
}
.box-3 {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #4caf50;
}


.box-parent {
    /* ! */
    /* display: none; */
    padding: 20px;
    /** центрування inline, inline-block */
    /* text-align: center; */
    border: 5px solid blue;
}


.box-inline {
    /* display: block; */
    /* display: inline; */
    /* display: inline-block; */

    width: 120px;
    height: 120px;

    /** центрування block */
    /* margin-left: auto;
    margin-right: auto; */

    /* text-align: center; */

    margin-bottom: 20px;
    
    padding: 10px;
    border: 5px solid #f44336;
    background-color: #4caf50;
}






























.box-4 {
    width: 350px;
    height: 220px;
    /* margin: 0px 0px 30px; */
    margin-bottom: 30px;
    padding: 15px 10px 20px;
    border: 2px dotted red;
    background-color: green;
}