/* #region Whole Content Affects whole content area */
body {
    margin: 0;
}

body.homepage {
    background-image: url(Images/Backgrounds/saltflat-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 40% 100%;
}

body.gallerypage {
    background-image: url(Images/Backgrounds/overlook-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 25%;
}

body.mapspage {
    background-image: url(Images/Backgrounds/camping-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

/* #endregion */

/* #region Hero Images and Content */


header {
    height: 40vh; 
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    margin-top: 0;

    animation-name: growdown;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes growdown {
    0%{height: 0;}
    100%{height: 40vh;}
}

#home {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(Images/Banners/home-banner.jpg);
    background-position: 100% 37%;
}

#maps {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(Images/Banners/writeups-banner.jpg);
    background-position: 100% 50%;
}

#galleryhead {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(Images/Banners/gallery-banner.jpg);
    background-position: 100% 50%;
}

/* #endregion */

/* #region Navigation Bar */


    /* Desktop Nav Bar */

    nav {
        width: 100%;
        margin: auto;
        top: 10vh;
        position: relative;

        animation-name: fadein;
        animation-duration: 2s;
        animation-iteration-count: 1;
    }

    @keyframes fadein {
        0% {opacity: 0;}
        50%{opacity: 0;}
        100% {opacity: 100;}
    }

    nav ul {
        list-style-type: none;
        display: flex;
        padding: 0;
        margin: 0;
        text-align: center;
        justify-content: center;
        align-items: center;

       
    }

    nav ul li:not(.logo) {
        flex: 1;
        background-color: black;
        margin-left: 15px;
        margin-right: 15px;
        height: 60px;
        border-radius: 10px;
        display: flex;
        width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    nav ul li a {
        display: block;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

   
    /* Small Laptop Nav Bar */

    @media screen and (max-width:992px) {

        nav {
            top: 10%;
        }

        nav ul {
            flex-wrap: wrap;
        }

        nav ul li {
             flex-basis: 100%;
             order: 1;
        }

        .logo {
            order: 0;
        }
    }

    /* Nav Bar Tablet-Landscape */

    @media screen and (max-width:768px) {
        nav {
            width: 100%;
            top: 0%;
        }

        nav>ul>li {
            flex-basis: 100%;
            order: 1;

            margin-top: 15px;
            margin-bottom: 15px;
       }
    }

    /* Nav Bar Small Phone */

    @media screen and (max-width:420px) {
        
        nav{
            top: 10%;
        }

        nav ul{
            flex-direction: column;
        }

        nav ul li:not(.logo) {
            width:50%;
        }

        nav ul li {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .logo {
            display: none;
        }

    }

    /* Nav Bar Landscape */

    @media screen and (max-height:670px) {

        .logo {
            display: none;
        }
    }

nav li:hover:not(.logo) {
    box-shadow: 0px 0px 8px white
}

nav a {
    color: white;
    text-decoration: none;
    font-size: 18pt;
    font-family: Helvetica;
}

/* #endregion */

/* #region About page */

    /*About Desktop*/

    .about article{
        background: rgba(255, 255, 255, 0.808);
        width: 30%;
        margin: auto;
        margin-top: 50px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .about h1 {
        text-align: center;
    }
    
    .about h2 {
        text-align: center;
    }
    
    .about p {
        text-align: center;
        width: 70%;
        margin: auto;
        font-size: 14pt;
        font-family: Arial, Helvetica, sans-serif
    }
    
    .about img {
        display: block;
        margin: auto;
        width: 15vw;
        height: 30vh;
        object-fit: cover;
    }

    /* About small laptops */

    @media screen and (max-width:992px) {
        .about article {
            width: 70%
        }

        .about p {
            width: 90%;
        }

        .about img {
            width: 50%;
            height: 40vh;
        }
    }

    /* About Tablet Landscape */

    @media screen and (max-width:768px) {
        .about article {
            width: 60%
        }

        .about p {
            width: 90%;
        }

        .about img {
            width: 50%;
            height: 40vh;
        }
    }

    /* About Tablet-Portrait/Mobile */

    @media screen and (max-width: 600px) {
        .about article {
            background: rgba(255, 255, 255, 0.637);
            width: 100%;
            margin: 0;
        }

        .about p {
            width: 90%;
        }

        .about img {
            width: 50vw;
            height: 40vh;
        }
    }

    /*About Small Mobile */

    @media screen and (max-width: 420px) {
        .about article {
            background: rgba(255, 255, 255, 0.637);
            width: 100%;
            margin: 0;
        }

        .about p {
            width: 90%;
        }

        .about img {
            width: 80vw;
            height: 40vh;
        }
    }

/* #endregion */

/* #region Gallery page */

    .container {
        max-width: 1600px;
        padding: 50px 20px;
        margin: 0 auto;

        animation-name: galleryfadein;
        animation-duration: 3s;
        animation-iteration-count: 1;
    }

    .container h1 {
        text-align: center;
    }

    .galleryImg {
        width: 100%;
        height: 100%; /* removing this will keep all tall pictures the same height */
        object-fit: cover;
        border-radius: 10px;
        position: relative;

        /* an animation */
        transition: transform 250ms;
    }

    .wider {
       grid-column: span 2;
       grid-row: span 1;
    }

    @media screen and (max-width: 700px){
        .wider {
            grid-column: auto;
        }
    }

    #gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 20px;
    }
/* #endregion */

/* #region Maps Page */

.mapsflavor>article {
    background: rgba(255, 255, 255, 0.808);
    width: 30%;
    margin: auto;
    margin-top: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.mapsflavor>article>h2 {
    text-align: center;
}


.mapsflavor>article>h3 {
    text-align: center;
}

.mapsflavor>article>p{
    text-align: center;
    width: 70%;
    margin: auto;
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif
}



.maps article{
    background: rgba(255, 255, 255, 0.808);
    width: 30%;
    margin: auto;
    margin-top: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.maps h1 {
    text-align: center;
}

.maps h2 {
    text-align: center;
}

.maps p {
    text-align: center;
    width: 70%;
    margin: auto;
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif
}

.maps img {
    display: block;
    margin: auto;
    width: 15vw;
    height: 30vh;
    object-fit: cover;
}

/* #endregion */