/* this makes all elements include the padding and borders in the width */
* { box-sizing: border-box; }

body {
    font-family: 'Source Serif Pro', serif;
    color:#434343;
    padding-top: 20px;
    
}

nav, header, main, #testimonials, #page-footer {
    width: 1200px;
    margin: auto;
    display: flex;
}

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

/************ Typography rules ************/
h1, h2, h3 {
    font-family: 'Inspiration', cursive;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-bottom: .5em;
    text-transform: capitalize;
}

h2 { font-size: 4em; text-align: center; }
h3 { font-size: 3em; }
p { line-height: 1.5rem;}
a {
    text-decoration: none;
    font-weight: 700;
    color:cornflowerblue;
}

/************ Navigation rules ************/

/* What needs to be added to the navigation to get it to display
like the image of final version? */

nav {
    padding-left: 300px;
   
}

nav ul {
    width: 900px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
   
}

/* The width of these elements should be 100/6, which is 16.6666% 
minus half of the gap. */
nav ul li {
    
    width: 16.6666%;
    gap: 33.33px;
    
    
    

}

nav ul li a {
    display: block;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 15px 0;
    text-align: center;
    color:white;
    background: #6c0e0e;
    border-radius: 5px 5px 0 0;
    
    
   
}

/************ Header rules ************/
/* You need only one additional declaration for the header
to get it to display properly */
header {
    background-color:brown;
}
header h1 {
    width: 25%;
    text-align: center;
    line-height: 300px;
    font-size: 4em;
    margin: 0;
    padding: 0;
    color: #fff;
    
}

/************ Main rules ************/

main { 
    display: flex;
    
 }

aside {
    width: 25%;
    border-top: 20px solid #8a1a1a;
    background: #6c0e0e;
    color: #fff;
    padding: 15px;
}

aside h2, aside h3, #testimonials h2 {
    color:#fffeea;
}

main section {
    width: 50%;
    padding: 20px;
    border-top: 20px solid #c3c39e;
    background-color: #fcfcf2;
}

main section article {
    /* You need three declarations in here to get this
    to display properly. What do you need to do
    to keep the images from stretching? */
    display: flex;
    gap: 30px;
    align-items:flex-start;
}


/************ Form rules ************/
main form {
    width: 25%;
    border-top: 20px solid #75470b;
    background: #977446;
    color: #fff;
    padding: 15px;
}

label, input, button {
    display: block;
}

label {
    margin-bottom: .5em;
}

input, textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #ccc;
    margin-bottom: 1em;
}

button {
    padding: 10px;
    background-color: #8a1a1a;
    color: #fff;
    border-radius: 10px;
    border: 2px solid #510df1;
    width: 100%;
}

/************ Other Sections rules ************/

#testimonials {
    border-top: 20px solid #c3c39e;
    background: #8f8f57;
    padding: 30px;
   
    
    
    
   
   
   
}

.container { 
   
    display: flex;
    justify-content:center;
    align-items: center;
   
   
   
}

blockquote {
    margin: 0;
    line-height: 1.5em;
    color: #fff;
    text-indent: -.5em;
    width: 25%;
    
   
    
    /* Set the width to 1/4 of the space using percentage */
}

#page-footer {
    background-color: #60602f;
    color: #fff;
    text-align: center;
    padding: 40px 0;
    display: flex;
    justify-content: center;
}