* {
  margin: 0;
}

:root {
  --calc-border-radious: 10px;
  --orange-accent-color: rgba(248, 100, 55, 0.945);
  --brown-bg-color: rgba(25, 25, 25, 1);
  --bttn-hover: rgba(25, 25, 25, 0.95);
}

body {
  background-color: lightgray;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#calculator {
  height: auto;
  border-radius: var(--calc-border-radious);
  font-family: 'Yantramanav', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 395px;
}

.display {
  width: 365px;
  word-break: break-all;
  padding: 40px 15px;
  font-size: 48px;
  font-weight: 500;
  color: white;
  background-color: var(--brown-bg-color);
  text-align: right;
  border-radius: var(--calc-border-radious) var(--calc-border-radious) 0 0;
}

.separator {
  align-self: stretch;
  display: flex;
  justify-content: center;
  background-color: var(--brown-bg-color);
}

hr {
  border: 1px solid var(--orange-accent-color);
  width: 94%;
}

.calc-btn {
  border: 0;
  padding: 32px 42px;
  background-color: var(--brown-bg-color);
  font-size: 21px;
  color: white;
  font-family: 'Yantramanav', sans-serif;
  transition: background-color 1s linear;
}

.calc-btn-hover {
  background-color: var(--bttn-hover);
}

.button-press {
  background-color: rgba(25, 25, 25, 1);
  color: white;
  box-shadow: inset 0 0 10px rgb(44, 44, 44)
}

.buttons {
  display: grid;
  grid-template-areas: 
    "clear div   mul   bkspce"
    "seven eight nine  sub"
    "four  five  six   add"
    "one   two   three equals"
    "zero  zero  dot   equals";
}

.equals {
 grid-area: equals;
 background-color: var(--orange-accent-color);
 border-bottom-right-radius: var(--calc-border-radious);
 color: black;
 transition: background-color 1s linear;
}

.equals-hover {
  background-color: rgba(214, 119, 93, 0.8);
}

.equals-press {
  background-color: var(--orange-accent-color);
  box-shadow: inset 0 0 10px rgb(211, 51, 7)
}

.zero {
  grid-area: zero;
  border-bottom-left-radius: var(--calc-border-radious);
}

.operator, .equals, .decimal {
  font-weight: bold;
}

.rotate {
  display: inline-block;
  animation: rotation 2s linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}