/* GLOBAL RESET */
/* A good practice to override the default browser behaviour. */
/* Also, don't forget to add pseudo-elements. */
*, *::after, *::before {
    /* Everything would have: */
    /* Border-box */
    box-sizing: border-box;
    /* Nobody wants margin! */
    margin: 0;
    /* Neither padding. */
    padding: 0;
}

/* CSS BOX MODEL */
/* 
    v - Meet the team! - v
    1. The content: Any semantic value.
    2. The padding: Between the content and the border.
    3. The border: Between the padding and the margin.
    4. The margin: Between its box and other boxes.
*/

/* BLOCKS */
h1, p {
    /* `background-color` is for background color. <3 */
    background-color: #dde0e3;
}

/* INLINE */
em, strong {
    /* Those values for the `background-color` are using HEX form. */
    background-color: #b2d6ff;
    /* This is not a good idea, but you can turn their behaviour to `display: block;` */
    /* display: block; */
    /* This is the default property... */
    display: inline;
}

/* Meet the PADDING... */
h1 {
    /* Top, right, bottom, and left 50px of padding. */
    padding: 50px;
}

/* You can also individually set top, right, bottom, and left, properties. */
p {
    /* Also, use different units! */
    /* Using pixels... */
    padding-top: 20px;
    /* Using centimeters! */
    padding-right: 5cm;
    /* Using rem units. */
    padding-bottom: 5rem;
    /* Using em units. */
    padding-left: 2em;
    /* Also, use shorthands for that situation... */
    padding: 20px 5cm 5rem 2em; /* TOP, RIGHT, BOTTOM, LEFT. */
}

/* Let's use another shorthand: */
body p {
    /* This is: TOP/BOTTOM and LEFT/RIGHT */
    padding: 50px 60px;
}

/* END OF THE LINE FOR PADDING */

/* --------------- */
/* Meet the BORDER... */
h1 {
    /* The border is easy and fun! */
    /* First value, is the size of your border. */
    /* Second value, is the style of your border. */
    /* Third value, is the color of your border. */
    border: 1px solid #5d6063;
    /* You could also add individually TOP, RIGHT, BOTTOM, and LEFT. */
    /* In this case, the bottom... */
    border-bottom: 2px dashed #b2d6ff;
}
/* Borders are excellent for debugging your code... The boxes are fun! */

/* END OF THE LINE FOR BORDER */

/* --------------- */
/* Meet the MARGIN... */
p {
    /* Spaces between p boxes with others. */
    /* In this case, space in the bottom. */
    margin-bottom: 50px;
    /* Margin collapse vertically, while padding doesn't... */
}

/* Inline elements... ignore margin top and bottom... */
strong {
    /* This only affects left/right margin. */
    margin: 50px;
}

/* Vertical Margin Collapse */
p {
    /* The biggest one is the winner! */
    /* Here the collapse begins. */
    margin-top: 25px;
    margin-bottom: 50px;
}

/* To prevent vertical margin collapse use an invisible "div" between your elements. */
/* Of course, Flexbox and Grid exists for some reason. XD */
/* We love you, Margin property! */

/* END OF THE LINE FOR MARGIN */

/* --- */
/* GENERIC BOXES STYLES */
div {
    /* Text color. */
    color: #fff;
    /* Background color for the element. */
    background-color: #5995da;
    /* Bold means font weight. Awesome! */
    font-weight: bold;
    /* Our dear padding. 20px everywhere! */
    padding: 20px;
    /* Text align to the center. */
    text-align: center;
    /* 2px size of border, with solid style, and that color... */
    border: 2px solid #5d6063;
    /* BORDER RADIUS! Basically means its rounded 5px your border that prevents being too sharp. */
    border-radius: 5px;
    /* Divs are block-level default. Spans are inline-level. */
}

/* -----.----- */

/* We are gonna use the width and height. They are too useful. */
/* That is what they called it "explicit dimensions" */
div {
    /* WIDTH */
    /* The wide could be 250px */
    width: 200px;
    /* Use the HEIGHT too! */
    /* The higher could be 500px */
    height: 500px;
}

/* [][][][][][]][]][][]][][]][][][][] */
/* CONTENT BOXES vs BORDER BOXES */
/* Everything has the property `box-sizing: content-box;` by default. That means, if you have our div before that one has 200px wide plus left/right padding of 80px in total, plus left/right border of 4px in total.*/
/* The div before has 244px wide... */
/* With the property `box-sizing: border-box;` means that you have 200px wide, 200px will be. The content automatically fit in its box. Easier way and useful. */
div {
    /* By default: */
    /* box-sizing: content-box; */
    /* BORDER BOX IN ACTION! */
    box-sizing: border-box;
    /* Now it has 200px width. */
}

/* <-------------------------------> */
/* ALIGNING BOXES! */
/* You can align to center the inline boxes, but block boxes is another history. */
body {
    /* This doesn't work with block-level at all... */
    /* Also, text-align doesn't like block-level elements. XD */
    /* You need to use auto-margins, float, or flexbox. */
    text-align: center;
}

/* Let's use auto-margins. Float and Flexbox could wait for their moment... */
div {
    /* It should be centered right now. */
    /* Margin Auto it only works when you have an explicit width dimension, or else... you know... */
    /* width: 200px; */
    margin: auto;
}