.extra-buttons {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-bottom: 1.6rem;
}

.second-calculator {
  overflow: hidden;
  transition: max-width 0.3s ease-in-out;
  max-width: 0;
  color: var(--white);
  border-left: 1px solid var(--mid-gray);
  padding: 0rem 3.2rem 3.2rem 3.2rem;
  margin-left: 1.6rem;
  transition: 0.3s ease-in-out;
  transition-property: border padding margin max-width;
}

.second-calculator.hidden {
  border: 0px solid rgba(0, 0, 0, 0);
  padding: 0 0 3.2rem 0;
  margin: 0;
}

.second-calculator > .container {
  min-width: 32rem;
}

.second-calculator strong,
.second-calculator h2 {
  font-weight: 500;
}

.second-calculator h2 {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}
.second-calculator h3 {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.second-calculator p {
  width: 32rem;
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}

/* algorthym illustration */
.shunting-yard-container {
  position: relative;

  display: flex;
  flex-direction: column;
  width: 100%;
}

span.op {
  width: 2rem;
  padding: 0.5rem;
  height: 2rem;
  min-height: 2rem;
  min-width: 2rem;
  border: 1px solid var(--purple);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  background: linear-gradient(#424242, #2d2a37);
  overflow: hidden;
  animation: appear 0.4s ease-in-out;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes appear {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  10% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
  }
}

.stack-container {
  width: 50%;
  border-right: 2px solid var(--light-purple);
  display: flex;
  justify-content: flex-end;
  height: 10rem;
  padding: 0.4rem;
  max-height: 15rem;
  overflow-y: auto;
}

.stack-container .label {
  position: absolute;
  left: 2rem;
  bottom: 3.2rem;
  font-size: 1.4rem;
}

.input-output-container {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-bottom: 2px solid var(--light-purple);
  height: 6.4rem;
  align-items: flex-end;
  padding: 0.4rem;
}

.number-output,
.number-input {
  display: flex;
  gap: 0.2rem;
  width: 15rem;
  max-width: 15rem;
  overflow-x: auto;
  overflow-y: visible;
}

.number-output {
  justify-content: flex-start;
}

.number-input {
  justify-content: flex-end;
}

.input-output-container .direction {
  position: absolute;
  top: -0.8rem;
  left: calc(50% - 1.6rem);
  font-size: 2.4rem;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-output-container .label {
  position: absolute;
  font-size: 1.4rem;
  top: 0;
}

.input-output-container .label.output {
  left: 20%;
}

.input-output-container .label.input {
  right: 20%;
}

.number-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.2rem;
}