/* grid design */

:root {
    --radius: 5px;
    --padding: 10px;
}
.campContainer {
    color: white;
    text-align: center;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-gap: 5px;
    grid-template-areas: 
    "header header header"
    "navbar navbar navbar"
    "main main main"
    "pic1     pic2     pic3"
    "footer footer footer"
}

/* styling the nav */
.navbar{
    background-color: rgb(121, 164, 150);
    border-radius: var(--radius);
    padding-top: var(--padding); 
    grid-area: navbar;
    text-align: center;
    font-size: 15px;
    }
    nav a:hover{ 
        background-color: #ffffff; 
        color: #0e471c; 
    } 
    #navigation ul{
        list-style: none; /* Removes bullets */
        position: relative; /* so the submenus can be positioned */
        text-align: center;
        padding-bottom: 2%;
    }

    #navigation ul li:hover > ul {     /* Select ul child of ul element */
        display:block;          /* Display submenu on hover of li element */
    }
    
    #navigation > ::after{
        content: "";  /* Add empty content to the end of the first ul */
        display: block; /* Display that content as a block element */
        clear: both;  /* Stop the floating of the li elements */
        text-align: center;
    }
    ul {
        display:flex;
        flex-direction: row;
        list-style-type: none;
        justify-content: space-around;
        padding-top: 1%;
        padding-bottom: 0;
    }

    a{
        text-decoration: none;
    
    }

    /* headings */

#header {
    background-color: rgb(86, 134, 130);
    border-radius: var(--radius);
    padding-top: var(--padding);
    grid-area: header;   
    font-size: 28px;
    font-weight: bold;
    color: white;
    text-align: center;
    padding-bottom: 0;
    padding-top: 0;
}

.header1 {
    background-color: rgb(86, 134, 130);
    border-radius: var(--radius);
    padding-top: var(--padding);
    grid-column-start: 1;
    grid-column-end: 3;  
    border: double rgb(198, 210, 206) 15px;       
}

#headingfont {
    font-size: 60px;
    font-weight: bold;
    color: white;
    text-align: center;
    padding-bottom: 5%;
}    

#campheading{
    color:#414d81;
}

#tripheading {
    color:#414d81;
}

#hikeheading {
    color:#414d81;
    text-align: center;
}

/* main content */

#main{
    background-color: rgb(78, 158, 153);
    border-radius: var(--radius);
    padding-top: var(--padding);
    grid-area: main;
}

#main1 {
    background-color: rgb(78, 158, 153);
    border-radius: var(--radius);
    padding-top: var(--padding);
    grid-area: main;
}

#campvideo{
    color: black;
}

#roadvideo {

    color: black;    
}

#hikevideo {

    color: black;    
}


#pic1{
    background-color: rgb(36, 110, 58);
    border-radius: var(--radius);
    padding-top: var(--padding);
    grid-area: pic1;
   
}
#pic2{
    background-color: rgb(49, 112, 128);
    border-radius: var(--radius);
    padding-top: var(--padding);
    grid-area: pic2;
}
.tentgroup{
   padding-left: 2px;
}

#pic3{
    background-color: rgb(65, 92, 110);
    border-radius: var(--radius);
    padding-top: var(--padding);
    grid-area: pic3;
}
    
#footer{
    background-color: rgb(77, 107, 75);
    border-radius: var(--radius);
    padding: auto;
    grid-area: footer;
}