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

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

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

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

:root {
    --bs-body-bg: #f9fafb !important;
    --bs-body-bg-image: url(../images/bg_light.png);
    --color-menu: #000;
    --high-light: #ff7f00;
    --color-light: #fff;
    --color-dark: #000;
    --color-primary: #535353;
    --search-background: #002144;
    --search-border: #909cad;
    --header-bg: #fff;
    --box-bg-color: #fff;
    --item-background: #fff;
    --shadow-1: 0px 0px 24px rgba(0, 0, 0, 0.13);
    --shadow-2: 0px 6px 30px rgba(0, 0, 0, .05);
    --border-card: #dbdada;
    --border-btn: #dfdfdf;
    --bg-btn-action: #fff;
    --search-complete-bg: #fff;
    --search-complete-border: #cecece;
    --card-hover: linear-gradient(180deg, #ff8923, #eb3d10);
    --bg-paging: #fff;
    --bg-btn-action-hover: linear-gradient(90deg, #ff562a, #e53001);
    --nav-slide-btn: #7e7e7e;
}

html[data-theme=dark]:root {
    --bs-body-bg: #000122 !important;
    --bs-body-bg-image: url(../images/bg_dark.png);
    --color-menu: #fff;
    --color-primary: #fff;
    --high-light: #ff7f00;
    --search-background: #002144;
    --search-border: #f5fff770;
    --color-light: #fff;
    --color-dark: #000;
    --box-bg-color: #002144;
    --header-bg: transparent;
    --item-background: #002144;
    --shadow-1: 0px 0px 24px rgba(0, 0, 0, 0.13);
    --shadow-2: 0px 6px 30px rgba(0, 0, 0, .05);
    --border-card: #03274d;
    --bg-paging: #010334;
    --card-hover: linear-gradient(180deg, #ff7f00, #e71f15);
    --search-complete-bg: #000;
    --search-complete-border: #343434;
    --bg-btn-action: linear-gradient(45deg, #f7b439, #b58121);
    --border-btn: #5a5656;
    --bg-btn-action-hover: linear-gradient(90deg, #ff562a, #e53001);
    --nav-slide-btn: #000122;

}