/*
Theme variables:
- main_bg_color: page background
- main_text_color: main text color
- gradient: title gradient
- purple_text_color: accent text color
- text_bg_color: highlighted text background
- item_bg_color: card background
- item_hover_color: card hover background
- item_left_title_color: card title color
- item_left_text_color: card body color
- footer_text_color: footer text color
- left_tag_item: tag background
- card_filter: card blur strength
- back_filter: page blur strength
- back_filter_color: page overlay color
- fill: svg fill color
*/

/*
Only the last `html { ... }` block is active by default.
Keep the theme block you want at the end of the file.
*/

html {
    --name: theme-1;
    --main_bg_color: url(../img/background.jpg);
    --main_text_color: #eeeeee;
    --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
    --purple_text_color: #747bff;
    --text_bg_color: #00000040;
    --item_bg_color: #00000038;
    --item_hover_color: #33333338;
    --item_left_title_color: #ffffff;
    --item_left_text_color: #ffffff;
    --footer_text_color: #ffffff;
    --left_tag_item: rgb(27 42 57 / 20%);
    --card_filter: 15px;
    --back_filter: 0px;
    --back_filter_color: #00000030;
    --fill: #ffffff;
}

html {
    --name: theme-2;
    --main_bg_color: url(../img/background.jpg);
    --main_text_color: #000000;
    --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
    --purple_text_color: #747bff;
    --text_bg_color: rgb(121 163 231);
    --item_bg_color: rgba(249, 250, 251, 0.42);
    --item_hover_color: rgba(244, 245, 246, 0.8);
    --item_left_title_color: #000000;
    --item_left_text_color: #494949;
    --footer_text_color: #ffffff;
    --left_tag_item: #c7e1fa;
    --card_filter: 0px;
    --back_filter: 20px;
    --back_filter_color: #00000030;
    --fill: #000000;
}

html {
    --name: theme-3;
    --main_bg_color: linear-gradient(50deg, #a2d1ff, #ffffff);
    --main_text_color: #000000;
    --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
    --purple_text_color: #747bff;
    --text_bg_color: rgb(196 217 251);
    --item_bg_color: rgba(249, 250, 251, 0.5);
    --item_hover_color: rgba(244, 245, 246, 0.8);
    --item_left_title_color: #000000;
    --item_left_text_color: #494949;
    --footer_text_color: #222222;
    --left_tag_item: linear-gradient(50deg, #a2d1ff, #ffffff);
    --card_filter: 0px;
    --back_filter: 0px;
    --back_filter_color: #00000000;
    --fill: #000000;
}

html {
    --name: theme-4;
    --main_bg_color: #ffffff;
    --main_text_color: #000000;
    --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
    --purple_text_color: #747bff;
    --text_bg_color: rgb(240 243 247);
    --item_bg_color: rgb(247 247 247);
    --item_hover_color: rgba(244, 245, 246, 0.5);
    --item_left_title_color: #000000;
    --item_left_text_color: #494949;
    --footer_text_color: #222222;
    --left_tag_item: #ffffff;
    --card_filter: 0px;
    --back_filter: 0px;
    --back_filter_color: #00000000;
    --fill: #000000;
}

html {
    --name: theme-5;
    --main_bg_color: url(../img/background.jpg);
    --main_text_color: #eeeeee;
    --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
    --purple_text_color: #747bff;
    --text_bg_color: #00000040;
    --item_bg_color: #00000038;
    --item_hover_color: #33333338;
    --item_left_title_color: #ffffff;
    --item_left_text_color: #ffffff;
    --footer_text_color: #ffffff;
    --left_tag_item: rgb(27 42 57 / 20%);
    --card_filter: 0px;
    --back_filter: 19px;
    --back_filter_color: #00000030;
    --fill: #ffffff;
}