/* optimize photos 1000-1500px */
/*Start Universal Styles*/
html 
{
    background-color: #003D23;
}
header
{
    display: inline-flex; 
    grid-area: navbar;
    z-index: 2;
}
body
{
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    min-width: 50%;
    max-width: 1400px;
    margin-top: 5vh;
    height: 90vh;
    display: flex;
    flex-flow: row wrap;
    
}
nav
{
    background-color: #003D23;
    font-family: "Hubot Sans", sans-serif;
    border-right: 3px solid #73c9a3;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    width: 170px;
    min-height: 600px;
    max-height: 90vh;
    line-height: 1em;   
}
#logo
{
    width: 125px;
    height: 125px;
    border-radius:50%;
} 
nav li
{
    /* margin-top: 15px; */
    margin-bottom: 10px;
    margin-right: 10px;
    list-style-type: none;
    display:flex;
    justify-content: center;
}
nav a
{
    display: block;
    width: 6em;
    padding: .5em .5em;
    text-decoration: none;
    text-align: center;
    letter-spacing: .1em;
    color: #fff;
    background-color: #21875B;
    border-radius: 30px;
    text-shadow: #666 .1em .1em .1em;
    box-shadow: 0 4px 2px rgba(0,0,0,.5);
    position: relative;
    top: 0px;
    transition: background-color 0.2s, 
    border-color 0.2s, 
    top 0.1s, 
    box-shadow 0.1s;
}
a:hover
{
    color: #21875B;
}
a:active
{
    top: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/*End Universal Styles*/

/*Peripheral Page Styles*/
main
{
    grid-area: main;
    color: white;
}
.pages
{
    background-color: #002213;
    border-right: 3px solid #73c9a3;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    min-width: 700px;
    /* max-width: 1400px; */
    min-height: 600px;
    max-height: 90vh;
    display: grid;
    grid-template-areas:
        "navbar main"
        "navbar footer";
    grid-template-columns: 170px auto;
    grid-template-rows: auto 55px;
    position: relative;
}
#packages
{
    padding: 200px 0 100px 100px;
    font-family: "Noto Serif", serif;
    font-style: italic;
    white-space: nowrap;
}
footer
{
    background-color: #21875B;
    color: #fff;
    font-family: "Hubot Sans", sans-serif;
    font-size: small;
    /* font-optical-sizing: auto; */
    border-top-right-radius: 0px;
    border-bottom-right-radius: 37px;
    height: 60px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding-left: 220px;
}    
footer #insta-logo
{
    width: 21px;
    height: 21px;
    float: left;
    margin-right: 10px; 
}

.pattern /*background*/
{
    background-color: #000;
    background-image: url("../images/pattern-green.jpg");
    background-position:  center 45%;
    background-repeat:repeat;
    background-size: 50vw 50vh;
    min-height:600px;
    max-height: 90vh;
}
/*End Peripheral Page Styles*/

/*Start Contact Styles*/
form
{
	color: #fff;
    font-family: "Noto Serif", serif;
    line-height: 1em;
}
fieldset
{
	margin: 2vh 40px 0 50px;
    border: 3px solid #0e6e45;
    /* background-color:#003d23; */
    border-radius: 30px;
}
label
{
	width: 50px;
	display: inline-block;
}
form p, form select
{
    margin-bottom: 0.5em;
}
input, textarea, select
{
    border-radius: 15px;
    padding-left: 7px;
    border-color: #0e6e45;
}
form #asterisk
{
    margin-top: -10px;
    font-style: italic;
    font-size: x-small;
    margin-bottom: -40px;
}
form h1
{
    font-family: "Monomakh","Young Serif","Noto Serif", serif;
    font-size: x-large;
    
}
/*End Contact Styles*/