html,body{
    box-sizing:border-box;
    padding:0;
    margin:0;
    font-size:16px;
    height:100%;
    background:linear-gradient(#f0d9ed, #a46, #7d578c);
    text-align:center;
    font-family:'Courier New', Courier, monospace;
}
.container{
    display:grid;
    grid-gap:.625rem;
    grid-template-columns:repeat(12, lfr);
                        /*head  mimg intro  button  title  img    para     footer*/
    grid-template-rows: auto auto auto auto auto auto auto auto;
    grid-template-areas:
"l l l l l l l l l l l l" /* header*/
". m m m m m m m m m m ." /*main image*/
"r r r r r r r r r r r r" /*description*/
". . . . g g g g . . . ." /*button*/
"t t t t . . . . . . . ." /*title*/
"h h h h j j j j k k k k" /*images or resturant one*/ 
"p p p p n n n n o o o o" /*captions and prargraph*/
". q q q q q q q q q q ." /*footer*/

}
.embeded{
    grid-area:n;
}
.navb{
    grid-area:l;
    background-color:#c299BE;
    font-size:1.5rem;
    align-items:center;
    background-repeat: repeat-y;
    border: solid .25rem white;
}
nav ul{
    font-size:1.75rem;
    font-weight:bold;
    text-shadow:.05rem .05rem #125688;
    display:flex;
    list-style-type:none;
    justify-content: space-between;
    padding-top:2rem;
    opacity:1;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
nav ul li{
    padding-top:.5rem;
    margin-right:7rem;
}
nav ul li a{
    text-decoration:none;
}
img{
    max-width:100%;
    height:auto;
    border:solid black .25rem;

}
body{
    background:linear-gradient(#f0d9ed,#a46a93,#7d578c);
    text-align:center;
    font-family: 'Courier New', Courier, monospace;
    justify-content: center;
}

/*Main Img*/
.mainImg{
    grid-area:m;
    background-color:transparent;
    opacity:1.0;
}
.mainImg img:hover{
    opacity:.5;
}
/*Button*/
.button{
    grid-area:g;
    background-color:#B07BAC;
    font-size:2rem;
    border-radius:.8rem;
    color:black;
    padding: .55rem .55rem;
}
.button:hover{
    background-image:linear-gradient(90deg, purple, pink, lightGreen, lightBlue);
    animation:slide 5s linear infinite;
}
@keyframes slide{
    to{
        background-position: 150vw;
    }
}
.title{
    grid-area:t;
    background-color:#6E8778;
    font-size: 1.875rem;
    border:solid .05rem;
    color:black;
    text-shadow: .125rem .125rem rgb(83, 83, 83);
}

/*Page One Three Images*/
.imgOne{
    grid-area:h;
    background-color:transparent;
    justify-content:center;
    display:grid;
    place-items:center;
    padding-bottom:.7rem;
    overflow:hidden;
}
.imgTwo{
    grid-area:j;
    background-color:transparent;
    justify-content: center;
    display:grid;
    place-items:center;
    padding-bottom: .7rem;
    overflow:hidden;
}
.imgThree{
    grid-area:k;
    background-color:transparent;
    justify-content:center;
    display:grid;
    place-items: center;
    padding-bottom: .7rem;
    overflow:hidden;
}
.capOne{
    background-color:#BD9F89;
    font-size: 1.125rem;
    grid-area:p;
    border:solid white .2rem;
}
.capTwo{
    background-color:#BD9F89;
    font-size: 1.125rem;
    grid-area:n;
    border:solid white .2rem;
}
.capThree{
    background-color:#BD9F89;
    font-size: 1.125rem;
    grid-area:o ;
    border:solid white .2rem;
}
/*Table*/
table{
    grid-area:j;
    font-size:1.75rem;
    background-color:#e3d5ca;
    border:1rem
}
/*Footer*/
.footer{
    grid-area:q;
    border:.25rem solid black;
    display:flex;
    justify-content: space-around;
    align-items:center;
    background-color:#5F7367;
}
/*Intro*/
.intro{
    grid-area:r;
    background-color:#C299BE;
    overflow-wrap:anywhere;
    overflow-y:scroll;
    font-size:1.5rem;
}
.MyTable{
    grid-area:j;
    overflow-x:auto;
    font-size: 1.75rem;
    font-weight: bolder;
}
a:link{
    color:black;
}
a:visited{
    color:rgb(62, 4, 90);
}
a:hover{
    color:rgb(120, 139, 95);
    text-decoration: none; 
}
.shift{
    font-style:italic;
    font-weight:900;
    padding-bottom: .5rem;
    padding-right:2.75rem;
}
@media only screen and (max-device-width: 780px){
    nav ul{
        display:block;
        font-size:.7rem;
        padding:0rem;
    }
    nav ul li{
        padding:0rem;
    }
    .button{
        font-size:.75rem;
    }
    .title{
        font-size:.75rem;
    }
    .footer{
        display:block;
    }
}