/* style.css */

body {
    align-items: stretch;
    background: #ffffffff;
    color: #0f0f0fff;
    display: flex;
    flex-flow: column nowrap;
    justify-content: stretch;
    width: 100%;
}

footer {
    background: #6f6f6fff; 
    color: #efefefff;
    font-size: .8em;
}

footer a:hover {
    color: #9f9fefff;
    text-decoration: underline;
}

footer article {
    margin: 1em;
}

footer nav {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 1em;
}

h1 {}
h2 { font-weight: 600; }
h3 {}

header {
    background: #3300ccff;
    color: #ffffffff;
    display: flex;
    flex-flow: row nowrap;
    justify-content: stretch;
    /* justify-content: space-between; */
    /* padding: 1em 0 1em 2em; */
}

header > * {
    flex: 1 0 auto;
}

header > :first-child {
    flex: 2 0 auto;
}

header a {
    padding: 1em;
}

header a:hover {
    background-color: #ef001fff;
}

img {
    height: auto;
}

main {
    align-items: flex-start;
    /* background: yellow; */
    /* border: 1px solid #0000003f; */
    display: flex;
    flex-flow: row wrap;
    flex: 1 0 auto;
    justify-content: center;
    width: 100vw;
}

main > h2 {
    background: #ff001fff;
    color: white;
    padding: .75em;
    text-align: center;
    width: 100%;
}

main p {
    text-align: left;
}

section {
    /* background: orange; */
    border-radius: 1em;
    box-shadow: 1px 1px 10px 1px #0f0f0f3f;
    margin: 1em;
    padding: .5em;
    width: 45vw;
}

section > img {
    border: 2px solid #0000003f;
    border-radius: .75em;
    box-shadow: 1px 1px 10px 1px #0f0f0f3f;
    margin: .125em;
    max-width: 40vw;
}

section:first-child {
    width: 85vw;
}

@media screen and ( max-width: 768px ) {
    header {
        flex-flow: row nowrap;
    }

    header > :first-child {
        flex: 1 0 auto;
    }

    section {
        width: 85vw;
    }

    section img {
        max-width: 80vw;
    }

}

/* do not want to use these
.dropdown { border: 2px solid blue; width: 25vw; }
.dropdown li:hover { background-color: #ef001fff; }
.dropdown ul { display: none; position: relative; }
.dropdown:hover ul { display: block; }
*/

/* eof - style.css */