@font-face {
  font-family: 'Poppins Regular';
   src: url(fonts/Poppins-Regulart.ttf);
}

@font-face {
  font-family: 'Poppins Light';
   src: url(fonts/Poppins-Light.ttf);
}

@font-face {
  font-family: 'Poppins Medium';
   src: url(fonts/Poppins-Medium.ttf);
}

html {
  --sd-color-primary: rgb(128, 156, 187);
  --sd-color-secondary: rgb(255, 205, 49);
  --sd-color-success: rgb(0, 147, 157);
  --sd-color-info: rgb(128, 156, 187);
  --sd-color-warning: rgb(255, 205, 49);
  --sd-color-danger: rgb(218, 131, 123);
  --sd-color-light: #ffffff;
  --sd-color-muted: #6c757d;
  --sd-color-dark: #262626;
}

html {
    /*****************************************************************************
    * Font features used in this theme
    */

    /* // base font size - applied at body/html level */
    --pst-font-size-base: 15px;

    /* // heading font sizes */
    --pst-font-size-h1: 36px;
    --pst-font-size-h2: 32px;
    --pst-font-size-h3: 26px;
    --pst-font-size-h4: 21px;
    --pst-font-size-h5: 18px;
    --pst-font-size-h6: 16px;

    /* // smaller then heading font sizes */
    --pst-font-size-milli: 12px;

    /* // primary sidebar management */
    --pst-sidebar-primary-font-size: 0.9em;
    --pst-sidebar-primary-caption-font-size: 0.9em;

    /* // smaller than heading font sizes */
    --pst-font-size-milli: 12px;

    /* // Sidebar styles */
    --pst-sidebar-font-size: 0.9em;
    --pst-sidebar-font-size-mobile: 1.2em;
    --pst-sidebar-header-font-size: 1.2em;
    --pst-sidebar-header-font-weight: 600;

    /* // Font weights */
    --pst-font-weight-caption: 300;
    --pst-font-weight-heading: 600;

    /* // Font family */
    /* // These are adapted from https://systemfontstack.com/ */
    --pst-font-family-base-system: Poppins Light, Poppins Regular, -apple-system, BlinkMacSystemFont, Segoe UI,
      "Helvetica Neue", Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
      Segoe UI Symbol;
    --pst-font-family-header-system: Poppins Medium, -apple-system, BlinkMacSystemFont, Segoe UI,
      "Helvetica Neue", Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
      Segoe UI Symbol;
    --pst-font-family-monospace-system: "SFMono-Regular", Menlo, Consolas, Monaco,
      Liberation Mono, Lucida Console, monospace;

    --pst-font-family-base: var(--pst-font-family-base-system);
    --pst-font-family-heading: var(--pst-font-family-header-system);
    --pst-font-family-monospace: var(--pst-font-family-monospace-system);
}

html {
    /*****************************************************************************
    * Icon
    */

    /* font awesome icons */
    --pst-icon-check-circle: "\f058"; /* fas fa-check-circle */
    --pst-icon-info-circle: "\f05a"; /* fas fa-info-circle */
    --pst-icon-exclamation-triangle: "\f071"; /* fas fa-exclamation-triangle */
    --pst-icon-exclamation-circle: "\f06a"; /* fas fa-exclamation-circle */
    --pst-icon-times-circle: "\f057"; /* fas fa-times-circle */
    --pst-icon-lightbulb: "\f0eb"; /* fas fa-lightbulb */
}

html {
    /*****************************************************************************
    * Admonitions
    **/

    --pst-icon-admonition-default: var(--pst-icon-info-circle);
    --pst-icon-admonition-note: var(--pst-icon-info-circle);
    --pst-icon-admonition-attention: var(--pst-icon-exclamation-circle);
    --pst-icon-admonition-caution: var(--pst-icon-exclamation-triangle);
    --pst-icon-admonition-warning: var(--pst-icon-exclamation-triangle);
    --pst-icon-admonition-danger: var(--pst-icon-exclamation-triangle);
    --pst-icon-admonition-error: var(--pst-icon-times-circle);
    --pst-icon-admonition-hint: var(--pst-icon-lightbulb);
    --pst-icon-admonition-tip: var(--pst-icon-lightbulb);
    --pst-icon-admonition-important: var(--pst-icon-exclamation-circle);
}

/*******************************************************************************
* light theme
*
* all the variables used for light theme coloring
*/
html[data-theme="light"] {
    /*****************************************************************************
    * main colors
    */
    --pst-color-primary: rgb(128, 156, 187);
    --pst-color-secondary: rgb(255, 205, 49);
    --pst-color-success: rgb(0, 147, 157);
    --pst-color-info: var(--pst-color-primary);
    --pst-color-warning: var(--pst-color-secondary);
    --pst-color-danger: rgb(218, 131, 123);
    --pst-color-text-base: rgb(38, 38, 38);
    --pst-color-text-muted: rgb(77, 77, 77);
    --pst-color-border: rgb(205, 205, 205);
    --pst-color-shadow: rgb(220, 220, 220);

    /*****************************************************************************
    * depth colors
    *
    * background: the more in depth color
    * on-background: the object directly set on the background, use of shadows in light theme
    * surface: object set on the background (without shadows)
    * on_surface: object set on surface object (without shadows)
    */
    --pst-color-background: rgb(255, 255, 255);
    --pst-color-on-background: rgb(255, 255, 255);
    --pst-color-surface: rgb(255, 255, 255);
    --pst-color-on-surface: rgb(128, 156, 187);

    /*****************************************************************************
    * extentions
    */

    --pst-color-panel-background: var(--pst-color-background);

    /*****************************************************************************
    * layout
    */

    /* // links */
    --pst-color-link: var(--pst-color-primary);
    --pst-color-link-hover: var(--pst-color-secondary);

    /* // inline code */
    --pst-color-inline-code: rgb(232, 62, 140);

    /* // targeted content */
    --pst-color-target: rgb(255, 205, 49);

    /* // hide any content that should not be displayed in the light theme */
    .only-dark {
      display: none !important;
    }
}

/*******************************************************************************
* dark theme
*
* all the variables used for dark theme coloring
*/
html[data-theme="dark"] {
    /*****************************************************************************
    * main colors
    */
    --pst-color-primary: rgb(128, 156, 187);
    --pst-color-secondary: rgb(255, 205, 49);
    --pst-color-success: rgb(152, 151, 26);
    --pst-color-info: var(--pst-color-primary);
    --pst-color-warning: var(--pst-color-secondary);
    --pst-color-danger: rgb(204, 36, 29);
    --pst-color-text-base: rgb(255, 255, 255);
    --pst-color-text-muted: rgb(192, 192, 192);
    --pst-color-border: rgb(192, 192, 192);
    --pst-color-shadow: var(--pst-color-background);

    /*****************************************************************************
    * depth colors
    *
    * background: the more in depth color
    * on-background: the object directly set on the background, use of a light grey in dark theme
    * surface: object set on the background (without shadows)
    * on_surface: object set on surface object (without shadows)
    */
    --pst-color-background: rgb(38, 38, 38);
    --pst-color-on-background: rgb(52, 52, 52);
    --pst-color-surface: rgb(53, 53, 53);
    --pst-color-on-surface: rgb(67, 67, 67);

    /*****************************************************************************
    * extentions
    */

    --pst-color-panel-background: var(--pst-color-background-up);

    /*****************************************************************************
    * layout
    */

    /* // links */
    --pst-color-link: var(--pst-color-primary);
    --pst-color-link-hover: var(--pst-color-secondary);

    /* // inline code */
    --pst-color-inline-code: rgb(221, 158, 194);

    /* // targeted content */
    --pst-color-target: rgb(71, 39, 0);

    /* // hide any content that should not be displayed in the dark theme */
    .only-light {
      display: none !important;
    }
}