*{
    margin: 0;
    padding:0;
    /* border: 1px red solid; */
    font-family: 'EB Garamond', serif;
    /* background-color: #D9D9D9; */
}
nav{
    background-color: #262112;
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    padding: 2rem 0rem;
}
#navcontent{
    margin: 0 5rem;
    background-color: #262112;
    display:flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#navcontent a{
    background-color: #262112;
    align-self: center;
}
#navcontent a img{
    background-color: #262112;
}
#navcontent ul{
    margin-right: 5rem;
    display:flex;
    background-color: #262112;
    flex-flow: row nowrap;
    list-style-type: none;
    align-self: center;

}
#navcontent ul li{
    background-color: #262112;
    text-decoration: none;
    color:#D9D9D9;
    border-right: 2px #D9D9D9 solid;
    padding: 2px 1rem;
    font-size: x-large;
}
#navcontent ul li:nth-child(4){
    border-right: 0px #D9D9D9 solid;
}
main{
    display:flex;
    background-color: #706D63;
    grid-row: 3/4;
    grid-column: 2/-2;
}
main p{
    padding: 3rem 2rem;
    color:#D9D9D9;
    font-size:24px;
    background-color: #706D63;
    
}
main img:nth-child(1){
    margin: 3rem;
}
footer{
    display: flex;
    background-color: #262112;
    grid-row: 4/5;
    grid-column: 1/-1;
    justify-content: space-around;
    align-items: center;
    padding: 2rem 0;
}
footer div{
    background-color: #262112;

}
footer div ul{
    list-style: none;
    background-color: #262112;
    color:#D9D9D9;
}
footer div ul li{
    background-color: #262112;
}
footer h3{
    background-color: #262112;
    color:#D9D9D9;
}
footer h4{
    background-color: #262112;
    color:#D9D9D9;
}
#wrapper{
    display: grid;
    grid-auto-rows: minmax(50px, auto);
    grid-template-columns: minmax(0px, 2fr) repeat(6, minmax(auto, 200px)) minmax(0px, 2fr);
    background-color: #D9D9D9;
}
#indexheroimage{
    height: 500px;
}
.hero{
    grid-row: 2 / 3;
    grid-column: 2 / -2;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
.hero div{
    align-self: center;
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
}
#herotext {
    font-size: xx-large;
    gap: 0;
}
#herolink{
    background-color: #706D63;
    color:#90C958;
    font-size: 2rem;
    text-decoration: none;
    border-radius: 1rem;
    padding: 1rem 2rem;
}


@media screen and (max-width: 992px) { /* tablet layout */
    #wrapper{
        grid-template-columns: minmax(0px, 2fr) repeat(6, minmax(auto, 200px)) minmax(0px, 2fr);
    }
    main{
        width: 768px;
        display:flex;
        background-color: #706D63;
        grid-row: 3/4;
        grid-column: 2/-2;
        margin: 0 auto;
    }
    main img {
        width: 300px;
        height: 188px;
    }
}

@media screen and (max-width: 768px) {  /* mobile layout */
    main{
        width: 100%;
        flex-direction:column;
        align-items: center;
    }
    #navcontent{
        margin: 0 auto;
    }
    .hero div{
        padding:5rem 0;
        background-color:#D9D9D980;
    }
    .hero img{
        display:none;
    }
    #indexhero{
        background-image: url("suzy's mom.png");
        background-position: center;
    }
}