@charset "utf-8";

html 
{
    background-color: rgb(247, 235, 218);
}

body
{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-family: Verdana, Geneva, sans-serif;
    background-color: white;
    color:rgb(91, 91, 91); 
}

header
{
    background-color: rgb(203, 186, 160);
    text-align: center;
    padding: 20px;
}

hr
{
    width: 90%;
}

br
{
    clear: both;
}

h1
{
    text-align: center;
    text-decoration: underline;
    color: rgb(189, 1, 1);
}

h2
{
    font-size: 1.6em;
    color: rgb(255, 153, 0);
    margin-left: 50px;
    margin-right: 50px;
}

p
{
    margin-left: 50px;
    margin-right: 50px;
}

p#about
{
    margin-right: 30%;
}

section
{
    padding: 5px;
    background-color: rgb(203, 186, 160);
    box-shadow: inset rgba(0, 0, 0, 0.445) 2px 2px 5px 1px;
}

section p, section li, section h2
{
    color: white;
    text-shadow: rgba(0, 0, 0, 0.411) 2px 2px 5px;
}

section p
{
    padding: 8px;
    border: solid white 2px;
}

a:hover
{
    color: rgb(25, 185, 217);
}

nav
{
    padding: 15px 15px 0px;
    margin-bottom: 10px;
    text-align: center;
}

nav ul
{
    display: flex;
    margin: 0px;
    padding: 0px;
    list-style-position: inside;
    list-style-type: none;
    font-weight: bold;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

nav li
{
    float: left;
    margin: 5px;
    padding: 5px;
    flex: 30%;
    border: solid rgb(203, 186, 160) 5px;
}

/* Nav backgound colors */
nav li#home
{
    background-color: rgb(189, 1, 1);
}
nav li#projects
{
    background-color: rgb(255, 153, 0);
}
nav li#cause
{
    background-color: rgb(25, 185, 217);
}
/* End of Nav background colors */

nav li a
{
    padding: 0px 10px 0px 10px;
    text-decoration: none;
    color: white;
    font-size: x-large;
    transition: font-size 0.25s;
}

nav li a:hover
{
    color: white;
    text-decoration: underline;
    font-size: xx-large;
}

ul
{
    margin-left: 50px;
    margin-right: 50px;
}

img
{
    width: 25%;
}

img#banner
{
    float: right;
    margin: 10px;
    border-radius: 50%;
    border: solid rgb(25, 185, 217) 5px;
    box-shadow: rgba(0, 0, 0, 0.461) 2px 2px 5px 1px;
}

body footer
{
    clear: both;
    background-color: rgb(130, 46, 31);
    color: rgba(255, 255, 255, 0.6);
    font: bold 0.9em/3em;
    text-align: center;
    margin-top: 10px;
    padding: 10px;
}

iframe
{
    display: inline;
    max-width: 25%;
    height: 175px;
    padding: 10px;
}

div.gallery
{
    padding-left: 10%;
}

@media only screen and (max-width: 768px)
{
    body
    {
        width: 100%;
        margin: 0px;
    }

    img
    {
        float: none;
        width: 90%;
    }

    p#about
    {
        margin-right: 50px;
    }

    nav ul
    {
        display: block;
    }

    nav li
    {
        float: none;
        width: 95%;
    }

    iframe
    {
        display: block;
        max-width: fit-content;
    }
}