html[zontal-theme="dark"] {
    --zon-body-bg-color: #131740;
    --zon-body-bg: #0d102d;
    --zon-common-text-color: #dcdcdc;
    --zon-theme-color: #ff3814;
    --zon-div-color: #999;
    --zon-muted-color: #777;
    --zon-more-button-bg-color: #222;
    --zon-search-bg-color: rgb(255 255 255 / 8%);
    --zon-search-hover-color: #333;
    --zon-gmeta-bg-color: #222;
    --zon-border-color: #5266b0;
    --zon-overlay-bg-color: #000000af;
    --zon-cursor-color: #ff7b00;
    --zon-toggler-bg-color: #222;
    --zon-icon-color: #fff;
    --zon-dark-logo: block;
    --zon-light-logo: none;
    --zon-sidebar-shadow: 0px 0px 40px 0px #000;
    --zon-card-shadow: 0px 3px 10px #303f7696;
    --zon-blog-social-button-bg-hover-color: #222;
    --zon-comment-input-b-color: #222;
}

html[zontal-theme="light"] {
    --zon-body-bg-color: #100e12;
    --zon-common-text-color: #b1b5bb;
    --zon-theme-color: #09090a;
    --zon-bg-component: #1d1d20;
    --zon-div-color: #999;
    --zon-muted-color: #777;
    --zon-more-button-bg-color: #ffdb2d;
    --zon-search-bg-color: #3a3a3a;
    --zon-search-hover-color: #dcdcdc81;
    --zon-gmeta-bg-color: #dcdcdc81;
    --zon-border-color: #dbdada2b;
    --zon-overlay-bg-color: #000000c5;
    --zon-cursor-color: #ff7b00;
    --zon-toggler-bg-color: #dcdcdc;
    --zon-icon-color: #fff;
    --zon-dark-logo: none;
    --zon-light-logo: block;
    --zon-sidebar-shadow: 0px 0px 40px 0px #111;
    /*--zon-card-shadow: 0 0 8px #FF4FBE;;*/
    --zon-blog-social-button-bg-hover-color: #dcdcdc;
    --zon-comment-input-b-color: #dcdcdc;
    --zon-text-button-color:#fff;
    --zon-bg-pagination: #0451b5;
    --color-btn-hover: #000;
    --color-heading: #fff;
    --font-heading: 'Orbitron', sans-serif;
}

@font-face {
  font-family: "Fredoka";
  src: 
    url("../fonts/Fredoka-Medium.woff2") format("woff2"),
    url("../fonts/Fredoka-Medium.woff")  format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 5%;
}

@font-face {
  font-family: "Fredoka";
  src: 
    url("../fonts/Fredoka-Regular.woff2") format("woff2"),
    url("../fonts/Fredoka-Regular.woff")  format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 5%;
}

@font-face {
  font-family: "Fredoka";
  src: 
    url("../fonts/Fredoka-SemiBold.woff2") format("woff2"),
    url("../fonts/Fredoka-SemiBold.woff")  format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 5%;
}

@font-face {
  font-family: "Orbitron";
  src: 
    url("../fonts/Orbitron-Medium.woff2") format("woff2"),
    url("../fonts/Orbitron-Medium.woff")  format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 5%;
}

@font-face {
  font-family: "Orbitron";
  src: 
    url("../fonts/Orbitron-Black.woff2") format("woff2"),
    url("../fonts/Orbitron-Black.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 5%;
}