body {
  background-color: lightblue;
}

.help{
   color: red;
   font-size: 24px;
   font-family: Arial, Helvetica, sans-serif;
   margin-left: 20px;
}

.summary{
   position: absolute;
   top:500px;
   left: 60px;
   color: red;
   font-size: 24px;
   font-family: Arial, Helvetica, sans-serif;
}

h1 {
  color: navy;
  margin-left: 20px;
  font-size: 36px;
  font-family: Arial, Helvetica, sans-serif;
}

.value{
  color: black;
  text-align: center;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid grey;
}

.total{
  color: black;
  text-align: center;
  font-size: 60px;
  font-family: Arial, Helvetica, sans-serif;
  border: 0px solid red;
}

.bit {

  text-align: left center;
  color: red;
  border: 0px solid red;
 
}


.grid-container {
  display: inline-grid;
  grid-template-columns: 30px 63px 63px 63px 63px 63px 63px 63px 63px 160px;
  grid-template-rows: 40px 128px 40px 80px 80px;
  padding: 0px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.3);
  border: 0px solid rgba(0, 0, 0, 0.8);
  padding: 0px;
  font-size: 30px;
  text-align: center;
}

.nibble1{
  grid-column: 2/ span 4;
  grid-row: 4;
}

.nibble2{
  grid-column:6/ span 4;
  grid-row: 4;
}

.nibble1hex{
  grid-column: 2/ span 4;
  grid-row: 5;
}

.nibble2hex{
  grid-column: 6/ span 4;
  grid-row: 5;
}

.hexval{
    font-size:36pt;
    font-family: Arial, Helvetica, sans-serif;
    font-color: red;
}

.hex{
    visibility: hidden;
}
}