/* WE ARE GONNA USE FLEXBOX! */
/* Flexbox is an alternative of Float, and it's awesome! */
/* Flexbox gives us full control over our boxes, and Float doesn't do at all... */
/* Alignment, direction, size, order. That is Flexbox thoughts. */
/* Float is great... but later on... */
/* Float is good with magazine-style layout. */
/* However, Flexbox is great with overall page structure. */

/* Flexbox uses two types of boxes... */
/* Flex-container: Determine the layout, most for the part. */
/* Flex-item: Direct child of a flex-container... */

/* FLEX CONTAINERS */
/* NOTE: Learning about CSS Box Model is required. It's important to note that. */
/* Display property has a `flex` container. It's kinda block-level. */

/* CROSS-AXIS Vertical alignment. */
/* Float... you don't have a correct vertical alignment... */
/* Flex-items could be align with `align-items` property. */
/* Flex-container has the align-items property by itself. */
/* You have: flex-start, flex-end, center, baseline, and stretch. */

/* WRAPPING YOUR FLEX ITEMS! */
/* By default, Flexbox doesn't wrap your items. You can change it if you want to. */
/* We need to use `flex-wrap: wrap;` for this moment... */

/* FLEX CONTAINER DIRECTION! */
/* Yeah, not only horizontal is king, also vertical is queen. */
/* NOTE: Flexbox only knows one thing at time, or use vertical or use horizontal. No both. */
/* By default, Flexbox has this property: `flex-direction: row;`. */
/* You could change the "basis" to `flex-direction: column;`. */
/* Float could do better? Nope. It loves horizontally things and old-time stuff... */
/* Responsive web design also like this. Using one line of CSS to making horizontally or vertically layouts. */

/* Alignment considerations: */
/* When you have `flex-direction: row;` you got left/right justify-content and top/bottom align-items. */
/* But when you have `flex-direction: column;` you got left/right align-items and top/bottom justify-content. */
/* Crazy, uh? */

/* FLEX CONTAINER ORDER! */
/* You got `flex-direction` property with two different values: */
/* Row and Column... */
/* You have in your toolbox automatically: */
/* row-reverse, and column-reverse */
/* Of course, it's purely presentational. Separate the content from the style. */

/* FLEX ITEM ORDER */
/* You could move each individual flex-item instead from the flex-container. */
/* `flex-direction` for example moves whole container with its flex-items. */
/* `order` however moves only an individual flex-item as you like. */
/* Order is special, you could move items without affecting the layout in the parent. */
/* By default, `order` value is set to 0... */

/* FLEX ITEM ALIGNMENT */
/* Using the property `align-self` overrides the `align-items` from the parent container. */
/* With that property I mentioned before (`align-self`) you could move individually items vertically. */
/* The values you could use are those: */
/* center, flex-start, flex-end, stretch, baseline. */

/* FLEXIBLE ITEMS */
/* By default, the fixed width of "flexible" boxes are content-based. Now, let's try to do more "flex" than before. */
/* The property `flex` defines the width of individual items in a flex container. Allow them to have flexible widths. */
/* It tells how to distribute each individual flex-item in their container. */
/* By default, the value of `flex` is "1". */
/* You can add more width twice as the default value, for example set `flex` value to "2". */

/* STATIC ITEMS WIDTHS */
/* We can mix fixed-widths boxes in complex ways. Use `initial` value for the `flex` property. */
/* This is a pretty common layout using fixed-widths in a flex-item. */

/* AUTO-MARGINS IN FLEX! */
/* Auto-margins are special in flexbox. They are a kind of divider for flex-items. */
/* Auto-margins eat all the extra space of a flex-container and you don't need extra `div` for that purpose. */
/* I will try to show an example later on. */

/* RESET STYLES! */

/* Universal selector, with its pseudo-elements. */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* I don't want any padding and margin in my tests. */
}

/* Using our body for fonts! */
body {
    /* Roboto fonts. */
    font-family: Roboto, sans-serif;
}

/* Testing */
.box {
    /* Use only `background` property to add more style! */
    /* I used the `linear-gradient` function value! */
    /* This one (the gradient) takes two or more colors. */
    background: linear-gradient(red, blue);
    border: 2px solid burlywood;
    height: 150px;
    /* The padding affects 20px left/right, nothing in top/right. */
    padding: 0 20px;
    width: 250px;
}

/* Main container in action */
.container {
    /* Alignment horizontally with align-items, once you got column flex... */
    align-items: center;
    /* Background below! */
    background-color: #e94c4c;
    /* Display: Flex. */
    /* Flexbox layout is enabled. */
    /* We could combine it with other layouts! */
    display: flex;
    /* Aligning items, all of them from here. */
    /* Now we got attention with column! */
    /* Our container should have this column in the first place. */
    flex-direction: column;
    /* This is new, but don't use it for now. */
    /* flex-direction: column-reverse; */
    /* Now your container is wrapping... */
    flex-wrap: wrap;
    /* We want to center all our items. Use `justify-content`. */
    /* We got more values for the justify-content. Probably others use those values too! */
    /* flex-start, flex-end, center, space-between, space-around, and space-evenly */
    justify-content: center;
    /* Once it's column our .container, justify-content aligns its items vertically. XD */
    /* ------ */
    /* We want some padding... */
    padding: 20px;
}

/* HEADER */
.header {
    /* Use `align-items` set to center. */
    align-items: center;
    /* Customize the background-color: */
    background-color: #af5719;
    /* And border-radius is incoming! */
    border-radius: 5px;
    /* Let's try to use flex container here. */
    display: flex;
    /* Let's try using flex-wrap value set to wrap. */
    flex-wrap: wrap;
    /* Distribute the items around the flex container. */
    justify-content: space-between;
    /* Use padding for more space. */
    /* The padding is more or less space between your content and border. */
    padding: 5px;
    /* Please, take this medkit... */
    width: 97%;
}

/* NAV */
/* Our `ul` element must have display: flex; */
.nav ul {
    /* Our flex container. */
    display: flex;
    flex-wrap: wrap;
    /* Let's try with space-aroun' */
    /* We don't need it. The container is small enough. */
    /* justify-content: space-around; */
    /* Use gap instead of Margin... */
    gap: 25px;
    /* Margin is normal in Flexbox as usual. */
    /* However, auto-margins has special meaning in Flexbox. */
    /* margin: 0 5px; */
}

/* Styling the nav and its contents... */
.nav ul li {
    /* Don't want any disc or dots... */
    list-style-type: none;
}
/* Style those anchors! Make them like actually buttons */
.nav ul li a {
    /* Appropriate color for the background. */
    color: rgb(250, 250, 250);
    /* Totally random those colors. */
    background-color: rgb(181, 63, 42);
    /* Let's add a border too! */
    /* The border isn't it curved at all. */
    /* And! We could use `box-shadow` property. */
    border: 2px solid rgb(155, 55, 35);
    border-radius: 5px;
    box-shadow: 2px 2px rgb(155, 55, 35);
    /* By default, a elements are inline-level */
    display: block;
    /* Font-size is required here. */
    font-size: 1.5em;
    /* We need some spacing here... */
    margin: 5px 0;
    /* And the padding has been changed. */
    padding: 10px 15px;
    /* We need to cut off that underline decoration. */
    text-decoration: none;
    /* For now, let's try with this `text-align` set to center. */
    text-align: center;
    /* This is an relative unit. Percentage. */
    /* We don't need the WIDTH. */
    /* width: 30%; */
}

.nav ul li a:hover {
    /* This is a trick... do the opposite! */
    background-color: rgb(250, 250, 250);
    /* Let's add border here. */
    border: 2px inset rgb(181, 63, 42);
    color: rgb(181, 63, 42);
    /* Use the `cursor` set to pointer. */
    cursor: pointer;
}

.nav ul li a:active {
    /* When the user clicks on it. */
    border: 2px outset rgb(181, 63, 42);
}

/* Let's add some style to the logo image. */
.image-logo {
    /* Let's use some ALPHA style. Like, RGBA. */
    background-color: rgba(155, 55, 35, 0.1);
    /* Remember, the IMG is inline-level by default. */
    display: block;
    /* Set the height always in auto, unless your browser want to do whatever it wants. */
    height: auto;
    /* I want to make the logo more wider! */
    width: 250px;
}

/* Main content with its sections and articles... */
.content {
    background: linear-gradient(#e94c4c, rgb(181, 63, 42));
    /* When you don't have anything in your divs, you could use `width` anyway. */
    /* Also, let's use less width because it's too wide with the previous value. */
    width: 30%;
}

/* Now, let's try to add some width and heigh to those boxes. */
.box-content {
    color: #fffaaa;
    font-size: 10em;
    height: 350px;
    width: 100%;
}

/* Each box will content different background-color. */
.box-content1 {
    background-color: hsl(350, 47%, 41%);
}

.box-content2 {
    background-color: hsl(350, 39%, 47%);
}

.box-content3 {
    background-color: rebeccapurple;
}

.box-content4 {
    background-color: #af5719;
}

/* Except you... you will have some different colors... */
.box-content5 {
    color: black;
    background-color: antiquewhite;
}

.box-content6 {
    background-color: rgb(139, 129, 112);
}
/* END OF BOX-CONTENT STYLE. */

/* Now, the footer. */
.footer {
    /* align-items is different than align-self. */
    align-items: center;
    /* Let's use `align-self` here! */
    align-self: flex-end;
    /* You should have this background-color, pal. */
    background-color: rgb(84, 46, 60);
    /* Use the display set to flex here. */
    display: flex;
    /* Justify content uses the main-axis for its purposes. */
    justify-content: space-around;
    /* Let's put some margin between boxes! */
    margin: 20px 0;
    /* Adding more width, please. */
    width: 100%;
}

.box-footer {
    /* Remember that align-items are set to center. */
    align-items: center;
    /* Let's flex you! */
    display: flex;
    /* Let's wrap some items... */
    flex-wrap: wrap;
    /* The "gap" is useful, and modern browsers support it. */
    gap: 25px;
    /* Let's add some width and height. */
    /* Let's drop away that height. */
    /* height: 300px; */
    /* Justify content in action! */
    justify-content: center;
    /* It's the width... */
    width: 30%;
}

/* Suppose we want this rule to stretch twice... Use `flex` property value set to "2". */
.box-footer--large {
    /* Let's use the `flex` property! */
    /* This is a shorthand. It contains "flex-basis", "flex-shrink", and "flex-grow". */
    /* flex: 2; */
    /* The the `flex` property, with its value set to `initial`. */
    flex: initial;
    /* And add some padding... */
    padding: 25px;
    /* With a width. */
    width: 200px;
}

/* Adding a return button to the top. */
.button-footer {
    /* Some background and border radius, and box shadow of course. */
    background-color:hsl(350, 39%, 47%);
    border-radius: 50px;
    /* You could add color in your box-shadow. */
    box-shadow: 3px 3px rgb(139, 129, 112);
    color: white;
    /* Remember that the anchor element is inline-level by default... */
    display: block;
    font-size: 3em;
    /* Inside of our arrow-return (`a` element) it's like a text. */
    /* Use `text-align: center`! */
    text-align: center;
    /* Remove that underline over there! */
    text-decoration: none;
    /* Let's use a small width over there. */
    width: 150px;
}

/* Hover is my favorite pseudo-class. */
.button-footer:hover {
    color: rgb(0, 0, 0);
    background-color: hsl(350, 44%, 81%);
}

/* Trying to make a button without reference. */
.button-footer:active {
    box-shadow: -3px 3px rgb(139, 129, 112);
}

/* ASIDE MOMENT! */
/* Aside container: */
.aside {
    /* And, of course, `align-items`... */
    align-items: flex-end;
    /* Background color is important to notice that we need it... */
    background-color: #af5719;
    /* Display... Flex! */
    display: flex;
    /* We need to change that direction to column, the main-axis now is "column"... */
    flex-direction: column;
    /* Wrapping the content for some reason. */
    flex-wrap: wrap;
    /* Let's align the content with `justify-content`. */
    /* You don't need this property below me, because magic margin does the job for me. */
    /* justify-content: space-evenly; */
    /* Try it with gap: */
    gap: 10px;
    /* Let's add some extra height here. */
    height: 350px;
    /* Trying to use margin, but not the magic friendly flexible auto-margin, not just yet... */
    margin-top: 20px;
    /* Let's use some padding here, just because! */
    padding: 25px;
    /* Trying using a width here too! 100% made by width. */
    width: 50%;
}

/* Let's make more flexbox here with .aside div content! */
.aside div {
    /* Center to center. */
    align-items: center;
    /* This background is new. */
    background-color: #701f1f;
    /* A custom border without reason... */
    border: 3px solid #fffaaa;
    /* Color white, white! */
    color: #fff;
    /* Flex, flex, flex! */
    display: flex;
    /* Let's make the text more readable. */
    font-weight: bold;
    /* Trying using flex-basis, flex-grow, and flex-shrink. */
    /* Better not... */
    /* flex-basis: 100%; */
    /* Center to center! */
    justify-content: center;
    /* Always use gap, now. */
    gap: 5px;
}

.aside div:hover {
    background-color: #901f1f;
    cursor: pointer;
}

.aside div:active {
    background-color: #fff;
    color: #701f1f;
}

/* Select .aside only direct children. */
.aside > * {
    /* Size of these boxes are fixed with absolute units. */
    /* Some height: */
    height: 50px;
    /* Some width here: */
    width: 250px;
}

/* Let's try to use our magical auto-margin in one of the flex-items: */
/* The unknown date... */
.date {
    /* It will eat all of its space from top of it. Very cool, huh? */
    margin-top: auto;
}

/* SUMMARY... */
/* Flexbox is incredible and you could do everything with it. Of course, you just have one type: Row or Column. */
/* No matter! It's incredible and I invite you to play with it around. */