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 ----- */

/*
  Challenge: Write initial nav styles
    1. Center-align the header content
    2. Apply a top margin to the nav element to create space
       between the nav and subheading
    3. Make sure that the center alignment, the nav’s top margin,
       and dotted borders between links display only on viewport widths
       narrower than 768px
*/

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;
}

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

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

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

@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;
    }
}