body {
  background-color: #eae7dc;
}
.mainDiv {
  margin: auto;
  margin-top: 1.5%;
  background-color: #f3f2f2;
  padding: 2%;
  padding-top: 0.5%;
}

h1, .modalHeading {
  font-family: fantasy;
  color: #e8554a;
}

.navHeading {
  font-family: fantasy;
}

.navBar {
  background-color: #eae7dc;
}

.modalBody {
  background-color: #eae7dc;
}

form {
  background-color:rgb(177, 110, 16);
  padding: 2%;
  border: solid #e6e6e6 1px;
}

small {
  color: #5f666d;
}

section {
  background-color:rgb(154, 177, 114);
  padding: 2%;
  padding-bottom: 0.5%;
  border: solid #e6e6e6 1px;
}

.sub-heading {
  color: #ea6a61;
}

#totalSection {
  margin-top: 1%;
  border-bottom: none;
}

#billAmount, #tipPercent {
  padding-left: 12px;
  padding-right: 12px;
}

#totalTip, #totalPrice, #splitTip, #splitPrice {
  font-size: 105%;
}

#splitBox, .splitBoxLabel {
  cursor: pointer;
}

#calculate {
  background-color:rgb(78, 6, 49);
  color: #ffffff;
  padding: 6px 10px 6px 10px;
  border: solid rgba(0,0,0,.1) 1px;
}

#calculate:hover {
  background-color:rgb(93, 11, 64);
  background-color:rgb(162, 125, 122);
}

.navBar a:hover {
  text-decoration: underline;
}

#guideLinks {
  background-color:rgb(130, 235, 181);
}

#guideLinks li {
  list-style-type: circle;
}

#guideLinks a, .credits a {
  text-decoration: none;
}

#tipMap {
    width: 100%;
    display: block;
    margin: auto;
    margin-top: 1%;
}

#tipInfo {
    width: 70%;
    display: block;
    margin: auto;
}

.credits {
  font-size: 10px;
  margin-bottom: 1%;
}

@media screen and (min-width: 600px) {
  
  #tipMap {
    width: 100%;
  }

  #tipInfo {
    width: 80%;
  }
  
}

@media screen and (max-width: 640px) {
  #tipMap {
    width: 100%;
  }

  #tipInfo {
    width: 80%;
  }
}

@media screen and (min-width: 760px) {
  #tipMap {
    width: 90%;
  }

  #tipInfo {
    width: 70%;
  }
  
}

@media screen and (min-width: 980px) {
  #tipMap {
    width: 60%;
  }

  #tipInfo {
    width: 40%;
  }
  
}