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

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

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

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

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

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

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

:root {
  --font-family: 'Outfit', sans-serif;
  --second-font-family: 'Inter', sans-serif;
  --container-width: 1440px;
  --nav-height: 100px;
  --container-padding: 0px;
  --nav-bg: linear-gradient(
    0deg,
    rgba(18, 36, 50, 0.8) 0%,
    rgba(18, 36, 50, 0.8) 100%
  );
  --gap-40: 40px;
  --gap-50: 50px;
  --gap-60: 60px;
  --gap-80: 80px;

  --font-size-h1: 4rem;

  --font-size-48: 3rem;
  --font-size-32: 2rem;
  --font-size-30: 1.875rem;
  --font-size-26: 1.625rem;
  --font-size-20: 1.25rem;
  --font-size-18: 1.125rem;
  --font-size-16: 1rem;
}

@media screen and (max-width: 1920px) {
  .container {
    max-width: var(--container-width) !important;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --font-size-h1: 3.25rem;
    --font-size-48: 2.5rem;
    --font-size-32: 1.75rem;
    --font-size-30: 1.625rem;
    --font-size-26: 1.375rem;
    --font-size-20: 1.125rem;
    --font-size-18: 1.0625rem;
    --font-size-16: 0.9375rem;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --font-size-h1: 2.75rem;
    --font-size-48: 2.25rem;
    --font-size-32: 1.625rem;
    --font-size-30: 1.5rem;
    --font-size-26: 1.25rem;
    --font-size-20: 1rem;
    --font-size-18: 0.9375rem;
    --font-size-16: 0.875rem;
  }
}

@media screen and (max-width: 576px) {
  :root {
    --font-size-h1: 2.25rem;
    --font-size-48: 2rem;
    --font-size-32: 1.5rem;
    --font-size-30: 1.375rem;
    --font-size-26: 1.125rem;
    --font-size-20: 0.9375rem;
    --font-size-18: 0.875rem;
    --font-size-16: 0.8125rem;
  }
}