@font-face {
  font-family: 'CabinetGrotesk-Variable';
  src: url('../fonts/cabinet-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}


:root{

  --site-padding: 1em;
  --spacing-gap: .5em;
  --padding-buttons: 8px;

  /* FONT */

  --font-family: 'CabinetGrotesk-Variable';
  --font-size: 16px;
  --font-weight-regular: 320;
  --letter-spacing: 0;

  /* HEADER */
  --logo-height: 45px;
  --header-padding-x:25px;
  --header-padding-y:30px;

  --border-radius: calc(.5vw);
  --border-radius-inner: calc(var(--border-radius) / 2);

  --box-shadow-button: -1px -1px 1px -0.5px rgba(0, 0, 0, 0.20) inset, 1px 1px 1px -0.5px rgba(233, 233, 233, 0.70) inset;
  --box-shadow-button-active: -1px -1px 1px -0.5px rgba(233, 233, 233, 0.70) inset, 1px 1px 1px -0.5px rgba(0, 0, 0, 0.20) inset;

}

img {
  height: auto;
}