:root,
[data-bs-theme=light] body {
    /* BODY */
    --vu-body-bg: #ffffff;
    --vu-body-color: #000000;

    /* SCROLL_BAR */
    --vu-scroll_track-bg: #e4e4e4;
    --vu-scroll_thumb-bg: linear-gradient(45deg, #0094ab33, #2f465c37);
    --vu-scroll_thumb-bg-hover: #9c9c9c;
    --vu-scroll_thumb-bg-active: #939393;

    /* CURSOR */
    --vu-cursor-bg: #febc5b7d;
    --vu-cursor-border_color: #febc5b;

    /* THEME SWITCHER */
    --vu-theme_switcher-color: #121212;
    --vu-theme_switcher-bg: #cdcdcd;

    /* HEADER */
    --vu-header-bg: #ffffff88;
    --vu-header-color: #000000;
    --vu-header-border_color: #6464642b;
    --vu-header_link-bg-hover: #0200720f;
    --vu-header_nav_toggle_btn-color: #000000;
    --vu-header_nav-bg: #ffffff;

    /* CONTENT */
    --vu-main-color: #2f465c;
    --vu-section-border_color: #ececec7d;
    --vu-sctn_sub_hd-color: #22272a;
    --vu-sctn_hd_dscrptn-color: #22272a;

    --vu-hero_name-bg: #00B4DB;
    --vu-hero_name-gradient: linear-gradient(to top, #0083B0, #00B4DB);

    --vu-hero_button-color: #ffffff;
    --vu-hero_button-bg: #00B4DB;
    --vu-hero_button-gradient: linear-gradient(to right, #0083B0, #00B4DB);
    --vu-hero_button-shadow: rgba(50, 50, 93, 0.25) 0px 3px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 6px -8px;
    --vu-hero_button-shadow-hover: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    --vu-hero_button-shadow-active: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

    --vu-heading_1-color: #467296;
    --vu-heading_1-shadow_color: #3b3b3b;
    
    --vu-heading_2-color: #467296;
    --vu-heading_2-underline_color: #01afab;

    --vu-heading_3-bg: #e7edff7c;

    --vu-heading_5-color: #1a3655;
    --vu-heading_5-underline_color: #01afab;

    --vu-heading_6-color: #3b3b3b;

    --vu-custom_hr-bg: #c6c6c6ae;

    --vu-page_loader-border_color: dodgerblue;

    --vu-mini_loader-border_color: #ffffff;

    /* BLOG */
    /* BLOG SNIP */
    --vu-blog_snip-bg: #ffffff;
    --vu-blog_snip-color: #000000;
    --vu-blog_snip-title_color: #000000;
    --vu-blog_snip-border_color: #53537c25;
    --vu-blog_snip-shadow_color-hover: #32325d40;
    --vu-blog_post_container-bg: #fdfdfd;
    --vu-blog_post_heading-color: #454545;
    --vu-blog_post_container-border_color: #ececec;
    --vu-blog_post_container-color: #000000;
    --vu-blog_post_meta_data-color: #424242;

    /* PROJECT */
    /* PROJECT SNIP */
    --vu-project_snip-bg: #ffffff;
    --vu-project_snip-shadow: #0000000d 0px 0px 0px 1px, #0000002e 0px 2px 4px;
    --vu-project_snip-color: #4B4B4B;
    --vu-project_snip_title-color: #000000;
    --vu-project_download_button-color: #ffffff;
    --vu-project_download_button-bg: #1875D0;
    --vu-project_download_button-shadow_color: #65626263;

    /* POETRY */
    /* POETRY POST */
    --vu-poetry_post_container-color: #ffffff;
    --vu-poetry_post_container-bg: #000000a1;
    --vu-poetry_post_head-color: #ffffff;
    --vu-poetry_post_meta_data_date-color: #ececec;
    --vu-download_poetry_button-border_color: #727272;
    --vu-download_poetry_button-bg-hover: #e8e8e8;

    /* POETRY SNIP */
    --vu-poetry_snippet-bg: #2f465c9f;
    --vu-poetry_snippet-color: #ffffff;
    --vu-poetry_snippet_preview-bg: #00000094;

    /* FORM PAGE */
    --vu-form_container-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    --vu-form_heading-color: #000000;

    /* FORM */
    --vu-form_note-color: #333333;
    --vu-form_span-color: #000000;
    --vu-form_response-color: #ff6347;
    --vu-form_input-border_color: #7a7a7a65;
    --vu-form_input-bg: #eeeeee15;
    --vu-form_input-color: #ffffff;
    --vu-form_input-outline_color: #afd7ffb2;
    --vu-form_input_span-color: #aeaeae;
    --vu-form_inlink-color: #949494;
    --vu-form_inlink_button-color: #1e90ff;
    --vu-form_submit_button-bg: #1e90ff;
    --vu-form_submit_button-gradient: linear-gradient(to right, #c31432, #240b36);
    --vu-form_submit_button-color: #ffffff;
    --vu-form_button-shadow_color-hover: #0000003a;
    --vu-form_button_loader-color: #ffffff;

    /* SUBSCRIBE FORM */
    --vu-subscribe_form-bg: #fdfdfd;
    --vu-subscribe_form_hd-color: #171717;
    --vu-subscribe_form_hd_tag_ln-color: #272727;
    --vu-subscribe_form-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    --vu-subscribe_form_input-color: #242424;
    --vu-subscribe_form_input-bg: #f2f2f27e;
    --vu-subscribe_form_input-outline_color: #ffbe9e7e;
    --vu-subscribe_form_input-placeholder_color: #5f5f5f;
    --vu-subscribe_form_submit_button-gradient: linear-gradient(90deg, #ff9966, #ff5e62);
    --vu-subscribe_form_submit_button-color: #ffffff;
    --vu-subscribe_form_submit_button_loader-color: #ffffff;

    /* SOCIAL BUTTONS */
    --vu-social_buttons-bg: #ffffff;
    --vu-social_buttons-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --vu-social_button-color-hover: #ffffff;
    --vu-social_button_facebook-color: #3B5999;
    --vu-social_button_youtube-color: #FF0000;
    --vu-social_button_gmail-color: #EA4335;
    --vu-social_button_twitter-color: #000000;
    --vu-social_button_instagram-color: #d6249f;
    --vu-social_button_instagram-bg-after: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    --vu-social_button_linkedin-color: #0077B5;
    --vu-social_button_github-color: #171515;

    /* FOOTER */
    --vu-footer-color: #ffffff;
    --vu-footer-bg: #141E30;
    --vu-footer-a-color-hover: #00c3ce;
    --vu-footer-border-color: #666666;

    /* COMMENT SYSTEM */
    --vu-comment_container-bg: #fdfdfd;
    --vu-comment_container-border_color: #ececec;
    --vu-comment_form_response-color: #e02c15;
    --vu-comment_form_input-color: #000000;
    --vu-comment_form_input_placeholder-color: #3b3b3b;
    --vu-comment_form_input-bg: #dddddd3f;
    --vu-comment_form_input-outline_color: #1e8fff4d;
    --vu-comment_form_submit_button-bg: #0093AB;
    --vu-comment_form_submit_button-color: #ffffff;
    --vu-comment_form_reply_button-border_color: #0093AB;
    --vu-comment_snippet-border_color: #aaaaaa3d;
    --vu-comment_snippet_user-color: #32527B;
    --vu-comment_snippet_datetime-color: #676767;
    --vu-comment_snippet_actions-color: #315b83c0;

    /* TINYMCE CONTENT */
    --vu-tinymce_caption-color: #999999;
    --vu-tinymce_hr-border_color: #cccccc;
    --vu-tinymce_code-bg: #e8e8e8;
    --vu-tinymce_blockquote-border_color: #cccccc;
}

:root,
[data-bs-theme=dark] body {
    /* BODY */
    --vu-body-bg: #11121d;
    --vu-body-color: #ffffff;
    
    /* SCROLL_BAR */
    --vu-scroll_track-bg: #272727;
    --vu-scroll_thumb-bg: linear-gradient(45deg, #50e8ffab, #9fd1ff92);
    --vu-scroll_thumb-bg-hover: #484848;
    --vu-scroll_thumb-bg-active: #6f6f6f;
    
    /* CURSOR */
    --vu-cursor-bg: #004f677d;
    --vu-cursor-border_color: #00648b;
    
    /* THEME SWITCHER */
    --vu-theme_switcher-color: #ffffff;
    --vu-theme_switcher-bg: #484747;
    
    /* HEADER */
    --vu-header-bg: #2222221d;
    --vu-header-color: #d4d4d4;
    --vu-header-border_color: #39393969;
    --vu-header_link-bg-hover: #4b4b4b5c;
    --vu-header_nav_toggle_btn-color: #ffffff;
    --vu-header_nav-bg: #000000;
    
    /* CONTENT */
    --vu-main-color: #E0E0E0;
    --vu-section-border_color: #2828286f;
    --vu-sctn_sub_hd-color: #9c9c9c;
    --vu-sctn_hd_dscrptn-color: #9c9c9c;

    --vu-hero_name-bg: #00B4DB;
    --vu-hero_name-gradient: linear-gradient(to top, #0083B0, #00B4DB);

    --vu-hero_button-color: #ffffff;
    --vu-hero_button-bg: #00B4DB;
    --vu-hero_button-gradient: linear-gradient(to right, #0083B0, #00B4DB);
    --vu-hero_button-shadow: rgba(50, 50, 93, 0.25) 0px 3px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 6px -8px;
    --vu-hero_button-shadow-hover: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    --vu-hero_button-shadow-active: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

    --vu-heading_1-color: #78b7e9;
    --vu-heading_1-shadow_color: #3b3b3b;
    
    --vu-heading_2-color: #78b7e9;
    --vu-heading_2-underline_color: #01afab;

    --vu-heading_3-bg: #e7edff7c;

    --vu-heading_5-color: #347bcc;
    --vu-heading_5-underline_color: #01afab;

    --vu-heading_6-color: #ffffff;

    --vu-custom_hr-bg: #c6c6c6ae;

    --vu-page_loader-border_color: dodgerblue;

    --vu-mini_loader-border_color: #ffffff;

    /* BLOG */
    /* BLOG SNIP */
    --vu-blog_snip-bg: #1d1d1d;
    --vu-blog_snip-color: #b2b2b2;
    --vu-blog_snip-title_color: #E0E0E0;
    --vu-blog_snip-border_color: #2f2f2f;
    --vu-blog_snip-shadow_color-hover: #131847bd;
    --vu-blog_post_container-bg: #000000;
    --vu-blog_post_heading-color: #ececec;
    --vu-blog_post_container-color: #ffffff;
    --vu-blog_post_container-border_color: #151515;
    --vu-blog_post_meta_data-color: #424242;

    /* PROJECT SNIP */
    /* PROJECT SNIP */
    --vu-project_snip-bg: #1d1d1d;
    --vu-project_snip-shadow: #0f1d320d 0px 0px 0px 1px, #0a16362e 0px 2px 4px;
    --vu-project_snip-color: #a7a7a7;
    --vu-project_snip_title-color: #ffffff;
    --vu-project_download_button-color: #ffffff;
    --vu-project_download_button-bg: #1875D0;
    --vu-project_download_button-shadow_color: #1b2c4763;

    /* POETRY */
    /* POETRY POST */
    --vu-poetry_post_container-color: #ffffff;
    --vu-poetry_post_container-bg: #000000a1;
    --vu-poetry_post_head-color: #ffffff;
    --vu-poetry_post_meta_data_date-color: #ececec;
    --vu-download_poetry_button-border_color: #727272;
    --vu-download_poetry_button-bg-hover: #4a4a4a;

    /* POETRY SNIP */
    --vu-poetry_snippet-bg: #2f465c9f;
    --vu-poetry_snippet-color: #ffffff;
    --vu-poetry_snippet_preview-bg: #00000094;

    /* FORM PAGE */
    --vu-form_container-shadow: #0000008a 0px 1px 1px, #9b9b9b8a 0px 0px 1px 1px;
    --vu-form_heading-color: #ffffff;

    /* FORM */
    --vu-form_note-color: #333333;
    --vu-form_span-color: #000000;
    --vu-form_response-color: #ff6347;
    --vu-form_input-border_color: #7a7a7a65;
    --vu-form_input-bg: #eeeeee15;
    --vu-form_input-color: #ffffff;
    --vu-form_input-outline_color: #afd7ffb2;
    --vu-form_input_span-color: #aeaeae;
    --vu-form_inlink-color: #949494;
    --vu-form_inlink_button-color: #1e90ff;
    --vu-form_submit_button-bg: #1e90ff;
    --vu-form_submit_button-gradient: linear-gradient(to right, #c31432, #831e59);
    --vu-form_submit_button-color: #ffffff;
    --vu-form_button-shadow_color-hover: #0000003a;
    --vu-form_button_loader-color: #ffffff;

    /* SUBSCRIBE FORM */
    --vu-subscribe_form-bg: #1d1d1d;
    --vu-subscribe_form_hd-color: #e7e7e7;
    --vu-subscribe_form_hd_tag_ln-color: #aeaeae;
    --vu-subscribe_form-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    --vu-subscribe_form_input-color: #cbcbcb;
    --vu-subscribe_form_input-bg: #2626267e;
    --vu-subscribe_form_input-outline_color: #ffbe9e;
    --vu-subscribe_form_input-placeholder_color: #9c9c9c;
    --vu-subscribe_form_submit_button-gradient: linear-gradient(90deg, #ff9966, #ff5e62);
    --vu-subscribe_form_submit_button-color: #ffffff;
    --vu-subscribe_form_submit_button_loader-color: #ffffff;

    /* SOCIAL BUTTONS */
    --vu-social_buttons-bg: #d8d8d8bc;
    --vu-social_buttons-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --vu-social_button-color-hover: #ffffff;
    --vu-social_button_facebook-color: #3B5999;
    --vu-social_button_youtube-color: #FF0000;
    --vu-social_button_gmail-color: #EA4335;
    --vu-social_button_twitter-color: #000000;
    --vu-social_button_instagram-color: #d6249f;
    --vu-social_button_instagram-bg-after: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    --vu-social_button_linkedin-color: #0077B5;
    --vu-social_button_github-color: #171515;

    /* FOOTER */
    --vu-footer-color: #ffffff;
    --vu-footer-bg: #141E30;
    --vu-footer-a-color-hover: #00c3ce;
    --vu-footer-border-color: #666666;

    /* COMMENT SYSTEM */
    --vu-comment_container-bg: #222222;
    --vu-comment_container-border_color: #121212;
    --vu-comment_form_response-color: #e02c15;
    --vu-comment_form_input-color: #ffffff;
    --vu-comment_form_input_placeholder-color: #ffffff;
    --vu-comment_form_input-bg: #eeeeee15;
    --vu-comment_form_input-outline_color: #afd7ffb2;
    --vu-comment_form_submit_button-bg: #0093AB;
    --vu-comment_form_submit_button-color: #ffffff;
    --vu-comment_form_reply_button-border_color: #34e4ff;
    --vu-comment_snippet-border_color: #aaaaaa3d;
    --vu-comment_snippet_user-color: #52c5a6;
    --vu-comment_snippet_datetime-color: #676767;
    --vu-comment_snippet_actions-color: #81c2ff;

    /* TINYMCE CONTENT */
    --vu-tinymce_caption-color: #8a8f97;
    --vu-tinymce_hr-border_color: #6d737b;
    --vu-tinymce_code-bg: #6d737b;
    --vu-tinymce_blockquote-border_color: #cccccc;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

@media only screen and (max-width: 799px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

::-webkit-scrollbar-track {
    background: var(--vu-scroll_track-bg);
}

::-webkit-scrollbar-thumb {
    cursor: pointer;
    background: var(--vu-scroll_thumb-bg);
    background-clip: padding-box;
    border: none;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vu-scroll_thumb-bg-hover);
}

::-webkit-scrollbar-thumb:active {
    background: var(--vu-scroll_thumb-bg-active);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    max-width: 1600px;
    margin: 0 auto;
}

body {
    margin: 0;
    padding: 0;
    font-family: verdana, geneva, sans-serif;   
    font-size: 16px;
    min-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--vu-body-bg);
    color: var(--vu-body-color);
}

main {
    flex-grow: 1;
}

header,
footer {
    flex-grow: 0;
    flex-shrink: 0;
}

@media only screen and (min-width: 800px) {
    .not-in-pc {
        display: none;
    }
}

@media only screen and (max-width: 799px) {
    .not-in-mob {
        display: none;
    }
}

button {
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: 0.2s;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
}

button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

a {
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s;
    color: inherit;
    font-family: inherit;
}

img {
    max-width: 100%;
    overflow: hidden;
}

#custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 1px solid var(--vu-cursor-border_color);
    background-color: var(--vu-cursor-bg);
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.1s ease-out;
    z-index: 9999;
}

#theme-switcher {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: var(--vu-theme_switcher-bg);
    color: var(--vu-theme_switcher-color);
    cursor: pointer;
    padding: 4px 4px 2px 4px;
    border-radius: 4px;
    z-index: 1;
}

figure {
    margin: 0;
}

i.fi {
    line-height: 0;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.tilt-effect {
  transition: transform 0.1s ease-out;
  transform-style: preserve-3d;
}