@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.cdnfonts.com/css/cabinet-grotesk');
:root {
  --font-heading: 'Cabinet Grotesk';
  --font-paragraph: 'Cabinet Grotesk';
  --font-button: 'Roboto';
  --font-size-12: clamp(12px, 1.5vw, 13px);
  --font-size-14: clamp(14px, 1.7vw, 14px);
  --font-size-16: clamp(15px, 1.75vw, 16px);
  --font-size-18: clamp(16px, 1.85vw, 18px);
  --font-size-20: clamp(17px, 1.9vw, 20px);
  --font-size-24: clamp(18px, 2vw, 24px);
  --font-size-28: clamp(20px, 2.2vw, 28px);
  --font-size-32: clamp(26px, 2.5vw, 32px);
  --font-size-34: clamp(28px, 2.6vw, 34px);
  --font-size-80: clamp(44px, 6vw, 80px);
  --font-size-160: clamp(50px, 8vw, 160px);
  --font-size-180: clamp(60px, 9.5vw, 180px);
}

/* headings and menu *
@font-face {
  font-family: 'Helvetica Neue Extended';
  src: url('../fonts/helvetica-neue-extended-700.eot');
  src: url('../fonts/helvetica-neue-extended-700.eot?#iefix') format('embedded-opentype'),
      url('../fonts/helvetica-neue-extended-700.otf') format('opentype'),
      url('../fonts/helvetica-neue-extended-700.woff2') format('woff2'),
      url('../fonts/helvetica-neue-extended-700.woff') format('woff'),
      url('../fonts/helvetica-neue-extended-700.ttf') format('truetype'),
      url('../fonts/helvetica-neue-extended-700.svg') format('svg');
  font-weight: 700;
  font-style: normal;
}

/* content *
@font-face {
  font-family: 'Helvetica Now';
  src: url('../fonts/helvetica-now-300.eot');
  src: url('../fonts/helvetica-now-300.eot?#iefix') format('embedded-opentype'),
      url('../fonts/helvetica-now-300.otf') format('opentype'),
      url('../fonts/helvetica-now-300.woff2') format('woff2'),
      url('../fonts/helvetica-now-300.woff') format('woff'),
      url('../fonts/helvetica-now-300.ttf') format('truetype'),
      url('../fonts/helvetica-now-300.svg') format('svg');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Now';
  src: url('../fonts/helvetica-now-400.eot');
  src: url('../fonts/helvetica-now-400.eot?#iefix') format('embedded-opentype'),
      url('../fonts/helvetica-now-400.otf') format('opentype'),
      url('../fonts/helvetica-now-400.woff2') format('woff2'),
      url('../fonts/helvetica-now-400.woff') format('woff'),
      url('../fonts/helvetica-now-400.ttf') format('truetype'),
      url('../fonts/helvetica-now-400.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Helvetica Now';
  src: url('../fonts/helvetica-now-500.eot');
  src: url('../fonts/helvetica-now-500.eot?#iefix') format('embedded-opentype'),
      url('../fonts/helvetica-now-500.otf') format('opentype'),
      url('../fonts/helvetica-now-500.woff2') format('woff2'),
      url('../fonts/helvetica-now-500.woff') format('woff'),
      url('../fonts/helvetica-now-500.ttf') format('truetype'),
      url('../fonts/helvetica-now-500.svg') format('svg');
  font-weight: 500;
  font-style: normal;
}
*/