/* Copyright Katherine Townsend */

/* Brown: #332e10, rgb(51,46,16), hsl(51.4,52.2,13.1)
	Blue: #1c4682, rgb(28,70,130), hsl(215.29, 64.6, 31)
    Yellow: #f5c501, rgba(245, 197, 1, 1), hsl(48.2,99.2,48.2)
    Sky Blue: #0099ab, rgba(0,153,171,1)
*/

main {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    background: #1c4682 url("../img/balloons.jpg") no-repeat;
    background-size: cover;
    /*border-top: 2px ridge #1c4682;*/
    padding: .5em;
}

main div div {
    display: flex; 
    width: 100%; 
    justify-content: center;
}

#myPhoto {padding-top: 1em;}

#myPhoto img {
    display: block;
    border-radius: 50%;
    height: 220px;
    width: 200px;
    /* box-shadow: rgba(0,0,0,0.7) 3px 3px 4px inset;
    border: 8px solid inset;*/
    box-shadow: 
    0 1px 2px #fff, /*bottom external highlight*/
    inset 0 -3px 3px rgba(0,0,0,0.5), /*bottom internal shadow*/
    0 -1px 1px #666, /*top external shadow*/
    inset 0 3px 3px rgba(255,255,255,0.8); /*top internal highlight*/
}

h2 {
    color: #f5c501;
    padding: .75em 0 .5em 0;
    text-shadow: 2px -2px 5px #0099ab, -2px 2px 5px #0099ab;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.19);
}

#hello, #goals {
    display: flex;
    flex-flow: column nowrap;
    color: #332e10;
    background: rgba(255, 255, 255,.9);
    padding: 1em 1.5em;
    border-radius: 10px 15px;
    width: 90%;
    margin: 0 auto;
    border: #332e10 solid 1px;
}

#goals {margin-bottom: 3em;}

#goals p:first-child, #goals p:nth-child(2) {padding-bottom: .5em;}

footer {
    position: relative;
    background: transparent;
    opacity: 1;
    color: #332e10;
    bottom: 5px;
    margin-top: -3em;
}

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

.flex-container {height: 100vh;}

main {
    height: 100%; 
    flex-flow: row nowrap;
    justify-content: space-around;
}

#desktopAbout, #desktopGoals {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    padding: 2em;
    line-height: 1.75em;
}

    #desktopAbout {
        position: relative;
        top: 2.75em;
        right: 1em;
        width: 28%;
    }

    #desktopGoals {
        width: 32%;
        position: relative;
        right: 3em;
    }

main div div {
    justify-content: center;
    height: 100%;
}

h2 {font-size: 2em;}

    #hello, #goals {
        width: 100%;
        border: none;
        box-shadow: rgba(51,46,16, .4) 10px 10px;
        border-radius: 25px 20px;
        font-size: 1.25em;
    }

#goals {margin: 0;}

        footer {
        position: fixed;
        bottom: 1%;
        background: transparent;
        color: #332e10;
    }

    }