.button1 
{font-size: 15px;
  border-radius: 12px;
  background-color: #4CA450;   
  display:block;
   
  padding: 5px;
  min-width:80px;
  min-height: 50px;
  margin: 15px;

}
  
.button1:disabled {opacity: .5}


body {
  margin:  auto;
  color: #323232;
  max-width: 100%;
  line-height: 1.6;
  padding: 1em 3em;
  background-color: #fff;
  font-family: 'Roboto', serif;
}
#gridBig
{
  display: inline-grid;
  grid-template-columns:   repeat(6,1fr); 
  
  grid-template-rows: 20px, 20px, auto auto auto auto;
  text-align: center;
  /* this is the whole, big grid.  */
 
}
.centerMult, .feedbackDiv 
{ 
  /* this is where the images will be.  In othe rbranches it will be number chart*/ 
  text-align:center;
  background-color:palevioletred;  grid-column-start: 2;
  grid-column-end: 4;
  
     
      
      min-width: 100px;
      

}
.centerMult 
{ 
  min-width: 200px;
 display: grid;
     grid-template-columns: repeat(10, minmax(10px, 1fr));
     /* grid-template-rows: repeat(10, minmax(10px, 1fr)); */
}
.directions 
{
  font-size: 20px;
    grid-column-start:1;
    grid-column-end:5; 
}
.inputPlace {

     display: inline-grid;
     grid-template-rows: auto auto;
    border-radius: 12px;
      grid-template-columns: 1fr 1fr 1fr; 
      background-color: powderblue;
    
    
    font-size: 2em;
    /* I*think* this will be the right size in real life.   also these are the columns for the outer div.  */
    text-align: center;
    grid-column-start:2;
    grid-column-end:5; 

    
    }
    #factor2
    /* that's the 2 x text and input.    */
    {
      grid-row: 2; 
      grid-column-start: 1;
      grid-column-end:4;
    
    }
    #factor, #multAnswer
    /* // these are the inputs   */
    {
      text-align: right;
      border-radius: 12px;
      height: 80px;
      width:  80px; 
      

    }
    .checkAnswer {
      /* background-color: gainsboro; */
      /* border: 4px solid black; */
        font-size: 3em;
    text-align: center; 
    }
#A1,#check2
{
  display: none;
}



/* this is for the new main page.    */
 
.grid-container {
  display: grid;
  grid-template-columns: minmax(60px,200px) auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 20px;
}

header, main  {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 10px 0;
  font-size: 30px;
  grid-column-start: 1;
  grid-column-end: 4;
}
.item2 {
  grid-column-start: 1;
  grid-column-end: 2;
  min-width:50px;
}
main
{ grid-column-start: 2;
  grid-column-end: 4;
}
 .pptImage
{height: 300px;
width: 400 px;}