/*

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: repeat(10,1fr) auto 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;

    font-weight: bold;

}

nav a{

    width: 160px;

}

nav, nav a, footer, footer a{

    background-color: #333333;

    color: lightgray;

    text-decoration: none;

    align-items: center;

    padding: 10px;

    font-family: sans-serif;

}

nav a:hover, footer a:hover{

    color: white;

}

nav button{

    display: none;

}

.heroImg{

    /* add a background-image property for hero image */

    background-image: url(img/logoWhite.png);

    background-color: #eeeeee;

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    color: crimson;

    text-shadow:

   -1px -1px 0 #000,  

    1px -1px 0 #000,

    -1px 1px 0 #000,

     1px 1px 0 #000;

    text-align: center;

    font-style: italic;

}

.heroImg h1{

    font-size: 4em;

    padding: 10px;

    margin-top: 6em;

}

.heroImg p{

    font-style: italic;

    padding: 10px;

}

.rowItem{

    background-color: #eee;

    border: 15px white solid;

    padding: 10px;

}

.rowItem h3{

    text-align: center;

}

.rowItem button{

    border-radius: 4px;

}

.contentArea{

    padding: 1em;

}

video{

    max-width: 100%;

}

@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: #333;

        font-weight: bold;

        padding: 10px;

        color: white;

        font-size: 22px;

        border: none;

    }

    .heroImg h1{

        font-size: 1.5em;

    }

    

}