:root{
    --color-text:var(--color-black);
    --color-bg-white:var(--color-white);
  --color-white:#fff;
  --color-black:#172033;
  --color-red:#eb2027;
  --color-blue:#0875bb;
  --color-lightblue:#cde6f7;
  --color-lightred:#fee9e4;
  --color-violet:#464aa6;
  --font-text:"Montserrat", sans-serif;
  --font-title:"Pie Pie", sans-serif;
    --container:1290px;
    --container-mob:100%;
  --gutter:20px;
  --gutter-mob:10px;
  --border-radius:20px;
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:3rem;
  --space-6:5rem;
  --radius-sm:.375rem;
  --radius-md:.75rem;
  --radius-lg:1.5rem;
  --radius-all:50%;
  --shadow-sm:0 1px 2px rgb(16 24 40 /.08);
  --shadow-md:0 12px 30px rgb(16 24 40 /.12);
  --z-header:20;
  --z-menu:30;
  --bp-sm:36rem;
  --bp-md:48rem;
  --bp-lg:64rem
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat Italic";
    src: url("../fonts/montserrat-variable-italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Pie Pie";
    src: url("../fonts/pie-pie.woff2") format("woff2");
    font-style: normal;
    font-weight: 100;
}

/* Breakpoint docs: 576px, 768px, 1024px. Use @media queries; custom props cannot be used in media conditions. */