* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: coral;
  flex-direction: column;
  font-family: "Dosis", sans-serif;
}

#calculator {
  margin: 20vh 0;
  width: 300px;
  height: 500px;
  display: grid;
  background-color: aquamarine;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: tepeat(5, 1fr);
  grid-template-areas:
    "screen screen screen screen"
    "seven eight nine plus"
    "four five six minus"
    "one two three times"
    "reset zero divide equal";
  gap: 10px;
  padding: 10px;
  border-radius: 20px;
  border: solid black 1px;
  box-shadow: black -4px 8px, black -2px 8px, black -4px 3px;
}

#calculator > * {
  font-size: 22px;
  cursor: grab;
  color: white;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid black 1px;
  box-shadow: black -2px 4px;
  user-select: none;
  transition-duration: 40ms;
}
#calculator > *:active {
  box-shadow: black -1px 2px;
  transform: translate(-1px, 2px);
  transition-duration: 50ms;
}

#zero {
  grid-area: zero;
}
#one {
  grid-area: one;
}
#two {
  grid-area: two;
}
#three {
  grid-area: three;
}
#four {
  grid-area: four;
}
#five {
  grid-area: five;
}
#six {
  grid-area: six;
}
#seven {
  grid-area: seven;
}
#eight {
  grid-area: eight;
}
#nine {
  grid-area: nine;
}
#screen {
  grid-area: screen;
}
#equal {
  grid-area: equal;
}
#plus {
  grid-area: plus;
}
#minus {
  grid-area: minus;
}
#times {
  grid-area: times;
}
#divide {
  grid-area: divide;
}
#reset {
  grid-area: reset;
}

.number {
  background-color: rgb(80, 80, 80);
  height: 60px;
}

#screen {
  font-size: 47px;
  margin-top: 15px;
  background-color: white;
  height: 100px;
  color: black;
  cursor: default;
  box-shadow: black 2px -4px;
  display: inline;
  text-align: right;
  padding-top: 40px;
  padding-right: 10px;
  overflow: hidden;
}
#screen:active {
  box-shadow: black 2px -4px;
  transform: none;
}

.operator {
  background-color: rgb(255, 85, 85);
  height: 60px;
}
#equal {
  background-color: rgb(85, 202, 74);
  height: 60px;
}

#footer {
  background-color: aquamarine;
  position: absolute;
  bottom: -1px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 80%;
  padding: 10px;
  font-size: 20px;
  border-radius: 20px 20px 0 0;
  box-shadow: black -2px 4px;
  border: solid black 1px;
  display: inline;
  text-align: center;
  vertical-align: middle;
}

#header {
  background-color: aquamarine;
  position: absolute;
  top: -4px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 80%;
  padding: 10px;
  font-size: 50px;
  border-radius: 0 0 20px 20px;
  box-shadow: black -2px 4px;
  border: solid black 1px;
}
.animate{
  color: aquamarine;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1000ms ease-in-out, color 1s;
  margin-left: 180px;
}
.animate:hover{
  color: black;
  transform:scale(1.1) rotate3d(0, 1, 0, 360deg) translateX(-80px);
  transition: transform 900ms ease-in-out, color 2s;
}

.github{
  height: 25px;
  width: auto;
}
.github:hover{
  transform: rotate3d(0, 1, 0, 360deg);
}
a{
  text-decoration: none;
  color: inherit;
}