html {
  --background-color: hsl(0, 0%, 25%);
  --prim-color: hsl(0, 0%, 35%);
  --secondary-color	:  hsl(0, 0%, 45%);
  --accent-color: hsl(10, 83%, 56%);
  --hover-color: hsl(0, 0%, 61%);
  --text-color: white;

  font-family:"Roboto", Arial, Helvetica, sans-serif;
}

.container {
max-width: 1024px;
margin: 10px auto;
padding: 0 1px;
}

.calculator {

  background-color: var(--background-color);
  padding: 10px;
}

/* History */
.history {
  width: 100%;
  height: 260px;
  background-color: var(--secondary-color);
  margin-bottom: 2px;
  color: var(--text-color);
  font-size: 1.5rem;

}

.history-parent {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;

}

.history-parent div {
  border-bottom: 1px solid black;
  margin: 5px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}


/* input */
.display-inp {
  width: 100%;
  height: 80px;
  background-color: var(--prim-color);
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: var(--text-color);
  padding: 1em;
}

/* Btn */
.calc-body .row{
  margin: 10px;
  display: flex;
  gap: 10px;
}

.row button {
  font-size: 1.5rem;
  padding: 0.5em;
  color: white;
  background-color: var(--prim-color);
  border-radius: 5px;
  width: 25%;
  overflow: hidden;
  }

.row .equal {
  background-color: var(--accent-color);
}

.row .num {
  background-color: var(--secondary-color);
}

button:hover, .num:hover {
  background-color: var(--hover-color);
}