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: linear-gradient(to top, #006fc1, #001556 100%, #001556 75%, #001858 75%);;
    --zon-common-text-color: #fff;
    --zon-theme-color: #00175a;
    --zon-div-color: #999;
    --zon-muted-color: #777;
    --zon-more-button-bg-color: #f9d005;
    --zon-search-bg-color: #4b80c9;
    --zon-search-hover-color: #dcdcdc81;
    --zon-gmeta-bg-color: #dcdcdc81;
    --zon-border-color: #dbdada5c;
    --zon-overlay-bg-color: #000000c5;
    --zon-cursor-color: #ff7b00;
    --zon-toggler-bg-color: #dcdcdc;
    --zon-icon-color: #111;
    --zon-dark-logo: none;
    --zon-light-logo: block;
    --zon-sidebar-shadow: 0px 0px 40px 0px #111;
    --zon-card-shadow: 0px 3px 10px #0000000A;
    --zon-blog-social-button-bg-hover-color: #dcdcdc;
    --zon-comment-input-b-color: #dcdcdc;
    --zon-text-button-color:#00175a;
}

@font-face {
    font-family: "Fredoka";
    src: url("../fonts/Fredoka-Medium.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Fredoka";
    src: url("../fonts/Fredoka-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Fredoka";
    src: url("../fonts/Fredoka-SemiBold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}