.main-container-container {
  margin: auto auto 4rem auto;
}

.main-container {
  background-color: #303030;
  padding: 1.8rem 1.8rem 2rem 1.8rem;
  width: max-content;
  box-sizing: content-box;
  margin: auto auto 1.7rem auto;
}

.active-main-container {
  box-shadow: 0rem 0rem 1rem 0.8rem #727b7e;
  box-sizing: border-box;
}

* {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  box-sizing: content-box;
  margin: 0;
}

#header-container {
  width: 90%;
  padding: 3rem 0 2rem 0;
}

#button-addCalc {
  padding: 1rem;
  background-color: #4bae7d;
  font-size: 2rem;
  width: fit-content;
  width: -moz-fit-content;
  color: #232323;
}

#calculators-container {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}

#button-addCalc:active {
  background-color: #3b8862;
}

.remove-button {
  width: fit-content;
  width: -moz-fit-content;
  height: fit-content;
  height: -moz-fit-content;
  background-color: #eb6767;
  color: #232323;
  padding: 0.7rem;
  font-size: 1.5rem;
}

.remove-button:active {
  background-color: #a54a4a;
}

.calculator-name {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 0;
  margin: 0;
  color: #cccccc;
}

.result-box {
  height: 7rem;
  padding: 0 0.5rem 0 0.5rem;
  margin: 0.2rem auto 0.6rem auto;
  background-color: #272727;
  color: #cccccc;
  font-size: 3.9rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}

button {
  /* All buttons */
  background-color: #303030;
  color: #cccccc;
  height: 5rem;
  width: 6.5rem;
  font-size: 2.25rem;
  border: 0.19rem solid #232323;
  border-bottom: 0.19rem solid #191919;
}

button:active {
  transform: translateY(0.1rem);
  background-color: #b1571c;
  border-color: #191919;
}

.button-active {
  transform: translateY(0.1rem);
  background-color: #b1571c;
  border-color: #191919;
}

.active-operator-button {
  background-color: #191919;
  border-color: #191919;
}

.clear {
  /* Clear Button */
  background-color: #ea9090;
  color: #232323;
  border-color: #e26565;
  border-bottom-color: #da3a3a;
}

div>.clear:active {
  background-color: #e26565;
  border-color: #e26565;
}

.clear-active {
  transform: translateY(0.1rem);
  background-color: #e26565;
  border-color: #e26565;
}

.calculate {
  /* Equal button */
  background-color: #90cfb0;
  color: #232323;
  border-color: #6cc097;
  border-bottom-color: #4bae7d;
}

button.calculate:active {
  background-color: #4bae7d;
  border-color: #4bae7d;
}

.calculate-active {
  transform: translateY(0.1rem);
  background-color: #4bae7d;
  border-color: #4bae7d;
}

.grid-4x4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}

/* Bottom Row */
.grid-bottom {
  display: grid;
  grid-template-columns: calc(2 * (100% - 2 * 0.43rem) / 4 + 0.3rem) 1fr 1fr;
  margin: 0.3rem auto auto auto;
  gap: 0.3rem;
}

/* Button 0 Wider */
.grid-bottom>.button-zero {
  width: 100%;
}