:root {
  --clr-yellow: #ecc75dff;
  --clr-red: #d14f45ff;
  --clr-white: #f0f1f3ff;
  --clr-skyblue: #7ab3db;
  --clr-darknavy: rgb(55, 79, 94);
  --clr-darkgray: rgb(110, 110, 110);
  --bg-clr: rgb(34, 34, 34);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--bg-clr);
  font-family: 'Balsamiq Sans';
}

button {
  font-size: 2.5rem;
  font-family: 'Balsamiq Sans';
  color: #fff;
}

/* Whole Container */

.container {
  width: 80%;
  max-width: 900px;
  margin: 0 auto;
  /* border: #fff solid 1px; */
}

.inner-container {
  background-color: var(--clr-white);
  border: #fff solid 1px;
  width: 380px;
  margin: 0 auto;
  padding-top: 18px;
}

.title {
  color: #fff;
  font-size: 4rem;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 0.8em;
}

/* Top Section */
.top-section {
  display: flex;
  margin: 0 15px;
}

/* Calculator Display */
.display-container {
  border: solid 1px var(--clr-darknavy);
  background-color: var(--clr-darknavy);
  margin: auto 10px auto 0;
  padding: 10px;
  max-width: 259px;
  height: 80px;
  flex-grow: 1;
}

.display {
  color: #fff;
  margin: auto 0;
  padding: 10px;
  height: 55px;
  font-size: 2.5rem;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grid Container */

.calculator-grid-container {
  /* border: 1px solid #fff; */
  max-width: 350px;
  margin: 1em auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  grid-auto-rows: 100px, auto;
  grid-template-areas:
    'clear plusminus percentage divide'
    'seven eight nine multiple'
    'four five six minus'
    'one two three plus'
    'item-zero item-zero point equals';
}

/* Grid Items */
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: #fff solid 1px; */
  aspect-ratio: 1/1;
}

/* Grid Areas for Items */

#item-clear {
  grid-area: clear;
}

#item-plusminus {
  grid-area: plusminus;
}

#item-percent {
  grid-area: percentage;
}

#item-divide {
  grid-area: divide;
}

#item-seven {
  grid-area: seven;
}

#item-eight {
  grid-area: eight;
}

#item-nine {
  grid-area: nine;
}

#item-multiply {
  grid-area: multiple;
}

#item-four {
  grid-area: four;
}

#item-five {
  grid-area: five;
}

#item-six {
  grid-area: six;
}

#item-minus {
  grid-area: minus;
}

#item-one {
  grid-area: one;
}

#item-two {
  grid-area: two;
}

#item-three {
  grid-area: three;
}

#item-plus {
  grid-area: plus;
}

#item-zero {
  grid-area: item-zero;
  aspect-ratio: 2/0.94;
}

#item-point {
  grid-area: point;
}

#item-equals {
  grid-area: equals;
}

/* Buttons */

button {
  display: block;
  width: 100%;
  height: 100%;
  border: solid white 1px;
}

button:hover {
  cursor: pointer;
  opacity: 90%;
}

button:active {
  font-size: 2.8rem;
}

#backspace {
  width: 80px;
  height: 80px;
  background-color: var(--clr-darknavy);
}

#backspace {
  background-color: var(--clr-red);
}

.operator,
#equals {
  background-color: var(--clr-yellow);
}

.number,
#point,
#plusminus,
#percent,
#clear {
  background-color: var(--clr-skyblue);
}