<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Baker Clicker Clone</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" type="text/css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script src="script.js"></script>
  <!--  
  <style>
    .col-xs-4{
      padding:1px;
    }
  </style>-->

</head>

<body>
  <!--Header-->
  <div class="header">
    <div class="col-md-12">
      <h1>Civ Clicker Clone</h1>
    </div>
  </div>

  <!--Container-->
  <div class="container">
    <div class="row">
      <div class="col-md-6">

        <!--Material Generation-->
        <!--wood-->
        <div class="row">
          <div class="col-xs-4">
            <button id="chopWood" class="btn btn-primary btn-block">Chop Wood</button>
          </div>
          <div class="col-xs-4">
            <span id="woodAmount" class="btn btn-default btn-block disabled">0</span>
          </div>
          <div class="col-xs-4">
            <span class="btn btn-default btn-block disabled"><span id="woodIncrement">0</span><span>/5s</span></span>
          </div>
        </div>

        <!-- stone -->
        <div class="row">
          <div class="col-xs-4">
            <button id="mineStone" class="btn btn-primary btn-block">Mine Stone</button>
          </div>
          <div class="col-xs-4">
            <span id="stoneAmount" class="btn btn-default btn-block disabled">0</span>
          </div>
          <div class="col-xs-4">
            <span class="btn btn-default btn-block disabled"><span id="stoneIncrement">0</span><span>/5s</span></span>
          </div>
        </div>
        
        <!--Bread-->
        <div class="row">
          <div class="col-xs-4">
            <button id="makeCake" class="btn btn-primary btn-block">Make a Cake</button>
          </div>
          <div class="col-xs-4">
            <span id="cookieAmount" class="btn btn-default btn-block disabled">0</span>
          </div>
          <div class="col-xs-4">
            <span class="btn btn-default btn-block disabled"><span id="cookieIncrement">0</span><span>/5s</span></span>
          </div>
        </div>

      </div>
    </div>


  </div>
</body>

</html>
// Code goes here

/* Styles go here */

.header {
  text-align: center;
}

.container {
  padding: 25px;
}

.row {
  margin-bottom: 2px;
  text-align: center;
}

.col-md-6 {
  padding-left:25px;
  padding-right:25px; 
}

.col-xs-4 {
  padding-left: 1px;
  padding-right: 1px;
}

body{
  align:center;
}