<div id="app"></div>

html {
	height:100%;
	width:100%;
body {
	padding:0;
	margin:0;
	height:100%;
	font-family: sans-serif;
	background-image: url("https://st2.depositphotos.com/3242059/8796/v/450/depositphotos_87964658-stock-illustration-seamless-geometric-vintage-pattern.jpg");
	display: flex;
	justify-content: center;
	align-items: center;
	#app {
		max-width: 600px;
		padding: 50px;
		background: white;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
		div {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			p {
				font-size: 24px;
				width: 100%;
			}
			button {
				background-image: url("https://www.transparenttextures.com/patterns/pinstriped-suit.png");
				background-color: #fd84ee;
				font-size: 24px;
				color: rgba(255, 255, 255, 0.75);
				border: none;
				margin: 10px;
				padding: 10px;
				box-shadow: 5px 5px 0 #27057e;
				cursor:pointer;
				position: relative;
				top: 0;
				left: 0;
				transition: all 0.2s;
				&:active {
					top: 5px;
					left: 5px;
					box-shadow: 0 0 0 #27057e;
				}
			}
		}
	}
}
}

class Pizza extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHungry: true,
      topping: "Pepperoni",
      slices: 8
    };
    this.eatSlice = this.eatSlice.bind(this);
		this.buySlice = this.buySlice.bind(this);
  }

  eatSlice() {
    const totalSlices = this.state.slices - 1;
    this.setState({
      slices: totalSlices
    });
  }
	
	buySlice() {
		const totalSlices = this.state.slices + 1;
		this.setState({
			slices: totalSlices
		});
	}

  render() {
    return (
      <div>
				<p>Are you hungry? {this.state.isHungry ? "Yes" : "No"}</p>
				<p>What topping do you want? {this.state.topping}</p>
				<p>Slices Left: {this.state.slices}</p>
				<Button action={this.eatSlice} label="Eat a slice" />
				<Button action={this.buySlice} label="Buy a slice" />
			</div>
    )
  }
}

const Button = ({ action, label }) => (
  <button onClick={() => action()}>{label}</button>
)

ReactDOM.render(<Pizza />, document.getElementById('app'));