form {
  width:95%;
  margin: auto;
  padding-bottom: 20px;

}
label{
  margin-right: 30px;
  width: 100%;
  margin: auto;
}
select{
  background-color: white;

  width: 100%;
  height: 30px;
}
input{
  width: 100%;
  height: 30px;
}
select, input{
  padding-left: 5px;
  box-sizing:content-box;
}

/*Table */
.gpaContent{  /*== homeContent*/
  padding-top: 85px;
}

.intro h2{
  text-align: center;
  font-family: monospace;
  font-weight:900;
  font-size: 2.5em;
  margin-bottom: 40px;
}

.tableResponsive{
  overflow-x:auto;
  margin: auto;
  width: 100%;
  margin-bottom: 16px;
}
.intro table{
  border-collapse: collapse;
  font-family: monospace;
  font-size: 1.28em;
  width:85%;
  margin: auto;
}

.intro thead{
  background-color: #262729;
  color: white;
}

.intro thead th{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
}
.intro tbody tr:hover{
  background-color: grey;
  color:white;

}
 .intro td {
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 15px;
 }
/*Table */

 .grade{
   font-family: monospace;
   font-size: 1.5em;

   border: 1px #262729 solid;
   margin-bottom: 20px;

   box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.4);
 }


.schoolTerm{
  background: #262729;
  color: white;
}
.schoolTerm p{
  padding-left: 20px;
  padding-top: 5px;
  padding-bottom: 5px;

}

.userInput{
  width: 80%;
  margin: auto;
  margin-bottom: 8px;
}


.modules{
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;

}
.oneModule{
  background-color: rgba(230, 231, 232, 0.24);
  box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
  padding-bottom: 10px;
  padding-top: 28px;
  padding-bottom: 20px;


}



.moduleButtonDiv, .calculateGPA, .addForm{
  width:60%;
  margin: auto;
}
.moduleButton, .calculateButton, .addFormButton{
  width: 100%;
  background-color: white;
  border: 1px solid black;
  cursor: pointer;
  font-family: monospace;
  padding: 2px;
}
.addForm{
  width:57%;
  margin-bottom: 30px;
}

.moduleButton:hover, .calculateButton:hover, .addFormButton:hover{
  background-color: black;
  color:white;
  transition: all 0.45s ease-in-out;
}

.calculateGPA{
  width: 85%;
}
.calculateButton{
  font-size: 1.5em;
  margin-bottom: 30px;


}

.gpaResult{
  text-align: center;
  font-size: 3em;
  font-family: text;
  margin-bottom: 100px;
  text-decoration: underline;

}


@media only screen and (min-width: 1000px){
  .gpaContent{
    display:  block !important;
  }
  .oneModule{
    display: flex;

  }
  .userInput{
    width:20%;
  }
}