/*
base styles and typography
*/
:root {
  --orange-050: #ffe8d9;
  --orange-100: #ffd0b5;
  --orange-200: #ffb088;
  --orange-300: #ff9466;
  --orange-400: #f9703e;
  --orange-500: #f35627;
  --orange-600: #de3a11;
  --orange-700: #c52707;
  --orange-800: #ad1d07;
  --orange-900: #841003;

  --grey-050: #f5f7fa;
  --grey-100: #e4e7eb;
  --grey-200: #cbd2d9;
  --grey-300: #9aa5b1;
  --grey-400: #7b8794;
  --grey-500: #616e7c;
  --grey-600: #52607d;
  --grey-700: #3e4659;
  --grey-800: #323f4b;
  --grey-900: #1f2933;
}

/*
Base style
*/

html {
  font-size: 150%;
  font-weight: 300;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  line-height: 1.4;
}

body {
  display: flex;
  background-image: linear-gradient(to right, #bdc3c7, #2c3e50);
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/*
Calculator
*/

.calculator {
  box-shadow: 0 0 25px 3px rgba(0, 0, 0, 0.3);
  border-radius: 0.5em;
  overflow: hidden;
}

.calculator__display {
  background: linear-gradient(
    to right bottom,
    rgb(10, 10, 10),
    rgb(15, 15, 15),
    rgb(18, 18, 18),
    rgb(20, 20, 20)
  );
  color: var(--grey-050);
  width: 16.25rem;
  padding: 0.75rem 1rem;
  text-align: right;
  font-size: calc(1rem * 1.2 * 1.2);
  border-bottom: 2px solid black;
}

@media (max-width: 576px) {
  .calculator,
  .calculator .calculator__display {
    width: 14rem;
  }
}
@media (max-width: 375px) {
  .calculator,
  .calculator .calculator__display {
    width: 12rem;
  }
}
@media (max-width: 310px) {
  .calculator,
  .calculator .calculator__display {
    width: 10rem;
  }
}

.calculator__keys {
  background: black;
  display: grid;
  grid-gap: 2px;
  grid-template-columns: repeat(4, auto);
  grid-template-areas:
    ". . . . "
    "seven eight nine equal"
    "four five six equal"
    "one two three equal"
    "zero decimal clear equal";
}

.calculator__keys > button {
  border: 0;
}

[data-key="1"] {
  grid-area: one;
}
[data-key="2"] {
  grid-area: two;
}
[data-key="3"] {
  grid-area: three;
}
[data-key="4"] {
  grid-area: four;
}
[data-key="5"] {
  grid-area: five;
}
[data-key="6"] {
  grid-area: six;
}
[data-key="7"] {
  grid-area: seven;
}
[data-key="8"] {
  grid-area: eight;
}
[data-key="9"] {
  grid-area: nine;
}
[data-key="0"] {
  grid-area: zero;
}
.decimal {
  grid-area: decimal;
}
[data-key="equal"] {
  grid-area: equal;
  background: linear-gradient(to left, rgb(255, 115, 0), rgb(255, 132, 0));
}

[data-key="equal"]:active {
  background: linear-gradient(
    to left bottom,
    rgb(255, 105, 0),
    rgb(255, 120, 0)
  );
}
[data-type="operator"] {
  background: linear-gradient(
    to right bottom,
    rgb(10, 10, 10),
    rgb(15, 15, 15),
    rgb(18, 18, 18),
    rgb(20, 20, 20)
  );

  color: rgb(255, 115, 0);
}

[data-type="number"],
[data-type="clear"] {
  background: linear-gradient(
    to right bottom,
    rgb(10, 10, 10),
    rgb(15, 15, 15),
    rgb(18, 18, 18),
    rgb(20, 20, 20)
  );

  color: var(--grey-050);
}

[data-type="operator"]:active,
[data-type="number"]:active,
[data-type="clear"]:active {
  background: rgb(7, 7, 7);
}

[data-state="selected"]:active {
  background: rgb(7, 7, 7);
}