/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
}


/******************************************
/* LAYOUT
/*******************************************/
body{
  margin: 5% 2% 2% 5%;
  /* border: solid thick black; */
}
header{
  border: solid thick black;
}
footer{
  margin-top: 2%;
  /* border: solid thick black; */
}
 .clearCompletedButt, .clearAllButt, .addItemButt{
  border: solid 1px black;
  line-height: 2.5;
  padding: 0 50px 0 50px;
  background-color: white;
 }
  .clearCompletedButt:hover, .clearAllButt:hover, .addItemButt:hover{
    background-color: gray;
  }
.buttonsDiv{
  display: grid;
  grid-template-columns: repeat(3, 33%);
  grid-template-rows: 100%;
  justify-items: center;
}
header span{
  font-family: Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  font-size: xx-large;
  display: flex;
  flex-flow: column;
  align-items: center;
}
main{
  border: solid thick black;
  margin-top: 2%;
  display: grid;
  grid-template-columns: 5% 5% 90%;
  /* grid-template-rows: repeat(11, 50px); */
  /* grid-template-areas: 
  'a b c'; */
  grid-auto-rows: auto;
}

.numberCol{
  border-bottom: solid 1px black;
  border-right: solid thick black;
  display: flex;
  align-items: center;
  justify-content: center;
  /* grid-area: a; */
  /* display: none; */
}
.leftColumn{
  border-right: solid thick black;
  border-bottom: solid 1px black;
  display: flex;
  justify-content: center;
  /* grid-area: b; */
}
.contentColumn{
  /* border-bottom: solid thick black; */
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
  /* grid-area: c; */
}
.clearCompletedButt, .clearAllButt, .addItemButt{
   font-family: Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
}
.inputBox{
  width: 100%;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/