* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  background-color: rgb(215, 233, 250);
  height: 100vh;
  margin: 0;
}

header {
  text-align: center;
  text-shadow: 2px 2px rgb(182, 70, 108);
  font-family: 'Fredoka', sans-serif;
  font-size: 80px;
  font-weight: 200;
  color: rgb(240, 139, 166);
  padding: 20px;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px;
  flex: 1;
}

.calculator {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgb(244, 177, 188);
  border-radius: 16px;
  box-shadow: -4px -4px 16px rgb(167, 179, 210);
  width: 480px;
  height: 590px;
  padding: 10px;
}

.display {
  display: flex;
  flex-direction: column;
  justify-content: end;
  flex: 1;
  text-align: right;
  font-family: 'Orbitron', sans-serif;
  background-color: rgb(249, 245, 247);
  color: rgb(66, 63, 63);
  border-radius: 16px;
  box-shadow: 0 0 8px rgb(181, 179, 179) inset;
  padding: 20px;
  margin: 20px;
  overflow: hidden;
}

.input {
  font-size: 44px;
}

.history {
  font-size: 16px;
}

.button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 20px;
  gap: 20px;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Quicksand', sans-serif;
  font-size: 24px;
  color: rgb(72, 69, 69);
  box-shadow: -3px -3px 8px rgb(219, 155, 167);
  border-radius: 20px;
  border: none;
  width: 88px;
  height: 64px;
}

.number,
.decimal {
  background-color: rgb(246, 233, 245);
}

.function-keys {
  background-color: rgb(250, 228, 213);
}

button:hover {
  transform: translateY(-2px);
}

.number:hover,
.decimal:hover {
  background-color: rgb(250, 203, 211);
}

.function-keys:hover {
  background-color: rgb(252, 198, 162);
}

footer {
  text-align: center;
  font-family: 'Roboto Mono', monospace;
  background-color: rgb(255, 255, 255);
  color: rgb(72, 69, 69);
  padding: 16px;
}