:root {
  /* CSS HEX */
  --function-keys: #52c9dcff;
  --body: #b4dde5ff;
  --numeric-keys: #f2f8fbff;
  --calculator-container: #fff;
  --border-top: #f4f9fc;
  --alice-blue: #f2f8fbff;
  --jet: #2f313cff;
  --alice-blue-2: #f2f8fcff;
}

.dark-theme {
  --body: #2f313cff;
  --numeric-keys: #1e2435ff;
  --calculator-container: #1a1b28ff;
  --border-top: #1d2232;
  /* CSS HEX */
}

/* || RESET */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  display: grid;
  place-content: center;
  background: var(--body);
  min-height: 100vh;
  font-size: 16px;
}
#theme-toggler {
  position: absolute;
  top: 0.6rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
}
main {
  display: flex;
  flex-direction: column;
  padding: 0 1rem 1rem 1rem;
  width: 30rem;
  height: 50rem;
  border-radius: 0.5rem;
  background: var(--calculator-container);
}
.display {
  height: 40%;
  width: 100%;
}
input {
  width: 100%;
  text-align: right;
  padding: 0 1rem;
  border: none;
  outline: none;
  background: transparent;
}
.display-flex {
  display: flex;
  height: 80%;
  width: 100%;
}
.equals-sign {
  display: none;
  place-content: center;
  color: var(--function-keys);
  font-size: 3rem;
  font-weight: 900;
  margin-left: 0.3rem;
}
.display .solution {
  height: 100%;
  font-size: 3.5rem;
}
.display .operation {
  height: 20%;
  font-size: 1.7rem;
  border-top: 0.063rem solid var(--border-top);
}
.buttons-section {
  height: 60%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  height: 20%;
  width: 100%;
}
.buttons {
  flex: 1;
  color: #000;
  background: var(--numeric-keys);
  border: none;
  margin: 0.3rem;
  border-radius: 0.3rem;
  font-size: 1.5rem;
  font-weight: bold;
}
.function,
.operator-key {
  background: var(--function-keys);
  color: #fff;
}

/* || MOBILE DEVICE BREAKPOINT */
@media (min-width: 300px) and (max-width: 400px) {
  main {
    width: 85vw;
    height: 80vh;
  }
  #theme-toggler {
    top: 0.5rem;
    right: 0.5rem;
  }
  .display-flex {
    height: 70%;
  }
  .display .solution {
    font-size: 3.1rem;
  }
  .display .operation {
    height: 30%;
    font-size: 1.35rem;
  }
}
@media (min-width: 400px) and (max-width: 800px) {
  main {
    width: 90vw;
    height: 85vh;
  }
  #theme-toggler {
    top: 0.5rem;
    right: 0.5rem;
  }
  .display-flex {
    height: 70%;
  }
  .display .solution {
    font-size: 3.1rem;
  }
  .display .operation {
    height: 30%;
    font-size: 1.35rem;
  }
}