html, body {
  height: 100%;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}

h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 20px 0;
}

#prev-display {
  text-align: right;
  height: 1em;
  border: 0;
  padding: 0.5em;
  background-color: #483D8B;
  color: white;
  margin-bottom: 0.2px;
}

#display-box {
  border: 0;
  height: 1em;
  padding: 0.5em;
  text-align: right;
  background-color: #6A5ACD;
  color: white;
  margin-bottom: 0.3px;
}

.inputs {
  display: flex;
}

.clear-buttons {
  display: flex;
  
}

.clear {
  flex-grow: 1;
}

.operands {
  display: flex;
  flex-wrap: wrap;
}

.digit {
  flex: 1 0 31%;
}

#sign {
  flex: 1 0 31%;
}

.operations {
  display: flex;
  flex-direction: column;
}

.clear, .digit, #sign, .operation {
  height: 50px;
  width: 25px;
  font-size: 20px;
  border: 0;
  margin: 0.5px;
}

.operation {
  width: 85px;
}

.digit, #sign {
  background-color: black;
  color: white;
}

.operation, .clear {
  background-color: #2F4F4F;
  color: white;
}

#equal {
  background-color: #008080;
  color: white;
}

button {
   transition: 0.3s;
}

button:hover, #equal:hover, #sign:hover {
  background-color: #808080;
}