/* Basic Resets */

/* this is helpful for understanding how much
room different elements are taking up, but not
strictly necessary for this design */
* { box-sizing: border-box; }

h1, h2, h3, p, nav ul {
    margin: 0;
    padding: 0;
}

nav ul { list-style-type: none; }

a { text-decoration: none; }

img { 
    display: block;
    max-width: 100%;
}

/* Mobile First Styles */

body {
    font-family: 'Akshar', sans-serif;
    font-weight: 300;
    color: #333;
}

h1, h2, h3 { 
    font-weight: 600;
    margin-bottom: .5em;
}

p {
    margin-bottom: 1em;
    line-height: 1.4em;
}

.wrap {
    padding:0 20px;
}

/* Keeps all the content from becoming wider than 1200px */
header, section, main, footer {
    max-width: 1200px;
    margin: auto;
}

/* Header section */

/* could be just .header, but I don't want to confuse
the .header class from the header tag. div.header means
the div with the class set to header. */
div.header {
    background-color:darkslategray;
}

header {
    background-image: url(https://picsum.photos/500/150);
    background-size: cover;
    aspect-ratio: 5 / 2;
    
    display: flex;
    flex-direction: column-reverse;
    justify-content: start;
}

header h1 {
    padding: 15px;
    background-color: rgba(48, 83, 83, 0.7);
    color: #e9e9e9;
    border-radius: 5px;

    margin: auto;
}

header nav ul {
    display: flex;
    place-content: center;

    background-color: #507373;
    padding: 10px 0;
}

nav ul li a {
    color: #e9e9e9;
    font-weight: 600;
    padding: 0 10px;
    font-size: 1.2em;
    border-right: 1px solid #fff;
}

nav ul li:last-of-type a {
    border: none;
}

/* Top Section */

div.top {
    background-color: cornsilk;
}

.top section {
    background-color: #e9deb4;
    padding-top: 20px;
    text-align: center;
}

/* Challenge 3 */
.top section ol {
    padding: 0;
    margin-bottom: 0;
    list-style-type: none;
    
    display: flex;
}

.top section ol li{
    flex: 1;
}

.top section ol li a {
    display: block;
    aspect-ratio: 1 / 1;
    
    display: flex;
    flex-direction: column;
    place-content: center;
}

/* Setting the background color of each of
the anchor tags inside each sibling list item.
You could also add a class to each anchor tag 
and target them that way. */
.top section ol li:nth-child(1) a {
    background-color: #d3e3ff;
}

.top section ol li:nth-child(2) a {
    background-color: #feffd3;
}

.top section ol li:nth-child(3) a {
    background-color: #e8ffd3;
}

.top section ol li a {
    color: darkslategray;
    font-weight: 600;
}

.top section ol li a p:first-of-type {
    font-size: 1.7em;
    margin-bottom: 0.2em;
}

/* main section */

div.main {
    background-color: #a0630f;

    display: flex;
}
/* Challenge 4 */
/* Challenge 4a: The main part of the page needs
to be flexible. By working with the
flexbox rules, you can minimize the
number of media queries you need.
What rule do you need to add here that
will make this possible. I used two 
declarations in this rule. */

.main article {
    background-color: #fff9f1;
    padding: 20px;
    
    flex: 3 2 350px;
}

.main aside {
    background-color: #fde2bf;
    padding: 20px;
    
    flex: 2 1 200px;
}

.main aside h3 {
    text-align: center;
    margin-bottom: 20px;
}

.main aside img {
    border-radius: 5px;
    margin: 0 auto 20px auto;
}

.main .adverts {
    background-color: #6e4205;
    padding: 20px;

    flex: 1 0 200px;

    /* Challenge 5 */
    /* This element also needs to display as a flexbox
    so that it's children become flex items. It will
    need to wrap and have a gap of 20px between
    elements and center the content on the main
    axis. You will need four declarations to do all this. */

    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.adverts div {
    width: 150px;
    background-color: #e9e9e9;
    aspect-ratio: 1 / 1;
    line-height: 150px;
    text-align: center;
}

/* Footer Section */

div.footer {
    background-color:darkslategray;
    padding: 0 20px;
}

.footer footer {
    padding: 40px 0;
    background-color: rgb(72, 89, 114);
    color: #fff;
    text-align: center;
}

@media only screen and (min-width: 790px) {
    header {
        flex-direction: column;
        
        background-image: url(https://picsum.photos/1000/300);
    }

    .top section ol {
        gap: 20px;
        padding: 0 20px 20px 20px;
        max-width: 750px;
        margin: auto;
    }

    .top section ol li a {
        border-radius: 5px;
    }
    
    /* Challenge 6a */
    /* What rule do you need to add to set the
    desired minimum width of the article inside 
    the main element to 500px? This rule just 
    needs one declaration. */
    
    /* Challenge 6b */
    /* What three rules do you need to add to
    change the order of the article, aside and 
    .adverts elements inside the main element? 
    You want the aside to display on the left, 
    the article in the middle and the .adverts
    on the right. Each of these rules just have
    one short declaration. */
}