:root {

  /* color */

  --black: rgb(var(--black-rgb));
  --black-rgb: 51, 51, 51;

  --white: rgb(var(--white-rgb));
  --white-rgb: 255, 255, 255;

  --grey: rgb(var(--grey-rgb));
  --grey-rgb: 119, 119, 119;

  --light: rgb(var(--light-rgb));
  --light-rgb: 249, 248, 244;

  --dark-bg: rgb(var(--dark-bg-rgb));
  --dark-bg-rgb: 0, 5, 17;

  --header-height: 10vh;

  --section-pad: calc(50px + 70 * (100vw - 320px) / 1080);
  --container-pad: calc(25px + 40 * (100vw - 320px) / 1080);
  --gap-pad: 50px;
  --gutter: 15px;

  --animation-smooth: .8s cubic-bezier(.3, 1, .3, 1);
  --animation-nav: .4s cubic-bezier(.3, 0, .3, 1);
  --border-radius: 100em;
  --btn-shadow-distance: 1.25em;

}

@media screen and (max-width: 600px) {
  :root {
    --gutter: 8px;
  }
}



/* font face */

@font-face {
  font-display: swap;
  font-family: 'GeneralSans';
  src: local('GeneralSans'),
  url('../../../assets/font/GeneralSans/GeneralSans-Regular.woff2') format('woff2'),
  url('../../../assets/font/GeneralSans/GeneralSans-Regular.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: 'GeneralSans';
  src: local('GeneralSans'),
  url('../../../assets/font/GeneralSans/GeneralSans-Medium.woff2') format('woff2'),
  url('../../../assets/font/GeneralSans/GeneralSans-Medium.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

