.calculator .first-rounded {
  background: linear-gradient(
    180deg,
    #ced6d9 0%,
    rgba(242, 244, 245, 0.839) 67%,
    transparent 100%
  );
  margin-bottom: 4em;
}

.btn-tag {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  font-size: 1em;
  min-width: 7.3em;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.45) 30%,
    rgba(245, 245, 245, 1) 50%,
    rgba(215, 215, 215, 1) 100%
  );
  background-position: 0 0;
  background-size: auto 300%;
  transition: 0.3s;
  padding: 0.5em 1em;
  color: var(--darkgray);
}

.btn-tag:hover,
.btn-tag:focus {
  color: var(--darkgray);
  background-position: 0 85%;
}

.btn-tag.active {
  background: var(--softblue);
  color: #fff;
}

.calculator-box {
  background-color: rgba(255, 255, 255, 0.59);
  box-shadow: 5px 3px 20px rgba(200, 207, 208, 0.59);
}

.calculator-box input[type="text"] {
  border: 0;
  outline: none;
  background: linear-gradient(0deg, transparent 2px, transparent 0) bottom
      center / 0 100% no-repeat,
    linear-gradient(0deg, var(--darkgray) 1px, transparent 0) bottom center /
      100% 100% no-repeat;
  transition: background 0s ease-out;
}

.calculator-box input[type="text"]:focus {
  background-image: linear-gradient(0deg, var(--softblue) 2px, transparent 0),
    linear-gradient(0deg, var(--darkgray) 1px, transparent 0);
  background-size: 100% 100%, 100% 100%;
  transition-duration: 0.3s;
}

.calculator-box .btn-default.active {
  color: #fafafa;
  background-image: none;
}

.calculator-result {
  border-top: 1px solid var(--softblue);
  background: linear-gradient(
    180deg,
    #e9f3f7 0%,
    #f5feff 36%,
    #ddf6fc 76%,
    #d1eaf7 100%
  );
}

.calculator-result .text-focus {
  color: #25a7b7;
}

@media screen and (min-width: 768px) {
  .calculator-result {
    border-top: 0;
    border-left: 1px solid var(--softblue);
    background: linear-gradient(
      180deg,
      #e9f3f7 0%,
      #f5feff 36%,
      #ddf6fc 76%,
      #d1eaf7 100%
    );
  }
}

.projects {
  background: #fff
    linear-gradient(
      180deg,
      rgba(169, 209, 224, 0.63) 0%,
      rgba(245, 254, 255, 0.63) 36%,
      rgba(221, 246, 252, 0.63) 68%,
      rgba(62, 142, 184, 49%) 100%
    )
    0% 0%;
  padding: 4em 0;
  border-radius: 2em;
}

@media screen and (min-width: 768px) {
  .projects {
    border-radius: 3.4em;
  }
}