/* css variables for colors */
:root {
  --lightblue: #e3f2fd;
  --orange: #FF7043;
}

body {
  background-color: var(--lightblue);
  font-family: "Questrial", sans-serif;
  font-size: 0; /* removes space between buttons */
  text-align: center;
  font-weight: lighter;
  color: var(--lightblue);
}

h1 {
  color: #FF7043;
  font-size: 3rem;
  text-transform: none;
}

/* main app container for calculator itself*/
.container {
  background-image: linear-gradient(to right, red, orange);
  width: 20rem;
  height: 30rem;
  position: relative;
  text-align: center;
  padding: 2.5rem 3.6rem 4.6rem 3.6rem;
  margin: auto;
}

.screen {
  width: 18.65rem;
  height: 3.5rem;
  border-bottom: 2px solid var(--lightblue);
  padding: 0.7rem;
}

#output {
  font-size: 2.3rem;
}

#history {
  font-size: 1.8rem;
  float: right;
  opacity: 0.9;

}

button {
  width: 5rem;
  height: 5rem;
  color: var(--lightblue);
  font-size: 1.75rem;
  font-family: "Questrial", sans-serif;
  line-height: 4rem;
  border: 1px solid;
  outline: none;
  padding: 0.7rem;
  cursor: pointer;
  background: transparent;
}

button:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#clear {
  width: 10rem;
  margin-top: 0.6rem;
}

#clear, #backspace {
  font-size: 1.6rem;
}