@import url("https://fonts.googleapis.com/css2?family=Cherry+Swash&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.mainbody {
  display: grid;
  grid-template-columns: 1fr 3fr 3fr 1fr;
  grid-template-rows: 150px 75px 1fr 1fr 1fr 150px;
  grid-template-areas: "header header header header" "nav nav nav nav" ". pic1 desc1 ." ". desc2 pic2 ." ". pic3 desc3 ." "footer footer footer footer";
  column-gap: 15px;
  justify-content: center;
  align-content: center;
  text-align: center;
  background-image: linear-gradient(lightblue, yellow, red, blue);
  background-repeat: no-repeat;
}

.mainbody article {
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: center;
  padding: 25px;
}

.mainbody .pic1, .mainbody .pic2, .mainbody .pic3 {
  grid-area: pic1;
  width: 100%;
  height: auto;
}

.mainbody .desc1, .mainbody .desc2, .mainbody .desc3 {
  grid-area: desc1;
  display: flex;
  width: 100%;
  height: 30%;
  margin-top: 200px;
  margin-bottom: 150px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 1.5em;
  font-family: 'Crimson Text', serif;
}

.mainbody .desc2 {
  grid-area: desc2;
}

.mainbody .pic2 {
  grid-area: pic2;
}

.mainbody .pic3 {
  grid-area: pic3;
}

.mainbody .desc3 {
  grid-area: desc3;
}

header {
  grid-area: header;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: #111111;
  padding: 10px;
}

header img {
  width: auto;
  height: 100%;
  padding: 10px;
}

header h1 {
  font-family: 'Cinzel Decorative', cursive;
  color: #e6e7e8;
  font-size: 4em;
  margin-top: 15px;
}

header .hpinfo {
  position: absolute;
  right: 60px;
  top: 25px;
  color: white;
}

header .hpinfo p {
  padding: 10px;
  font-size: 1.5em;
}

header .hpinfo a[href^=tel] {
  text-decoration: none;
  font-size: 1.5em;
  color: inherit;
}

nav {
  grid-area: nav;
  background-color: #e6e7e8;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 5%;
}

nav .menulist li {
  color: #2e3192;
  display: inline-block;
  list-style: none;
  padding: 0 20px;
  border-right: #2e3192 1px solid;
}

nav .menulist li:last-child {
  border-right: none;
}

nav .menulist a {
  font-size: 2em;
  text-decoration: none;
}

nav .menulist a:hover {
  color: #fbb040;
}

nav .menulist a:active {
  color: #fbb040;
}

nav .socialmedia {
  display: inline-flex;
  list-style: none;
  position: absolute;
  right: 60px;
  top: 150px;
  padding: 20px;
  color: #2e3192;
}

nav .socialmedia li {
  padding: 0 10px;
  border-radius: 25px;
}

nav .socialmedia li:hover {
  background-color: #fbb040;
}

nav .socialmedia a {
  color: blue;
}

footer {
  grid-area: footer;
  background-color: #111111;
  justify-content: center;
}

footer .socialmedia2 {
  color: #2e3192;
  display: inline-flex;
  list-style: none;
  padding: 20px;
  color: #2e3192;
}

footer .socialmedia2 li {
  padding: 0 10px;
  background-color: white;
  border-radius: 25px;
}

footer .socialmedia2 li:hover {
  background-color: #fbb040;
}

footer .socialmedia2 a {
  color: blue;
}

.menubody {
  display: grid;
  grid-template-columns: 1fr 4fr 4fr 1fr;
  grid-template-rows: 150px 75px 100px 1fr 1fr 1fr 1fr 150px;
  grid-template-areas: "header header header header" "nav nav nav nav" ". title title ." ". apps apps." ". entree entree ." ". sides sides ." ". desrt desrt ." "footer footer footer footer";
  background-image: linear-gradient(#fbb040, #fbb040, #e6e7e8, #fbb040, #fbb040);
  background-repeat: no-repeat;
  column-gap: 15px;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.menubody section h2, .menubody section .aboutusbody .history p, .aboutusbody .history .menubody section p {
  background-color: #b38d5d;
  color: white;
  font-size: 2.5em;
  font-family: 'Cherry Swash', cursive;
  margin-top: 10px;
  margin-bottom: 20px;
}

.menubody section .item {
  display: flex;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.6);
  margin: 15px;
}

.menubody section .item img {
  max-width: 266.66px;
  height: 100%;
}

.menubody section .item h3, .menubody section .item p {
  font-size: 2em;
  color: white;
  margin-top: 20px;
  margin-right: 260px;
}

.menubody section .item p {
  font-size: 1.5em;
  padding: 20px 30px 20px 30px;
  text-align: left;
  margin-right: 0;
}

.menubody .title {
  grid-area: title;
  font-size: 3em;
  margin-top: 25px;
}

.menubody .apps {
  grid-area: apps;
  display: block;
}

.menubody .entree {
  grid-area: entree;
}

.menubody .sides {
  grid-area: sides;
}

.menubody .desrt {
  grid-area: desrt;
}

.aboutusbody {
  display: grid;
  grid-template-columns: 1fr 3fr 3fr 1fr;
  grid-template-rows: 150px 75px 100px 1fr 1fr 1fr 150px;
  grid-template-areas: "header header header header" "nav nav nav nav" ".  title title ." ". aboutpic abouttxt ." ". history history ." ". history history ." "footer footer footer footer";
  column-gap: 15px;
  justify-content: center;
  align-content: center;
  text-align: center;
  background-image: linear-gradient(lightblue, yellow, red, blue);
  background-repeat: no-repeat;
}

.aboutusbody .title {
  grid-area: title;
  text-align: center;
  margin-top: 25px;
  font-size: 3em;
}

.aboutusbody .aboutpic {
  grid-area: aboutpic;
  display: flex;
  padding: 25px;
  justify-content: center;
}

.aboutusbody .aboutpic img {
  width: auto;
  max-height: 700px;
}

.aboutusbody .abouttxt {
  grid-area: abouttxt;
  display: flex;
  width: 100%;
  height: 50%;
  margin-top: 200px;
  margin-bottom: 150px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 2em;
  font-family: 'Crimson Text', serif;
}

.aboutusbody .history {
  grid-area: history;
  margin: 165px 150px 0px 150px;
  padding: 25;
  justify-content: center;
  align-content: center;
}

.aboutusbody .history img {
  width: auto;
  max-height: 700px;
  padding-top: 40px;
}

.aboutusbody .history h2, .aboutusbody .history p {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 3em;
  font-family: 'Crimson Text', serif;
  padding: 20px 150px;
}

.aboutusbody .history p {
  font-size: 2em;
}
/*# sourceMappingURL=main.css.map */