body {
  background-color: #7c898f;
  color: #d4e8f2;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 20px auto;
  max-width: 450px;
}

h1 {
  font-family: "Rock Salt", cursive;
  text-align: center;
  padding: 30px 0;
}

h4,
h5 {
  text-align: center;
  font-size: 16px;
  font-weight: 200;
}

h5 {
  padding-bottom: 25px;
}

footer {
  text-align: center;
  margin: 15px;
}

.footer-txt {
  font-size: 13px;
  font-weight: 200;
}

.footer-txt .link {
  color: #ffffff;
  text-decoration: none;
}

/* CALCULATOR BOX */
.calculator-box {
  max-width: 400px;
  padding: 20px;
  margin: 0 auto;
  border: 0.75px solid #b3c5ce;
  border-radius: 5px;
}

label {
  font-size: 15px;
  font-weight: 300;
}

.first-line {
  text-align: center;
}

.calculator-box .input-number {
  max-width: 70px;
  border-radius: 5px;
  border: none;
  outline: none;
  padding: 2px 5px;
}

.calculator-box .dropdown {
  width: 120px;
  border-radius: 5px;
  padding: 2px;
  outline: none;
}

.second-line,
.third-line {
  padding: 5px;
  text-align: center;
}

.calculator-box .btn {
  background-color: #7c898f;
  border: 1px solid #b3c5ce;
  border-radius: 5px;
  padding: 4px 12px;
  margin: 2px 0 0 5px;
  outline: none;
}

.forth-line {
  padding-top: 10px;
  text-align: center;
}

.fa-redo-alt {
  color: #b3c5ce;
}

.fa-search {
  color: #ffffff;
}

#result {
  text-align: center;
  margin: 20px 0 0;
  padding: 10px 0 2px;
  background-color: #b3c5ce;
  border-radius: 5px;
}

.result-txt {
  color: #7c898f;
}

#output {
  color: #000000;
}