/* LAYOUT STYLE GUIDE */

/* Keeps the webpage in the center of the screen. */
.center {
    background-color: white;
    padding: 0px;
     width: 70%;
    margin: auto;
    border: 30px solid rgb(207, 28, 68);
        }

/* Background for what's not included in the Center Class. */
body {
    background-color: rgb(216, 198, 184);
   background-size: 100%;
            }

/* Gives the webpage a grid layout. */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0px; /* shows line spaces */
  background-color: rgb(216, 198, 184); /* DELETE THIS LINE */ 
  padding: 1px;
}
.grid-container > div {
  background-color: white;
     text-align: center;
  padding: 20px 0;
}

                                                        /* GRID LAYOUT CODE */

/* Box 1: Logo */
.item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  border-bottom: 5px solid rgb(85, 50, 55);
   /* background-image: url("Images/HomePage/PASTAAMORE.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;*/
}

/* Box 2: Social Media */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}
.fa:hover {
    opacity: 0.7;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.item2 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    font-family: KlinicSlab;
    font-size:     20px;
    color: rgb(11,148,70);
    border-bottom: 5px solid rgb(85, 50, 55);
    border-left: 5px solid rgb(85,50,55);
}

/* Box 3: Filler */
.item3 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    border-bottom: 5px solid rgb(85, 50, 55);
}

/* Box 4: Buttons */
.item4 {
    grid-column-start: 1;
    grid-column-end: 4;
    font-family: "Goudy Old Style";
    border-bottom: 5px solid rgb(85, 50, 55);
}
input.MyButton {
width: 200px;
padding: 10px;
cursor: pointer;
font-family: "Goudy Old Style";
font-weight: bold;
font-size: 150%;
background: white;
color: rgb(11,148,70);
border: 1px  rgb(95, 19, 18);
border-radius: 10px;
-moz-box-shadow: 6px 6px 5px #999;
-webkit-box-shadow: 6px 6px 5px #999;
box-shadow: 6px 6px 5px #999;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
}
input.MyButton:hover {
color: white;
background:  rgb(207, 28, 68);
border: 1px solid #fff;
}
input.MyButton:active {
    background-color: rgb(11,148,70);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.item4 li {
    float: left;
    text-align: left;
}

/* Box 5: Specials */
.item5 {
    grid-column-start: 1;
    grid-column-end: 4;
}

/* Box 6: News */
.item6 {
    grid-column-start: 1;
    grid-column-end: 4;
    font-family: "KlinicSlab";
    font-size: 20px;
}

/* Box 7: Online Reviews */
.item7 {
    grid-column-start: 1;
    grid-column-end: 4;
}

/* Box 8: Home/Sitemap Buttons */
.item8 {
    grid-column-start: 1;
    grid-column-end: 4;
    background-color: rgb(207,28,68);
    border-bottom: 5px solid rgb(85, 50, 55);
}

/* Box 10: Sitemap */
.item10 {
    grid-column-start: 1;
    grid-column-end: 4;
}

/* Box 11: Vision */
.item11 {
    grid-column-start: 2;
    grid-column-end: 4;
}
                                                        /* Font Style Guide */

/* Defines the font name and connects to the font's file. */
@font-face {
    font-family: "KlinicSlab";
    src: url("Fonts/klinicslabbook.otf")
}

/* Approved Red Font */
.MarinaraRedFont {
    font-family: "Goudy Old Style";
    font-size: 25px;
    color: rgb(207,28,68);
}

/* Menu Font*/
.MenuGreenFont {
    font-family: "KlinicSlab";
    font-size: 28px;
    color: rgb(11,148,70);
}

/* Font used for the specials.html */
.SpecialsFont {
    font-family: "Goudy Old Style";
    font-size: 22px;
}
.NutritionFont {
    font-family: "Goudy Old Style";
    font-size: 30px;
    color: rgb(11,148,70);
}



                                                        /* Image alignment */

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.img {
    float: left;
}
.img2 {
    float: right;
}