@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  src: url("/ασφάλεια-κατοικιδίου/assets/GoogleSans_17pt-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  src: url("/ασφάλεια-κατοικιδίου/assets/GoogleSans_17pt-Bold.ttf") format("truetype");
  font-display: swap;
}

:root {
  --petrol-blue-900: oklch(15.18% 0.028 222.17);
  --petrol-blue-800: oklch(21.25% 0.043 231.40);
  --petrol-blue-700: oklch(27.15% 0.055 231.93);
  --petrol-blue-600: oklch(32.52% 0.069 234.85);
  --petrol-blue-500: oklch(37.62% 0.081 235.79);
  --petrol-blue-400: oklch(50.37% 0.072 229.21);
  --petrol-blue-300: oklch(63.20% 0.054 225.90);
  --petrol-blue-200: oklch(75.63% 0.036 227.60);
  --petrol-blue-100: oklch(87.96% 0.017 225.22);
  --petrol-blue-50: oklch(94.09% 0.009 222.06);
  --dark-blue-900: oklch(13.27% 0.029 237.77);
  --dark-blue-800: oklch(18.11% 0.047 246.17);
  --dark-blue-700: oklch(22.29% 0.063 249.92);
  --dark-blue-600: oklch(26.65% 0.079 251.48);
  --dark-blue-500: oklch(30.50% 0.093 252.73);
  --dark-blue-400: oklch(45.23% 0.074 248.52);
  --dark-blue-300: oklch(59.51% 0.052 247.79);
  --dark-blue-200: oklch(73.56% 0.034 246.83);
  --dark-blue-100: oklch(86.88% 0.016 248.01);
  --warm-orange-900: oklch(23.44% 0.049 49.04);
  --warm-orange-800: oklch(36.06% 0.087 46.69);
  --warm-orange-700: oklch(47.51% 0.121 46.36);
  --warm-orange-600: oklch(58.48% 0.152 45.69);
  --warm-orange-500: oklch(68.82% 0.182 45.44);
  --warm-orange-400: oklch(74.02% 0.149 48.83);
  --warm-orange-300: oklch(79.84% 0.112 50.76);
  --warm-orange-200: oklch(86.31% 0.073 50.92);
  --warm-orange-100: oklch(93.00% 0.035 52.00);
  --gray-900: oklch(64.01% 0.000 0);
  --gray-800: oklch(68.30% 0.000 0);
  --gray-700: oklch(72.52% 0.000 0);
  --gray-600: oklch(76.68% 0.000 0);
  --gray-500: oklch(80.47% 0.000 0);
  --gray-400: oklch(84.52% 0.000 0);
  --gray-300: oklch(88.53% 0.000 0);
  --gray-200: oklch(92.19% 0.000 0);
  --gray-100: oklch(96.12% 0.000 0);
  --warm-green-900: oklch(22.87% 0.066 144.25);
  --warm-green-800: oklch(34.73% 0.108 143.64);
  --warm-green-700: oklch(45.95% 0.147 143.22);
  --warm-green-600: oklch(56.24% 0.182 143.18);
  --warm-green-500: oklch(66.36% 0.216 143.10);
  --warm-green-400: oklch(71.59% 0.195 144.24);
  --warm-green-300: oklch(78.00% 0.155 145.20);
  --warm-green-200: oklch(84.83% 0.104 146.53);
  --warm-green-100: oklch(92.40% 0.052 146.85);
  --info-500: oklch(34.38% 0.165 262.44);
  --info-400: oklch(74.05% 0.059 265.09);
  --info-300: oklch(81.93% 0.096 247.26);
  --info-100: oklch(96.00% 0.021 241.35);
  --warning-500: oklch(47.84% 0.109 63.21);
  --warning-300: oklch(92.48% 0.110 93.16);
  --warning-100: oklch(98.56% 0.028 98.05);
  --error-500: oklch(67.32% 0.214 24.47);
  --error-300: oklch(97.08% 0.014 28.01);
  --error-100: oklch(97.08% 0.014 28.01);
  --white-500: oklch(100.00% 0.000 0);
  --black-500: oklch(0.00% 0.000 0);
  --black-400: oklch(32.11% 0.000 0);
  --black-300: oklch(51.03% 0.000 0);
  --black-200: oklch(68.30% 0.000 0);
  --black-100: oklch(84.52% 0.000 0);

  --todo-light-blue: oklch(0.9683 0.0161 245.08);

  --pricefox-font: Google Sans;
  --pricefox-font-size: 16px;
  --pricefox-primary-color: var(--petrol-blue-500);
  --pricefox-background-color: var(--white-500);
  --pricefox-faded-background-color: var(--petrol-blue-50);

  --legacy-light-blue: oklch(98.67% 0.008 225.08);

  --heading-line-height: 1.25;
  --line-height: 1.5;

  --inter-organism-gap: 4rem;

  @media (min-width: 993px) and (max-width: 1440px) {
    --inter-organism-gap: 5rem;
  }

  @media (min-width: 1441px) {
    --inter-organism-gap: 6.25rem;
  }
}

html {
  font-size: var(--pricefox-font-size);
}

body {
  font-family: var(--pricefox-font), sans-serif;
  color: var(--pricefox-primary-color);
  line-height: var(--line-height);

  h1, h2, h3, h4 {
    line-height: var(--heading-line-height);
  }

  h1 {
    font-size: 1.75rem;
    @media (min-width: 993px) and (max-width: 1440px) {
      font-size: 2.5rem;
    }
    @media (min-width: 1441px) {
      font-size: 3rem;
    }
  }

  h2 {
    font-size: 1.5rem;
    @media (min-width: 993px) and (max-width: 1440px) {
      font-size: 2rem;
    }
    @media (min-width: 1441px) {
      font-size: 2.5rem;
    }
  }

  h3 {
    font-size: 1.25rem;
    @media (min-width: 993px) and (max-width: 1440px) {
      font-size: 1.5rem;
    }
    @media (min-width: 1441px) {
      font-size: 2rem;
    }
  }

  h4 {
    font-size: 1rem;
    @media (min-width: 993px) and (max-width: 1440px) {
      font-size: 1.25rem;
    }
    @media (min-width: 1441px) {
      font-size: 1.5rem;
    }
  }

  h5 {
    font-size: 0.75rem;
    @media (min-width: 993px) and (max-width: 1440px) {
      font-size: 1rem;
    }
    @media (min-width: 1441px) {
      font-size: 1.25rem;
    }
  }

  a {
    text-decoration: none;
    color: var(--petrol-blue-500);
  }
}

main {
  padding-top: 3.5rem;
  @media (min-width: 993px) {
    padding-top: 5rem;
  }
}