/* Customize the font and colors */
body {
  font-family: 'Helvetica Neue', sans-serif;
  color: #444;
  background-color: #f5f5f5;
}

h1, h2, h3 {
  color: #27a6dd;
}

/* Style the form */
.form-control {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

/* Style the buttons */
.btn {
  margin-right: 10px;
  /* top spacing */
  margin-top: 10px;
}

.btn-primary {
  background-color: #27a6dd;
  border-color: #27a6dd;
}

.btn-primary:hover {
  background-color: #286090;
  border-color: #204d74;
}

.btn-secondary {
  background-color: #ccc;
  border-color: #ccc;
}

.btn-secondary:hover {
  background-color: #b3b3b3;
  border-color: #b3b3b3;
}

/* Style the results section */
#result {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 20px;
  display: none;
  text-align: center;
}

#result h2 {
  margin-top: 0;
}

#result p {
  margin-bottom: 5px;
  font-weight: bold;
}

#information {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 20px;
  display: none;
  text-align: center;
}
.logo {
  display: block;
  margin: 20px auto;
  max-width: 60%;
  height: auto;
}

/* center h1 */
h1 {
  text-align: center;
}
#calculator_area {
  width:100%;
  height: auto;
  margin: auto;
}

@keyframes growAndShrink {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
  125% {transform: scale(1.1);}
}

#main_results {
  animation-name: growAndShrink;
  animation-duration: 2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  margin-bottom: 10px;
}