:root {
  --font-family--sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family--display: 'Kalam';
  --current-color: transparent;

  --border-radius--keyboard: 8px;
  --border-radius--rounded: 99rem;
  --border-radius--swatch: 63% 37% 54% 46% / 55% 48% 52% 45%;

  --background--07-mac: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
  --box-shadow--07-mac: inset 0 1px 0 0 rgba(255, 255, 255, 0.8),
                        inset 0 -1px 0 0 rgba(0, 0, 0, 0.35),
                        inset 1px 0 0 0 rgba(255, 255, 255, 0.5),
                        inset -1px 0 0 0 rgba(0, 0, 0, 0.08);
  --border--07-mac: 1px solid rgba(0, 0, 0, 0.2);

  --border--swatch: solid 1px rgba(0,0,0,0.3);

  --height--body: 39px;
  --height--keys: 34px;
  
  --width--body: 640px;
  --width--marquee: 70px;

  --rotation--swatches: 20deg;

  --color--chrome-border: rgb(201, 197, 206);
  --color--chrome-bg: rgb(252, 248, 255);
  --background--90s-btn: rgb(0,0,0);

  --color--body-bg: lch(92.75% 5.34 94.03);
}

@font-face {
  font-family: 'Kalam';
  src: url('../fonts/Kalam-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}