/* import font
/* source-sans-3-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-200.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-200.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-200.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-200.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-200.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-200.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-200italic.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-200italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-200italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-200italic.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-200italic.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-200italic.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-300.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-300.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-300.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-300.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-300.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-300.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-300italic.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-300italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-300italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-300italic.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-300italic.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-300italic.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-regular.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-regular.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-regular.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-regular.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-regular.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-italic.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-italic.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-italic.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-italic.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-500.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-500.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-500.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-500.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-500.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-500.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-500italic.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-500italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-500italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-500italic.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-500italic.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-500italic.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-600.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-600.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-600.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-600.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-600.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-600.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-600italic.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-600italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-600italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-600italic.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-600italic.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-600italic.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-700.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-700.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-700.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-700.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-700.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-700.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-700italic.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-700italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-700italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-700italic.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-700italic.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-700italic.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-800.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-800.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-800.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-800.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-800.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-800.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-800italic.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-800italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-800italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-800italic.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-800italic.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-800italic.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-900.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-900.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-900.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-900.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-900.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-900.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
/* source-sans-3-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/source-sans-3/source-sans-3-v19-latin-900italic.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/source-sans-3/source-sans-3-v19-latin-900italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-900italic.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-900italic.woff")
      format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-900italic.ttf")
      format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/source-sans-3/source-sans-3-v19-latin-900italic.svg#SourceSans3")
      format("svg"); /* Legacy iOS */
}
* {
  font-family: "Source Sans 3", sans-serif;
}
#wpadminbar {
  background: #222222;
  color: #ffffff;
}
/* Font Size */
:root {
  --sat: var(--android-safe-area-inset-top, var(--safe-area-top));
  --sar: var(--android-safe-area-inset-right, var(--safe-area-right));
  --sab: var(--android-safe-area-inset-bottom, var(--safe-area-bottom));
  --sal: var(--android-safe-area-inset-left, var(--safe-area-left));

  /*Color*/
  /* =========================================================
        NEUTRAL
         ========================================================= */

  --fd-color-neutral-100: #f8f9fa;
  --fd-color-neutral-300: #dee2e6;
  --fd-color-neutral-500: #adb5bd;
  --fd-color-neutral-700: #495057;
  --fd-color-neutral-900: #212529;

  /* =========================================================
         BLUE
         ========================================================= */

  --fd-color-blue-100: #eff7f7;
  --fd-color-blue-300: #93c5fd;
  --fd-color-blue-500: #3b82f6;
  --fd-color-blue-700: #1d4ed8;
  --fd-color-blue-900: #1e3a8a;

  /* =========================================================
         PURPLE
         ========================================================= */

  --fd-color-purple-100: #f3e8ff;
  --fd-color-purple-300: #d8b4fe;
  --fd-color-purple-500: #a855f7;
  --fd-color-purple-700: #7e22ce;
  --fd-color-purple-900: #581c87;

  /* =========================================================
         CYAN
         ========================================================= */

  --fd-color-cyan-100: #cffafe;
  --fd-color-cyan-300: #67e8f9;
  --fd-color-cyan-500: #06b6d4;
  --fd-color-cyan-700: #0e7490;
  --fd-color-cyan-900: #164e63;

  /* =========================================================
         GREEN
         ========================================================= */

  --fd-color-green-100: #dcfce7;
  --fd-color-green-300: #86efac;
  --fd-color-green-500: #22c55e;
  --fd-color-green-700: #15803d;
  --fd-color-green-900: #14532d;

  /* =========================================================
         YELLOW
         ========================================================= */

  --fd-color-yellow-100: #fef9c3;
  --fd-color-yellow-300: #fde047;
  --fd-color-yellow-500: #eab308;
  --fd-color-yellow-700: #a16207;
  --fd-color-yellow-900: #713f12;

  /* =========================================================
         ORANGE
         ========================================================= */

  --fd-color-orange-100: #ffedd5;
  --fd-color-orange-300: #fdba74;
  --fd-color-orange-500: #f97316;
  --fd-color-orange-700: #c2410c;
  --fd-color-orange-900: #7c2d12;

  /* =========================================================
         RED
         ========================================================= */

  --fd-color-red-100: #fee2e2;
  --fd-color-red-300: #fca5a5;
  --fd-color-red-500: #ef4444;
  --fd-color-red-700: #b91c1c;
  --fd-color-red-900: #7f1d1d;

  /* =========================================================
         PINK
         ========================================================= */

  --fd-color-pink-100: #fce7f3;
  --fd-color-pink-300: #f9a8d4;
  --fd-color-pink-500: #ec4899;
  --fd-color-pink-700: #be185d;
  --fd-color-pink-900: #831843;

  /* =========================================================
         SPACING SYSTEM
         ========================================================= */
  --fd-space-100: 4px;
  --fd-space-200: 8px;
  --fd-space-300: 12px;
  --fd-space-400: 16px;
  --fd-space-500: 24px;
  --fd-space-600: 32px;
  --fd-space-700: 40px;
  --fd-space-800: 48px;
  --fd-space-900: 64px;

  /* =========================================================
         RADIUS SYSTEM
         ========================================================= */

  --fd-radius-100: 2px;
  --fd-radius-200: 4px;
  --fd-radius-300: 8px;
  --fd-radius-400: 12px;
  --fd-radius-500: 16px;
  --fd-radius-600: 24px;
  --fd-radius-700: 32px;
  --fd-radius-800: 999px;
  /* pill / full round */

  /* =========================================================
         BORDER WIDTH
         ========================================================= */

  --fd-border-100: 0.5px;
  --fd-border-200: 1px;
  --fd-border-300: 1.5px;

  /* =========================================================
         SHADOW (ELEVATION SYSTEM)
         ========================================================= */

  --fd-shadow-100: 0px 1px 2px rgba(0, 0, 0, 0.05);
  --fd-shadow-200: 0px 2px 4px rgba(0, 0, 0, 0.08);
  --fd-shadow-300: 0px 4px 8px rgba(0, 0, 0, 0.12);
  --fd-shadow-400: 0px 8px 16px rgba(0, 0, 0, 0.16);
  --fd-shadow-500: 0px 16px 24px rgba(0, 0, 0, 0.2);

  /* =========================================================
         OPACITY SYSTEM
         ========================================================= */

  --fd-opacity-100: 1;
  --fd-opacity-90: 0.9;
  --fd-opacity-80: 0.8;
  --fd-opacity-60: 0.6;
  --fd-opacity-40: 0.4;
  --fd-opacity-20: 0.2;
  --fd-opacity-10: 0.1;
  --fd-opacity-05: 0.05;

  /* =========================================================
         Z-INDEX SYSTEM
         ========================================================= */

  /* base */
  --fd-z-100: 1;
  /* dropdown */
  --fd-z-200: 10;
  /* sticky */
  --fd-z-300: 100;
  /* modal */
  --fd-z-400: 1000;
  /* overlay system */
  --fd-z-500: 9999;

  /* =========================================================
         FONT FAMILY
         ========================================================= */

  --fd-font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    "Noto Sans", "Helvetica Neue", sans-serif;
  --fd-font-serif: Georgia, "Times New Roman", serif;
  --fd-font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;

  /* =========================================================
         FONT SIZE SCALE (ordered system)
         ========================================================= */

  --fd-text-100: 10px;
  --fd-text-200: 12px;
  --fd-text-300: 14px;
  --fd-text-400: 16px;
  --fd-text-500: 18px;
  --fd-text-600: 20px;
  --fd-text-700: 24px;
  --fd-text-800: 30px;
  --fd-text-900: 36px;
  --fd-text-950: 48px;

  /* =========================================================
         LINE HEIGHT SCALE
         ========================================================= */

  --fd-leading-100: 1;
  --fd-leading-200: 1.25;
  --fd-leading-300: 1.4;
  --fd-leading-400: 1.6;
  --fd-leading-500: 1.8;

  /* =========================================================
         LETTER SPACING
         ========================================================= */

  --fd-tracking-100: -0.02em;
  --fd-tracking-200: -0.01em;
  --fd-tracking-300: 0em;
  --fd-tracking-400: 0.01em;
  --fd-tracking-500: 0.02em;

  /* =========================================================
         FONT WEIGHT SCALE
         ========================================================= */

  --fd-weight-100: 300;
  --fd-weight-200: 400;
  --fd-weight-300: 500;
  --fd-weight-400: 600;
  --fd-weight-500: 700;
  --fd-weight-600: 800;

  /* =========================================================
         MOTION DURATION SCALE
         ========================================================= */

  --fd-duration-100: 80ms;
  --fd-duration-200: 120ms;
  --fd-duration-300: 180ms;
  --fd-duration-400: 240ms;
  --fd-duration-500: 320ms;
  --fd-duration-600: 480ms;
  --fd-duration-700: 640ms;

  /* =========================================================
         EASING SYSTEM
         ========================================================= */

  --fd-ease-linear: cubic-bezier(0, 0, 1, 1);

  --fd-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --fd-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --fd-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* slightly more “natural UI motion” */
  --fd-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* =========================================================
         TRANSITION BASE TOKENS
         ========================================================= */

  --fd-transition-fast: all var(--fd-duration-200) var(--fd-ease-standard);
  --fd-transition-base: all var(--fd-duration-300) var(--fd-ease-standard);
  --fd-transition-slow: all var(--fd-duration-500) var(--fd-ease-standard);

  /* =========================================================
         BREAKPOINTS
         ========================================================= */

  --fd-breakpoint-sm: 568px;
  --fd-breakpoint-md: 768px;
  --fd-breakpoint-lg: 1024px;
  --fd-breakpoint-xl: 1280px;
  --fd-breakpoint-2xl: 1536px;

  /* =========================================================
         base witdh
         ========================================================= */
  --bs-width-sm: 90%;
  --bs-width-md: 90%;
  --bs-width-lg: 95%;
  --bs-width-xl: 95%;
  --bs-width-2xl: 1634px;

  /* ==========================================================
        SEMANTIC TYPOGRAPHY 
        ========================================================== */

  /* HEADINGS */
  --text-heading-2xl: var(--fd-text-900);
  --text-heading-xl: var(--fd-text-800);
  --text-heading-lg: var(--fd-text-700);
  --text-heading-md: var(--fd-text-600);
  --text-heading-sm: var(--fd-text-500);

  /* BODY */
  --text-body-lg: var(--fd-text-400);
  --text-body-md: var(--fd-text-300);
  --text-body-sm: var(--fd-text-200);

  /* UTILITY */
  --text-utility-lg: var(--fd-text-300);
  --text-utility-sm: var(--fd-text-200);

  /* ----------------------------------------------------------
        BRAND
      ---------------------------------------------------------- */

  --color-brand-primary-100: var(--fd-color-blue-100);
  --color-brand-primary-300: var(--fd-color-blue-300);
  --color-brand-primary-500: var(--fd-color-blue-500);
  --color-brand-primary-700: var(--fd-color-blue-700);
  --color-brand-primary-900: var(--fd-color-blue-900);

  /* ----------------------------------------------------------
        NEUTRAL
      ---------------------------------------------------------- */

  --color-neutral-100: var(--fd-color-neutral-100);
  --color-neutral-300: var(--fd-color-neutral-300);
  --color-neutral-500: var(--fd-color-neutral-500);
  --color-neutral-700: var(--fd-color-neutral-700);
  --color-neutral-900: var(--fd-color-neutral-900);

  /* ----------------------------------------------------------
        TEXT SYSTEM
      ---------------------------------------------------------- */

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-disabled: var(--color-neutral-300);
  --color-text-inverse: var(--color-neutral-100);

  /* ==========================================================
        STATUS
        ========================================================== */

  --color-status-success: var(--fd-color-green-500);
  --color-status-warning: var(--fd-color-yellow-500);
  --color-status-danger: var(--fd-color-red-500);
  --color-status-info: var(--fd-color-blue-500);

  --color-status-success-bg: var(--fd-color-green-100);
  --color-status-warning-bg: var(--fd-color-yellow-100);
  --color-status-danger-bg: var(--fd-color-red-100);
  --color-status-info-bg: var(--fd-color-blue-100);

  /* ==========================================================
        SURFACE SYSTEM
        ========================================================== */

  --color-surface-base: var(--color-neutral-100);
  --color-surface-raised: var(--color-neutral-100);
  --color-surface-overlay: var(--color-neutral-100);
  --color-surface-sunken: var(--color-neutral-300);

  --surface-raised-shadow: var(--fd-shadow-200);
  --surface-overlay-shadow: var(--fd-shadow-300);

  /* ----------------------------------------------------------
        BORDER SYSTEM
      ---------------------------------------------------------- */

  --color-border-default: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-500);
  --color-border-focus: var(--color-brand-primary-500);

  /* ----------------------------------------------------------
        ACTION SYSTEM
      ---------------------------------------------------------- */

  --color-action-primary: var(--color-brand-primary-500);
  --color-action-primary-hover: var(--color-brand-primary-700);
  --color-action-primary-pressed: var(--color-brand-primary-900);

  --color-action-secondary: var(--color-neutral-700);
  --color-action-secondary-hover: var(--color-neutral-900);

  /* ==========================================================
        INVERSE SYSTEM
        ========================================================== */

  --color-inverse-text: var(--color-neutral-100);
  --color-inverse-surface: var(--color-neutral-900);
  --color-inverse-border: var(--color-neutral-700);

  /* ==========================================================
        SEMANTIC SPACING (T-SHIRT SYSTEM)
        ========================================================== */

  --space-xs: var(--fd-space-200); /* 8px */
  --space-sm: var(--fd-space-300); /* 12px */
  --space-md: var(--fd-space-400); /* 16px */
  --space-lg: var(--fd-space-500); /* 24px */
  --space-xl: var(--fd-space-600); /* 32px */
  --space-2xl: var(--fd-space-800); /* 48px */

  /* ==========================================================
        SEMANTIC RADIUS (T-SHIRT SYSTEM)
        ========================================================== */

  --radius-xs: var(--fd-radius-200); /* 4px */
  --radius-sm: var(--fd-radius-300); /* 8px */
  --radius-md: var(--fd-radius-400); /* 12px */
  --radius-lg: var(--fd-radius-500); /* 16px */
  --radius-xl: var(--fd-radius-600); /* 24px */

  /* ==========================================================
        SEMANTIC MOTION (T-SHIRT SYSTEM)
        ========================================================== */

  --motion-xs: var(--fd-duration-100) var(--fd-ease-out);
  --motion-sm: var(--fd-duration-200) var(--fd-ease-out);
  --motion-md: var(--fd-duration-300) var(--fd-ease-in-out);
  --motion-lg: var(--fd-duration-500) var(--fd-ease-in-out);

  /* interaction mapping */
  --motion-hover: var(--motion-sm);
  --motion-click: var(--motion-md);
  --motion-page: var(--motion-lg);

  /* ==========================================================
        FOCUS SYSTEM
        ========================================================== */

  --focus-ring: 0 0 0 2px var(--color-border-focus);
  --focus-offset: 2px;
}

html,
body {
  background: var(--color-brand-primary-100);
  color: #222222;
}

main {
  margin: auto;
  margin-top: 51px;
}

main,
.header-wrapper {
  width: var(--bs-width-sm);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* body {
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.loaded {
  opacity: 1;
} */

.content-wrapper {
  width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.post-card {
  background: #fff;
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.post-title {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.3;
}

.post-title a {
  text-decoration: none;
  color: #222;
}

.post-title a:hover {
  color: #0066cc;
}

.post-excerpt {
  color: #666;
  line-height: 1.7;
}
/* sm */
@media (min-width: 568px) {
  main,
  .header-wrapper {
    width: var(--bs-width-md);
  }
  main {
    margin-top: 93px;
  }
}
/* md */
@media (min-width: 768px) {
  main,
  .header-wrapper {
    width: var(--bs-width-lg);
  }
  main {
    margin-top: 93px;
  }
}
/* lg */
@media (min-width: 1024px) {
  main,
  .header-wrapper {
    width: var(--bs-width-xl);
  }
  main {
    margin-top: 93px;
  }
}
/* xl */
@media (min-width: 1280px) {
  main,
  .header-wrapper {
    max-width: var(--bs-width-2xl);
  }
}
@media (min-width: 1536px) {
  main,
  .header-wrapper {
    max-width: var(--bs-width-2xl);
  }
}