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

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

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

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

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

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/Nunito-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --primary-color: #a74e3e;
  --secondary-color: #f2f2f2;
  --third-color: #141414;
  --accent-color: #a74e3e7b;
  --header-blur: blur(16px);
  --primary-gradient: linear-gradient(
    57deg,
    var(--primary-color) 0%,
    #ab6d62 100%
  );

  --font: 'Nunito', sans-serif;
  --text-color: #1a1a1a;
  --secondary-text-color: #ececec;
  --sub-text-color: #767676;

  --gray-rgb: 0, 0, 0;
  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);

  --border-radius: 0.625rem;
  --p-text: 0.975rem;
  --extra-large-text: 1.675rem;
  --large-text: 1.425rem;
  --medium-text: 1.175rem;
  --small-text: 0.975rem;
  --extra-small-text: 0.875rem;
}

body {
  font-family: var(--font);
  margin: 0;
  padding: 0;
  background-color: var(--secondary-color);
  align-items: center;
}

h1 {
  font-size: 3rem;
  font-weight: 800;
  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}

h2 {
  font-size: 2rem;
  font-weight: 700;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
}

p {
  font-size: var(--small-text);
}