/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Author's Custom Styles
*/
/* change grid settings as needed! */
.gridContainer{
    grid-template-rows: auto;
}
/* 
    Properties shared by all children of the grid container 
*/
.gridContainer *{
    font-family: sans-serif;
}
nav{
    display: flex;
    flex-direction: row nowrap;
    width: auto;
    height: 30px;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 10;
}
nav a:first-of-type{
    margin-right: 100px;
    width: auto;
}
nav a{
    width: 160px;
}
nav, nav a, footer, footer a{
    background-color: #99ccff;
    color: black;
    text-decoration: none;
    align-items: center;
    padding: 10px;
    font-family: sans-serif;
}
nav a:hover, footer a:hover{
    color: hotpink;
}
nav button{
    display: none;
}
.heroImg{
    width: 100%;
    height: 100%;
}
.heroImg img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.heroImgTxt{
    background-color: transparent;
    color: whitesmoke;
    text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
    width: 50%;
    margin: auto;
}
.heroImgTxt h1{
    font-size: 3em;
    margin-bottom: 0px;
}
.heroImgTxt p{
    font-style: italic;
    font-size: 1.25em;
    margin-top: 0px;
}
.heroImgTxt img{
    float: left; 
    margin: auto 30px; 
    border: 1px white solid;
}
.rowItem{
    background-color: #eee;
    border: 15px white solid;
    padding: 10px;
}
.rowItem h3{
    text-align: center;
}
.rowItem button{
    border-radius: 4px;
}
.rowItem img{
    max-width: 95%;
}
.contentArea{
    padding: 1em;
}
@media only screen and (max-width: 769px) {
    nav{
        flex-direction: column;
        width: auto;
        margin: auto;
    }
    nav a{
        width: 100%;
        display: none;
    }
    nav a:first-of-type{
        margin-right: 0;
        display: inherit;
    }
    nav button{
        display: inherit;
        position: absolute;
        right: 10px;
        bottom: 0px;
        width: auto;
        background-color: #99ccff;
        font-weight: bold;
        padding: 10px;
        color: white;
        font-size: 22px;
        border: none;
    }
    .heroImg{
        margin-bottom: -50%;
    }
    .heroImgTxt{
        width: 90%;
        font-size: 1em;
        padding: 1em;
        color: black;
        text-shadow: none;
    }
    .heroImgTxt h1{
        font-size: 2em;
    }
    .heroImgTxt img{
        float: none; 
        clear: both;
        border: 1px white solid;
    }
    
}