@font-face {
    font-family: Calculator;
    src: url(./fonts/Calculator.ttf);
}

.container {
  display: flex;
}
.calculator {
  --spaceBetween: 3px;
  --borderColor: rgb(151, 142, 142);
  font-size: 40px;
  display: flex;
  flex-direction: column;
  gap: var(--spaceBetween);
  border: 2px solid var(--borderColor);
  padding: 6px;
  border-radius: 10px;
  width: 9.7em;
}

.calculator__screen {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border: 2px solid var(--borderColor);
  padding: 6px;
  border-radius: 10px;
  font-family: Calculator;

}

.calculator__screen__result{
    text-align: right;
    border: none;
    height: 1em;
}

.calculator__screen__math{
    height: 1em;
}

.calculator__screen__history{
    width: 100%;
    color: black;
    height: 6em;
    overflow: auto;
}

.calculator__screen__result::placeholder{
    color: inherit;
}

.calculator__screen__result:disabled{
    background-color: white;
    color: inherit;
}

.calculator__input {
  display: flex;
  flex-direction: row;
  gap: var(--spaceBetween);
}

.calculator__input__numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    "num7 num8 num9"
    "num4 num5 num6"
    "num1 num2 num3"
    "plus-minus num0 dot";
  gap: var(--spaceBetween);
  border: 2px solid var(--borderColor);
  padding: 6px;
  border-radius: 10px;
}

.calculator__input__numbers--1 {
  grid-area: num1;
}
.calculator__input__numbers--2 {
  grid-area: num2;
}
.calculator__input__numbers--3 {
  grid-area: num3;
}
.calculator__input__numbers--4 {
  grid-area: num4;
}
.calculator__input__numbers--5 {
  grid-area: num5;
}
.calculator__input__numbers--6 {
  grid-area: num6;
}
.calculator__input__numbers--7 {
  grid-area: num7;
}
.calculator__input__numbers--8 {
  grid-area: num8;
}
.calculator__input__numbers--9 {
  grid-area: num9;
}
.calculator__input__numbers--0 {
  grid-area: num0;
}
.calculator__input__numbers--dot {
  grid-area: dot;
}
.calculator__input__numbers--plus-minus {
  grid-area: plus-minus;
}
.calculator__input__operators {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    "R C"
    "add multi"
    "sub div"
    "equal equal";
  gap: var(--spaceBetween);
  border: 2px solid var(--borderColor);
  padding: 6px;
  border-radius: 10px;
  margin-left: auto;
  
}

.calculator__input__numbers--plus {
  grid-area: add;
}

.calculator__input__numbers--sub {
  grid-area: sub;
}

.calculator__input__numbers--multi {
  grid-area: multi;
}
.calculator__input__numbers--div {
  grid-area: div;
}

.calculator__input__numbers--equal {
  grid-area: equal;
}

.calculator__input__numbers--reset{
    grid-area: R;
}

.calculator__input__numbers--clear{
    grid-area: C;
}

.button {
  /* all: unset; */
  --border-color: rgb(172, 166, 166);
  --hover-color: rgb(219, 215, 215);
  background-color: white;
  border-bottom: 3px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-top: 1px solid;
  border-color: var(--border-color);
  border-radius: 10px;
  padding: 0.5em;
  cursor: pointer;
}
.button:hover {
  background-color: var(--hover-color);
}

.button:disabled {
  border-bottom-width: 1px;
  background-color: var(--hover-color);
  cursor: not-allowed;
}
.button:active {
  /* border-bottom-width: 1px;
  transform: translate(0, 1px); */
}