/* I've commented each section for learning purposes */


h1 {
  color: #5c609c;
}

/* Box around form. The calc function is used to adjust the box when a new
 * element is added or deleted.
 */
#form {
  background-color: #deddd9;
  background-size: contain;
  border-radius: 1em;
  width: 30em;
  height: calc(100%em);
  padding: 1em 1em;
}

/* .inputs{
  background-color:red;
  border-radius: 1em;
  width: 30em;
  height: 3em;
  border-radius: none;
} */

/* Adds space between label and text input box */
#form_inputs label {
  margin-right: 1em;
}

/* Used to have input boxes side by side and to space them out */
.grade_field {
  margin-right: 1em;
  float:left;
}

/* Put input box next to grade and add space between '%' and 'remove' button */
.weight_field {
  margin-right: 5em;
  float:left;
}

/* Used to create input boxes on a new line */
.clear {
  clear:both;
}

button {
  cursor: pointer;
  background-color: white;
  border-radius: 0.5em;
  color: black; /*color refers to text*/
  padding: 0.5em 0.75em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.75em;
  transition-duration: 0.2s;
}

button:hover {
  color: white;
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.24), 0 10px 30px 0 rgba(0,0,0,0.19);
}

#add_btn {
  border: 2px solid #008CBA;
}

#add_btn:hover {
  background-color: #008CBA;
  transform: translateY(4px);
}

#calc_btn {
  border: 2px solid #4CAF50;
}

#calc_btn:hover {
  background-color: #4CAF50;
}

.remove_btn {
  border: 2px solid #f44336;
}

.remove_btn:hover {
  background-color: #f44336;
}