:root {
  /* Colors */
  --body-bg: rgb(231, 231, 231);

  --device-bg: rgb(255, 255, 255);
  --device-border: rgb(201, 201, 201);

  --display-font: "NotoSansMath";
  --text-color: rgb(71, 71, 71);

  --keys-color: rgb(88, 88, 88);
  --keys-bg: hsl(0, 0%, 97%);
  --keys-shadow-on: rgb(204, 204, 204);
  --keys-shadow-off: rgb(204, 204, 204);
  --keys-hover: rgb(223, 223, 223);
  --keys-active: rgb(209, 209, 209);
  --keys-border: rgba(170, 170, 170, 0.993);

  --display-text: rgb(95, 95, 95);
  --display-off: rgb(63, 63, 63);
  --display-on: rgb(248, 248, 248);
  --display-border-on: rgba(241, 241, 241, 0.911);
  --display-border-off: rgba(241, 241, 241, 0.911);
  --display-outline: rgb(233, 233, 233);

  --BOX-SHADOW-COLOR: rgba(168, 168, 168, 0.993);
  --BOX-SHADOW-PROPS: 2px;
  --INTENS-1: 1px;
  --INTENS-2: 5px;
  --BOX-SHADOW: inset var(--BOX-SHADOW-PROPS) var(--BOX-SHADOW-PROPS)
      var(--INTENS-1) var(--BOX-SHADOW-COLOR),
    inset var(--BOX-SHADOW-PROPS) var(--BOX-SHADOW-PROPS) var(--INTENS-2)
      var(--BOX-SHADOW-COLOR);
}

h1.heading {
  font-family: "NotoSansMath";
  letter-spacing: 2px;
  font-weight: 100;
  font-size: clamp(16px, 6vw, 1.6rem);
  text-transform: uppercase;
  color: var(--text-color);
  position: relative;
  height: 3rem;
  margin-bottom: 40px;
}

h1.heading #part-1 {
  color: rgb(87, 87, 87);
  position: absolute;
}
h1.heading #part-2 {
  color: rgb(43, 43, 43);
  font-weight: bold;
  position: absolute;
  transform: translateX(50px) translateY(30px);
}