style.scss

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

$purple-background-color: #c7d2ff;
$green-background-color: rgb(123, 247, 86);
$button-color-hover-background: #fee48f;
$button-color-hover-border: #b18907;
$button-clear-background-color: orange;
$button-clear-border-color: red;
$button-clear-hover-color: rgb(239, 57, 57);
$border: 1px solid black;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #e4e7f4;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calculator {
  aspect-ratio: 5 / 6;
  background-color: rgb(133, 127, 127);
  border: $border;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 5fr;
  margin-inline: auto;

  .screen-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    button {
      width: 100%;
      height: 100%;
      font-family: calculatorFont;
      font-size: min(4.5rem, 7.5vw, 7.5vh);
      font-weight: bolder;
      text-align: right;
      padding: 0 2%;
      border: $border;
      color: black;
    }
  }

  .buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);

    button {
      font-size: min(3.5rem, 6.5vw, 6.5vh);
      border: $border;
      color: black;
    }

    .purple-background {
      background-color: $purple-background-color;
    }

    .green-background {
      background-color: $green-background-color;
    }

    .button-clear {
      background-color: $button-clear-background-color;
      border-color: $button-clear-border-color;
    }

    .button-clear:hover {
      background-color: $button-clear-hover-color;
      cursor: pointer;
    }

    .change-on-hover:hover {
      background-color: $button-color-hover-background;
      border-color: $button-color-hover-border;
      cursor: pointer;
    }
  }
}