/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/*
Pizza hut color palette:
Hex     RGB
#f1d0a2	(241,208,162)
#b42323	(180,35,35)
#840f0f	(132,15,15)
#650909	(101,9,9)
#1c0808	(28,8,8)

*/

body {
    background-image: url(plaid_background.png);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    
}

div {
    display: block;
}

.top {
    position: absolute;
    width: 100%;
    height:20px;
    background: url(lace_design_2.jpg);
    background-position-y: 20px;
    text-align: right;
    color: #fff;
    font-size: 0.875em;
}

header {
    height: 370px;
    width:100%;
    background-image: url(pizzaHutLight_banner.png);
    background-position: 0px -400px;
    background-size: cover;
    background-repeat: no-repeat;
}

.title {
    background: linear-gradient(to right, #b78239, #f1d0a2);
    max-height: 50px;
    text-align: right;
}

.title-text h1{
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
    -webkit-text-stroke: 6px #b42323;
    paint-order: stroke fill;
    color: #F0E2CE;
}

.title-pic {
    position: relative;
    height: 100px;
}

.title-pic img {
    height:100px;
    padding: 0%;
    margin: 0%;
    margin-top: -25px;
    background-color: #f1d0a2;
    border: 5px solid #f1d0a2;
    border-radius: 90px; 

}


.title-text, .title-pic {
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
}
/*Main body*/
.page-wrapper {
  padding: 0 100px;
  margin: 0 auto;
  }

/*Sidebar and Content boxes.*/
.sidebar {
  width: 320px;
  margin: 50px 0;
  position: absolute;
  }
  
.buttn{
  width:95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4px;
  padding:2px;
  text-align: center;
  font-size:15px;
 background: url(check.png);
 border-radius: 25px;
}

.content {
  padding: 0 0px 0px 18px;
  display: none;
  overflow: hidden;
  transition: ease-in 0.2s, ease-out 0.2s;
}

.sidebar p {
    -webkit-text-stroke: 4px #BD9264;  paint-order: stroke fill;
}
  
.sidebar h1 {
  font-size: 1.2rem;
   -webkit-text-stroke: 5px #BD9264;  paint-order: stroke fill;color: #F0E2CE;margin:2px;
  background:#b78239;
  color: #fff;
  padding: 12px 10px 10px 10px;
  margin: auto;
  }
  
.inner h1{ 
    -webkit-text-stroke: 5px #BD9264;
    paint-order: stroke fill;
    color: #F0E2CE;
    margin:2px;
    padding:15px 0px 15px 0px;
}
  
.inner p {
 color: #F0E2CE;
}

  
.sidebar a:hover, .sidebar a:focus {
 color:#5C371B;
  transition: ease-in-out 0.2s;
}
  
.sidebar, .main {
  display: inline-block;
  }

.main {
  margin: 50px 100px 50px 350px;
  width: auto;
  width: calc(100vw - 550px);
}

.main .inner {
    max-height: 700px;
    overflow-y: scroll;
}

.main .inner p {
    font-size: 15px;
    /*-webkit-text-stroke: 2px #BD9264;
    paint-order: stroke fill;*/
    color: black;
}
  
  
/*Basic boxes of content*/
.box {
  margin-bottom: 25px;
  border: 1px solid #000;
  border-radius: 10px;
  }
  
/*Inner content div for boxes. Padding goes here so sidebar headers etc can keep their no-margin look.*/
.inner {
  background:  #ffffff;
  padding: 10px 25px;
  border-radius: 10px;

  }

.inner img {
  max-width: 100%; /*Prevent image overflow.*/
  height: auto;
  border-radius: 5px; /*Give images in content rounded corners.*/
  }