body {
    color: #2b283a;
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

/* ----- TYPOGRAPHY ----- */

h1, 
h3 {
    margin: 0;
}

h1 {
    color: whitesmoke;
    font-size: 1.75rem;
}

h2 {
    color: #451c7a;
    font-size: 1.375rem;
    margin-top: 0;
}

h3 {
    font-size: 1.25rem;
}

p {
    line-height: 1.5;
}

.subheading {
    display: block;
    font-size: 1rem;
    color: #d0aaff;
}

.section-two h2 {
    color: inherit;
}

/* ----- LINKS ----- */

a {
    color: #ef5839;
    text-decoration: underline dotted; 
}

a:hover, 
a:active {
    color: #d4b44c;
}

.btn {
    font-size: 1.125rem;
    text-align: center;
    font-weight: 500;
    text-decoration: none;
    display: block;
    padding: 0.5em 1em;
    margin-bottom: 1em;
    border-radius: 4.6px;
}

.btn-dark {
    color: whitesmoke;
    background: #5f29a3;
}

.btn-mid {
    color: #5f29a3; 
    background: #f0e0ff; 
}

.btn-light {
    color: #5f29a3; 
    background: whitesmoke;
}

.btn:hover, 
.btn:active {
    color: #2b238a;
    background-color: #f3e885;
}

/* ----- LAYOUT ----- */

header, 
section, 
footer {
    padding: 1.25em 0;
}

header, 
.section-two {
    background-color: #5f29a3;
}

.section-two {
    color: whitesmoke;
}

.container {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
}

.main-image {
    width: 100%;
    display: block;
    max-width: 640px;
    margin: 0 auto 2em;
}

.feature-image {
    width: 100%;
    border-radius: 4.6px;
    margin-bottom: 1em;
}

footer {
    text-align: center;
    color: #5f29a3;
}

/* ----- NAVIGATION ----- */

nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1.125rem;
    padding: 0.85em 0;
    display: block;
}

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

/* ----- MEDIA QUERIES ----- */

@media (min-width: 480px) {
    .section-two-image-container {
        display: flex;
        justify-content: space-between;
    }
    
    .feature-image {
        width: 48.8%;        
    }
}

@media (max-width: 767px) {
    header {
        text-align: center;
    }

    nav {
        margin-top: 1.5em;
    }  

    li:not(:last-child) {
        border-bottom: 1px dotted #a190b6;
    }  
}

/*
  Challenge: Navigation styles for wider screens
    1. Use flexbox to display the navigation horizontally
       on one row when the screen is 768px or wider
    2. Align the nav with the right edge of its container
    3. Apply space between each link with a margin
    4. On wider screens, all of the content inside the header
       should be vertically centered
*/

@media (min-width: 768px) {
    header,
    section,
    footer {
        padding: 2.875em 0;        
    }
    
    .btn {
        display: inline-block;
        margin-right: 0.5em;
    }
    
    h1 {
        font-size: 2.25rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    .subheading {
        font-size: 1.25rem;
    }
    
    p {
        font-size: 1.125rem;
    }
}