/* Container holding the image and the text */
.containerz {
    position: relative;
    text-align: center;
    color: white;
  }
  
  /* Bottom left text */
  .bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
  }
  
  /* Top left text */
  .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    
  }
  
  /* Top right text */
  .top-right {
    position: absolute;
    top: 8px;
    right: 16px;
  }
  
  /* Bottom right text */
  .bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
  }
  
  /* Centered text */
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Klinic Slab; 
    font-style: Bold;
    font-size: 500%;
    color: #7b573e;
    background-color: #D8C6B8; /* this is the background color of the box around the text, cannoli */
} 
  






/* headers & paragraph */
h1 {
    font-family: Klinic Slab; 
    font-style: Bold;
    font-size: 300%;
    color: #5e1211;
}
    h3 {
    font-family: Klinic Slab; 
    font-style: Book;
    font-size: 180%;
    color: #5e1211;
    } 
p {
    font-family: Klinic Slab;
    font-style: normal;
    font-size: 150%;
    color: #7b573e;
}
blockquote {
    font-family: Klinic Slab;
    font-style: normal;
    font-size: 150%;
    color: #7b573e;
}

/* Content to be on the side of other information (if needed) */
article {
  float: right;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  
}









/* Navigation */
ul {
    list-style-type: none; /*this removes the bullets from the list */
    margin: 0;
    padding: 0;
    }
ul {
    font-family: Klinic Slab; /*this creates the font styling */
    font-style: Bold;
    font-size: 125%;
    color: #5e1211
}
    li {
    display: inline-block; /* this makes the links horizontal */
    } 
    li a {
        color: #5e1211; /*this is the font color and it is  whine from brand stying guide */
        padding: 8px; /*this is the padding around the text which creates
        that box */
        background-color: #D8C6B8; /* this is the background color of the box around the text, cannoli */
        } 





        * {
          box-sizing: border-box;
        }
        
        /* Style the search field */
        form.example input[type=text] {
          padding: 10px;
          font-size: 17px;
          border: 1px solid grey;
          float: left;
          width: 80%;
          background: #f1f1f1;
        }
        
        /* Style the submit button */
        form.example button {
          float: left;
          width: 20%;
          padding: 10px;
          background: #2196F3;
          color: white;
          font-size: 17px;
          border: 1px solid grey;
          border-left: none; /* Prevent double borders */
          cursor: pointer;
        }
        
        form.example button:hover {
          background: #0b7dda;
        }
        
        /* Clear floats */
        form.example::after {
          content: "";
          clear: both;
          display: table;
        }
        
        






        /*simple butons for contact and other */

        .button {
          border: 2px  #7b573e;
          color: #D8C6B8;
          padding: 16px 32px;
          text-align: left;
          text-decoration: none;
          display: inline-block;
          margin: 4px 2px;
          transition-duration: 0.4s;
          cursor: pointer;
        }
        
        .button1 {
          background-color: #7b573e;
          color: #D8C6B8;
          border: 2px solid #7b573e;
          font-family: Klinic Slab;
         font-style: normal;
          font-size: 150%;
        }
        
        .button1:hover {
          background-color: #D8C6B8;
          color: #7b573e;
          border: 2px solid #7b573e;
          font-family: Klinic Slab;
         font-style: normal;
          font-size: 150%;
        }
        
        .button2 {
          background-color: #5e1211;
          color: #543136;
          border: 2px solid #D8C6B8;
        }
        
        .button2:hover {
          background-color: #D8C6B8;
          color: #5e1211;
        }





        

/* menu design */
        /* Container needed to position the button. Adjust the width as needed */
.container {
  position: relative;
  width: 50%;
  max-width: 200px;
  display: inline-block;
}

/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}

/* Style the button and place it in the middle of the container/image */
.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #7b573e;
  color: #D8C6B8;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-family: Klinic Slab;
    font-style: normal;
    font-size: 150%;
   
}

.container .btn:hover {
  background-color: #543136;
}











/* Footer */
        footer {
            font-family: Klinic Slab;
            font-style: normal;
            font-size: 150%;
            background-color: #7b573e; /* this is the cafe color */
            color: #D8C6B8; /* this is the cannoli color */
            margin: 0px;
            }