:root {

    --black: #021113;

    --white: #f8f7f9;

    --primary: #f18701;

    --accent: #3f8d85;

    --secondary: #077187;

}



body {

    font-family: 'Noto Sans', sans-serif;

    font-weight: 350;

    color: var(--black);

    background: var(--white);

}



header {

    width: 90vw;

    margin: auto;

}



nav ul {

    list-style-type: none;

    padding: 0;

    margin: 0 auto;

}



nav ul li { text-align: center;}



nav ul li a { 

    display: block;

    padding: .5rem 0;

    max-width: 900px;

    margin: auto;



    text-decoration: none;

    font-weight: 600;

    color: var(--white);

    background: var(--secondary);

}



nav ul li a:hover { background: var(--accent);}



main {

    width: 66vw;

    max-width: 900px;

    margin: auto;

    margin-bottom: 10rem;

}



h1, h2, h3, h4, h5, h6 {

    font-family: 'DM Serif Text', serif;

    font-weight: 550;

}



h1 {

    font-size: 3rem;

    text-align: center;

    margin: 5rem;

    padding: 1rem;

    color: var(--white);

    background: #F18701;
    background: radial-gradient(circle, rgba(241, 135, 1, 1) 50%, rgba(248, 247, 249, 1) 100%);

}



h2 {

    font-size: 2rem;

    margin-top: 4rem;

    color: var(--secondary)

}



p {

    font-size: 1rem;

    line-height: 1.5em;

}



img {

    max-width: 100%;

    height: auto;

    margin: auto;
    margin-bottom: 3rem;;
    display:block;
}

.background-image {
    background-image: url(images/followingDirections.jpg);
    background-size: cover;
    background-color: rgba(1, 1, 1, .75);
    background-blend-mode: overlay;
    color: var(--white);
    padding: 2rem;

}

footer {

    text-align: center;

    margin: 10rem;

    color: var(--white);

    background: #077187;
    background: linear-gradient(90deg, rgba(7, 113, 135, 1) 0%, rgba(63, 141, 133, 1) 50%);

}

@media only screen and (min-width: 600px) {

main { 
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

article {width:30%;}

nav ul {display: flex;}

nav ul li {
    flex:1;
    border-right: 3px solid var(--accent);
}

li:last-of-type { border: none;}

}

@media only screen and (max-width: 600px) {

h1 {margin: 0;}

}