/*The background of the entire webpage. The html is what everything else is contained in*/
html {
margin:0;
padding:0;	
WIDTH:980PX;
 MARGIN:0 auto;
}

/*This coding means that the background of my website will move and be responsive as the size of the webpage changes*/
 body{
   background: url(../Images/pizza-background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*The styling for the whole page itself. The black is the website colour*/
main { BACKGROUND-COLOR:RGBA(0,0,0, 0.7);
OVERFLOW:HIDDEN;
width:100%;
}
/*The styling for the nav bar and not the actual buttons but the container they are contained within*/
nav {
  width: 260px;
  height: 900px;
  background:white;
  font-size:1.1em;
  border-right: 20px ridge silver;
  display:inline;
  float:left
  }
 
#send_button {
max-width: 30px;
max-height: 20px;
font-size: 1em;
}
/*The styling for the top title on the page itself*/
h1 {
/*Centres the h1 title*/
  margin: 0 auto;
  text-align: center;
  font-size: 2em;
  letter-spacing: .3rem;
  color: white;
  background-image: url("../Images/flame2.png");
  background-repeat: no-repeat;
  height: 60px;
  PADDING-TOP:10PX;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Copperplate gothic light';
  text-shadow: 0 1px 0 #ccc, 0 2px 0 cyan, 0 3px 0 #bbb, 0 4px 0 cyan, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
  }
/*The styling for the 2 different kinds of images I have displayed in the <article> portion of the pages*/
#pizza{ 
  width: 100%;
  margin-left:10px;
  border-radius: 40px;
  }
#staff {
  height: 150px;
  border-radius: 20px;
  margin: 10px;
}  
/*h2 is the text displayed in the <article> portion of the pages*/
h2{
width: 100%;
color: white;
font-size:1.3em;
font-weight: bold;
font-family: Helvetica;
margin-left: 10px;
}
/*this styles the whole article container*/
article {
	width:600px;
	float:left;
	margin-left: 10px;
}	
/*makes sure there are no bulletpoints and neatens up the buttons with no overflow*/
li a {text-decoration:none; margin:30px 0;
      overflow: hidden;
	  }
/*the style which dictates how the button looks when the cursor hovers over it*/	  
button:hover {
  background: black;
  color: white;
}	
/*the styling of the actual button itself*/  
button {
    margin-left:30px;
    position: relative; 
    background: none center center no-repeat;
    background-size: cover; 
    border: 2px solid black;
    text-transform: uppercase;
    letter-spacing: .3rem; 
    padding: 20px 15px;
    max-width: 200px;
    min-width: 200px;
	max-height: 70px;
	min-height: 70px;
    cursor: pointer;
    overflow: hidden; 
    -webkit-transition: border 1s cubic-bezier(0.19,1,.22,1),color .6s cubic-bezier(0.19,1,.22,1);
    transition: border 1s cubic-bezier(0.19,1,.22,1), color .6s cubic-bezier(0.19,1,.22,1), background 5s cubic-bezier(0.19,1,.22,1);
}
/*the font and colour of the buttons*/
button a {
    color: #969696;
    font-family: 'Varela Round';
    text-decoration: none;
}
/*This style is of the fading in and out of the button's colour from hovering or taking your cursor away*/
button .mask {
    background: #fff;
    background: rgba(255,255,255,0.5);
    position: absolute;
    display: block;
    width: 200px;
    height: 100px;
    -webkit-transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
    transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
    -webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1);
    transition: all 1.1s cubic-bezier(0.19,1,.22,1);
}

li {margin:30px -40px;}

/* Stack the layout on small devices/viewports. */
@media all and (max-width: 320px) {
main, article {width: 50%;}
h1 {width: 50%; font-size: 1em; margin-right: 320px;}
}