:root {
    --color-green: hsl(147, 50%, 47%);
    --color-dark-green: hsl(147, 74%, 31%);
    --color-purple: hsl(248, 53%, 58%);
    --color-dark-purple: hsl(248, 64%, 20%);
    --color-grey: rgb(187, 183, 183);
    --color-dark-grey: #666;
    --color-white: #ffffff;
    --color-black: #000;
}

body {
    background-color: #EFEFEF;
    margin: 0;
    padding: 0 1rem;
    font-family: 'Open Sans', sans-serif;
}


h1 {
    color: var(--color-green);
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
}
h2 {
    margin-bottom: 3rem;
    margin-top: 1.25rem;
    font-size: 2.25rem;
    text-align: center;
    text-transform: uppercase;
}
h3 {
    color: var(--color-purple);
}

hr {
border: 1px solid var(--color-green);
}

.main-separator {
max-width: 30%;
margin-bottom: 0;
border: 0.2rem solid var(--color-purple);
}

.subheadline {
    display: block;
    font-size: 0.8em;
    margin-top: 0.125em;
    color: var(--color-dark-grey);
}

p {
    line-height: 1.5;
}

a {
    color: var(--color-purple);
}

a:visited {
    color: var(--color-dark-purple);
}

a:hover {
    color: var(--color-green);
}

ul {
    margin: 0;
    line-height: 1.25;
}

li {
    list-style: square;
}

ul.navigation-list {
    margin: 0;
    padding: 0;
}

ul.navigation-list li {
    display: inline-block;
    list-style-type: none;
    margin: 0;
}

ul.navigation-list li a {
    display: block;
    padding: 0.4rem;
    color: var(--color-black);
    text-decoration: none;
    background-color: var(--color-green);
}

ul.navigation-list li a.active {
    background-color: var(--color-purple);
    color: var(--color-grey);
}

ul.navigation-list li a:hover:not(.active) {
    background-color: var(--color-dark-green);
    color: var(--color-white);
}

.accordion {
    
}

ul.chapter-list {
    display: inline;
    margin: 0;
    padding: 1rem;
    width: 0.8rem;
}

ul.chapter-list li {
    list-style: decimal-leading-zero;
    list-style-position: inside;
}

ul.link-list {
    margin: 0;
    padding: 1rem;
}

ul.link-list li {
    list-style: disc;
}

.project {
    margin-bottom: 3rem;
}

article, footer {
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
}
article, footer.caption {
    text-align: left;
    margin-top: 0em;
}

iframe {
    border: none;
}

footer {
    text-align: center;
    font-style: italic;
    font-size: 0.8rem;
    padding-bottom: 3rem;
}

figure figcaption {
    font-style: italic;
    margin-top: 0.5em;
    text-align: right;
}
figure img {
    width: 100%;
    height: auto;
    display: block;
}


blockquote {
    line-height: 1.5;
    font-style: italic;
    margin: 0;
}