@font-face {
    font-family: islandfont;
    src: url(../fonts/Islandfont.ttf);
}

#logo_link { 
    
    padding-top: 5px;
    justify-self: center; 
    align-self: center; 
}

.logo {
    max-width: 75%;
}

body {
    background-color: rgb(255, 255, 255);
    margin: 0;  /*optional - due to center-page design differences*/
    padding: 0;  /*optional - due to center-page design differences*/

}

header { 
    background-color: rgb(120, 175, 156);
    display: grid;
    grid-template-columns: 150px auto;
    position: relative;
    z-index: 2;
}

nav {
    display: flex;
    justify-content: space-around;
}


body, header {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 22px;
}

#wrapper { /* reference to <div>, created to put site floating in the center */
    
    border: 3px solid #515151;  /* puts a 3px colored border, looks like a box. */
    width: 1024px;
    margin: 40px auto; /* top and bottom is first value, second is left and right */
    /* border border-radius: 20px;  rounds corners? */
    background-color: rgb(235, 255, 248);
}



main section img {

 box-sizing: border-box;/*useless? - due to center-page design differences?*/
    /* this makes the border included inthe size of image */
}


nav a { 
    text-decoration: none;
    font-size: x-large;
    padding: 35px;
}

a:visited { color:black; }

#hero_msg {    text-align: center;}
#hero_msg h1 { font-family: islandfont; }
#hero_msg h4 { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; }



.button_box {
    text-align: center;
    margin: 0 0;
}

.home_grid {
    /* text-align: center; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 20px;
    /* width: 900px; */
    /* max-width: 900px; */
    margin: 0 auto;
}

.home_title {
    font-size: 2em;
    margin-top: 15px;
}

.card-img {
    max-width: 80%;
    max-height: 80%;
    margin: 60px 0;
    border: 8px solid #f3e48e;
    box-shadow: 5px 5px 10px #6f7364;

}

.card-img:hover {
    opacity: .6;
    transform: scale(1.1);
}

.card-img .bigcard_img {
    width: 100%;
}

.card-text {  margin: -55px 0 0 0;}

.icon {
    max-width: 25%;
    max-height: 25%;
    padding-top: 10px;  /* useless? */
    margin: 60px 0;
}

.bigcard_img {
    margin: 25px;
    margin-top: 100px;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 5px 5px 10px #6f7364;
}

.bigcard_img_box { /* text-align only works on parents of images? this is a div's class. */
    text-align: left;
}


.hero_img {
    max-width: 99.6%;
    margin: 0.01% 0%;
    border: 3px solid black;
}

#background {
    height: 400px;
    margin: 5% 0%;
}

nav a:hover {
    background-color: #f6be1f;
    color: #000000;
}

.book, .join { 
    background-color: #f6be1f;
    text-decoration: none;
    color: black;
    font-size: 18px;
    padding: 15px 30px;
    margin-top: 50px;   /* useless? */
    border-radius: 5px; /* rounds corners */
 }

 .book:hover, .join:hover { background-color: #f3e48e; }
 #background { background-color: #f3e48e; }

.msg { /* foot message box */
    background-color: #d6be7d;
    line-height: 1.5em;
    padding: 25px;
    margin: 5% 0%;
    position: relative;
    z-index: 1;
    box-shadow: 5px 5px 10px #6f7364;
}


.msg h2 { color: black; } /*foot message title*/
.msg p {  /*foot message paragraph*/
    text-align: center;
    padding: 0% 13%;
    color: black; 
    font-size: .8em;
    padding-bottom: 15px;
}

footer {
    background-color: rgb(120, 175, 156);
    padding: 25px 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
footer a {background-color: rgb(35, 54, 31); }
footer .social img  { padding-top: 15px;}
footer a:hover { background-color: #73101b; }


#hero {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    margin-top: -100px;
}

#hero_box {
    grid-column: 1/4;
    grid-row: 1/3;
    z-index: 0;  /* supposed to layer herobox back */
}

#hero_msg {
    color:  white;
    grid-column: 2/3;
    grid-row: 1/2;
    margin-top: 100px;
    z-index: 0;
}

.hero_img { width: 100%; }


.family_eating_card {
    white-space: nowrap;
    justify-self: center;
    width: 300px;
    height: 300px;
}

.affordable_meals_card{
    white-space: nowrap;
    justify-self: center;
    width: 300px;
    height: 300px;
}

.eating_contest_card {
    white-space: nowrap;
    justify-self: center;
    width: 300px;
    height: 300px;
    
}

#background {
    justify-self: left;
    grid-column: 1;
    grid-row: 2;

}

.bigcard_img_box {
    grid-row: 2 / span 2;
    grid-column: 1 / span 2;
    justify-self: left;
    position:static;
    z-index: 0;
}


.msg {
    grid-row: 2 / span 2;
    grid-column: 2 / span 2;
    justify-self: right;
    margin-right: 30px;
    align-self: end;
    width: 60%;
    height: 40%;
}












@media screen and (max-width: 900px) {
    #hero, .home-grid {
        display: block;
        height: auto;
    }
    nav, footer {
        flex-direction: column;
    }
    nav a {
        display: block;
        padding: 15px;
    }
    #hero {
        margin-top: 0;
    }
    #hero-msg {
        margin-top: 0;
    }
    #hero-msg h4 {
        display: none;
    }
    #hero-msg h1 {
        color: #6f7364;
    }
    .home-title {
        font-size: 25px;
    }
    .rivers-card, .camping-card, .rapids-card { 
        margin: 50px auto;
        width: 60%;
    }
    #background {
        display: none;
    }
    .mountains, .msg {
        width: 80%;
        display: block;
        margin: 0 auto;
    }
    footer {
        margin-top: 25px;
    }
}