@import url('https://fonts.googleapis.com/css?family=Black+Ops+One|Merriweather:400,400i,700,900|Raleway:400,700,900&display=swap');

/* Text-Color (purple): rgba(57, 34, 113, 1), #392271 */
/* Background (green): rgba(143, 247, 35, 1), #8FF723 */
/* Text-Color (blue): rgba(60, 102, 181, 1), #3C66B5 */
/* Background (white): rgba(252, 250, 243, 1), #FCFAF3 */

/* Root Elements */
html {
    font-family: 'Merriweather', serif;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
header {
    min-height: 4.5rem;
    background-color: rgba(57, 34, 113, 1);
    display: flex;
}
header.home-page {
    min-height: 70vh;
    flex-direction: column;
    background-image: url('../assets/images/lonely_tree.jpg');
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
main {
    background-color: rgba(252, 250, 243, 1);
    color: rgba(60, 102, 181, 1);
    padding-bottom: 3rem;
    flex-grow: 1;
}
footer {
    color: rgba(252, 250, 243, 1);
    background-color: rgba(60, 102, 181, 1);
    flex-shrink: 0;
}
section {
    margin: 0 1rem;
}

/* Header Elements */
h1, em {
    font-family: 'Black Ops One', cursive;
    font-weight: 400;
}
h2,h3,h4,h5,h6 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}
h1, h2, h3 {
    text-align: center;
}
header h1 {
    font-size: 45vw;
    color: rgba(143, 247, 35, 1);
}
h2 {
    font-size: 3rem;
    line-height: 1.5;
}
h3 {
    font-size: 2rem;
    line-height: 1.5;
}

/* Navigation Elements */
header nav {
    display: none;
    position: fixed;
    width: 100%;
    flex-direction: column;
    background-color: rgba(143, 247, 35, 1);
}
header object {
    max-height: 6em;
    justify-self: flex-start;
    margin: 0.25em auto 0 0.25em;
}
header a {
    padding: 1rem;
    color: rgba(57, 34, 113, 1);
    border-bottom: dotted rgba(57, 34, 113, 1);
}
header a:first-of-type {
    padding: 0.25rem 0.5rem 0 0;
    align-self: flex-end;
    font-size: 2rem;
    border: none;
    position: fixed;
}
header a:last-of-type {
    border-bottom: none;
}
header > a:first-of-type {
    position: relative;
    padding: 1rem 2rem;
    font-size: 1rem;
    background-color: rgba(57, 34, 113, 1);
    color: rgba(143, 247, 35, 1);
    border: solid rgba(143, 247, 35, 1);
    border-radius: 7%;
    min-width: fit-content;
    margin: 0.5rem auto auto 0.5rem;
}
header.home-page > a:first-of-type {
    border: solid rgba(57, 34, 113, 1);
    margin: 0.5rem auto 0 0.5rem;
}
footer nav {
    display: flex;
    align-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
footer a {
    min-width: 50%;
    color: rgba(143, 247, 35, 1);
    padding: 1rem;
}

/* Paragraph & Text Elements */
strong {
    font-weight: 900;
}
header p {
    text-align: center;
    font-size: 8.25vw;
    color: rgba(143, 247, 35, 1);
}
footer p {
    text-align: center;
    line-height: 3;
}
footer p:last-child {
    padding-bottom: 2rem;
}
section p {
    line-height: 1.5;
    margin-bottom: 1rem;
}
section p:last-child {
    margin-bottom: 0;
}

/* List Elements */
ul {
    line-height: 1.5;
    list-style: square inside;
}
li {
    margin-bottom: 1rem;
}
li:last-of-type {
    margin-bottom: 0;
}
ul ul {
    margin-top: 1em;
    margin-left: 3em;
    margin-bottom: 1em;
    list-style: disc inside;
}
ul.home-page {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    list-style: none;
}
.home-page li {
    border: solid rgba(57, 34, 113, 1);
    padding: 1rem;
    margin-bottom: 1rem;
}
dl {
    line-height: 1.5;
}
dd {
    font-weight: 700;
    margin: 0.5rem auto;
}

/* Bootstrap Small Screens */
@media (min-width: 576px) {
    header {
        min-height: 3rem;
    }
    header.home-page {
        min-height: 100vh;
        justify-content: center;
        align-content: flex-start;
    }
    header h1 {
        font-size: 20vw;
    }
    header p {
        font-size: 6vw;
    }
    header nav {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        top: 0;
    }
    header object {
        display: none;
    }
    header a {
        border: none;
    }
    header a:hover {
        background-color: rgba(57, 34, 113, 1);
        color: rgba(143, 247, 35, 1);
    }
    header a:first-of-type {
        display: none;
    }
    footer nav {
        text-align: center;
    }
}

/* Bootstrap  Medium Screens */
@media (min-width: 768px) {
    header {
        min-height: 6rem;
    }
    header a {
        padding: 2.5rem 2rem;
    }
    footer a {
        min-width: 33.33%;
    }
    ul.home-page {
        flex-direction: row;
    }
    .home-page li {
        max-width: 32%;
    }
}

/* Bootstrap  Large Screens */
@media (min-width: 992px) {
    header {
        min-height: 7rem;
    }
    header h1 {
        font-size: 15rem;
    }
    header p {
        font-size: 5rem;
    }
    section {
        margin: 0 3rem;
    }
    header nav {
        justify-content: flex-end;
        padding-right: 3rem;
        padding-left: 3rem;
    }
    header object {
        display: inline-flex;
        margin-right: auto;
        padding: 0.5rem;
    }
}

@media (min-width: 1091px) {
    header {
        min-height: 6rem;
    }
}

/* Boostrap XLarge Screens */
@media (min-width: 1200px) {
    section {
        margin: 0 7rem;
    }
    header nav {
        padding-right: 7rem;
        padding-left: 7rem;
    }
}

@supports (-webkit-overflow-scrolling: touch) {
    header.home-page {
        background-attachment: initial;
    }
}