:root {
    /* contact */
    --body-bg-color: whitesmoke;
    --label-color: black;
    --textbox-color: black;
    --textbox-bg-color: white;
    --textbox-border-color: #CCCCCC;
    --contact-as-wrapper: black;
    --contact-option-bg: white;
    --checkbox-bg: white;
    --checkbox-border: #CCCCCC;
    --checkbox-checked-bg: black;
    --button-bg: black;
    --button-color: white;
    --textbox-inputs-focus-border: rgba(0, 0, 0, 0.4);
    --scrollbar-track-bg: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-bg-hover: rgba(0, 0, 0, 0.3); 

    /* index */
    --hireme-btn-bg: black;
    --hireme-btn-border: black;
    --hireme-btn-color: white;
    --hireme-btn-div: white;
    --hireme-btn-img: invert(1);

    --btn-learnmore-bg: rgba(0, 0, 0, 0.2);
    --btn-learnmore-color: black;

    --extra-imgs-bg: #0E0E0E;
    --extra-img-border: #1F1F1F;

    --about-wrapper-bg: #0E0E0E;
    --about-wrapper-border: #1F1F1F;
    --about-wrapper-color: white;

    --about-text-span: black;

    --mini-profile-wrapper-bg-shadow: #cccccc70;

    --web-grid-box-bg: white;
    --web-grid-box-border: white;
    --web-grid-box-color: black;

    --experience-h1: black;
    --experience-view-bg: white;
    --experience-view-border: white;
    --folder-img: invert(1);
    --search-img: invert(0);

    --work-hr: black;

    --more-on-bg: rgb(0, 0, 0);
    --more-on-border: rgb(0, 0, 0);
    --more-on-color: rgb(255, 255, 255);
    --more-on-img: invert(0);

    --proj-type-img: invert(0);

    --sidebar-bg: rgba(255, 255, 255, 0.8);

    --white-boxes-border: rgba(0, 0, 0, 0.1);

    --project-bg: rgba(0, 0, 0, 0.1);
    --project-color: black;

    --username-bg: rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --body-bg-color: #101010;
    --label-color: white;
    --textbox-color: white;
    --textbox-bg-color: rgba(255, 255, 255, 0.1);
    --textbox-border-color: rgba(255, 255, 255, 0.1);
    --contact-as-wrapper: rgba(0, 0, 0, 0.5);
    --contact-option-bg: white;
    --checkbox-bg: rgba(255, 255, 255, 0.1);
    --checkbox-border: rgba(255, 255, 255, 0.1);
    --checkbox-checked-bg: rgba(255, 255, 255, 0.1);
    --button-bg: rgba(255, 255, 255, 0.2);
    --button-color: rgb(255, 255, 255);
    --textbox-inputs-focus-border: rgba(255, 255, 255, 0.2);
    --scrollbar-track-bg: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-bg: rgba(255, 255, 255, 0.3);
    --scrollbar-thumb-bg-hover: rgba(255, 255, 255, 0.5);

    /* index */
    --hireme-btn-bg: rgb(255, 255, 255);
    --hireme-btn-border: rgb(255, 255, 255);
    --hireme-btn-color: rgb(0, 0, 0);
    --hireme-btn-div: rgb(0, 0, 0);
    --hireme-btn-img: invert(0);

    --btn-learnmore-bg: #CCCCCC50;
    --btn-learnmore-color: rgb(255, 255, 255);

    --extra-imgs-bg: white;
    --extra-img-border: white;

    --about-wrapper-bg: rgba(255, 255, 255, 0.1);
    --about-wrapper-border: rgba(255, 255, 255, 0.1);
    --about-wrapper-color: white;

    --about-text-span: rgb(255, 255, 255);

    --mini-profile-wrapper-bg-shadow: #cccccc3b;

    --web-grid-box-bg: rgba(255, 255, 255, 0.1);
    --web-grid-box-border: rgba(255, 255, 255, 0.2);
    --web-grid-box-color: white;

    --experience-h1: rgb(255, 255, 255);
    --experience-view-bg: rgba(255, 255, 255, 0.1);
    --experience-view-border: rgba(255, 255, 255, 0.2);
    --folder-img: invert(0);
    --search-img: invert(1);

    --work-hr: rgba(255, 255, 255, 0.2);

    --more-on-bg: rgb(0, 0, 0);
    --more-on-border: rgb(0, 0, 0);
    --more-on-color: rgb(255, 255, 255);
    --more-on-img: invert(0);

    --proj-type-img: invert(1);

    --sidebar-bg: rgba(0, 0, 0, 0.8);

    --white-boxes-border: rgba(0, 0, 0, 0.1);

    --project-bg: rgba(255, 255, 255, 0.1);
    --project-color: rgb(255, 255, 255);

    --username-bg: rgba(255, 255, 255, 0.1);

  }
}

:root.light {
    --body-bg-color: whitesmoke;
    --label-color: black;
    --textbox-color: black;
    --textbox-bg-color: white;
    --textbox-border-color: #CCCCCC;
    --contact-as-wrapper: black;
    --contact-option-bg: white;
    --checkbox-bg: white;
    --checkbox-border: #CCCCCC;
    --checkbox-checked-bg: black;
    --button-bg: black;
    --button-color: white;
    --textbox-inputs-focus-border: rgba(0, 0, 0, 0.4);
    --scrollbar-track-bg: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-bg-hover: rgba(0, 0, 0, 0.3); 

    /* index */
    --hireme-btn-bg: black;
    --hireme-btn-border: black;
    --hireme-btn-color: white;
    --hireme-btn-div: white;
    --hireme-btn-img: invert(1);

    --btn-learnmore-bg: rgba(0, 0, 0, 0.2);
    --btn-learnmore-color: black;

    --extra-imgs-bg: #0E0E0E;
    --extra-img-border: #1F1F1F;

    --about-wrapper-bg: #0E0E0E;
    --about-wrapper-border: #1F1F1F;
    --about-wrapper-color: white;

    --about-text-span: black;

    --mini-profile-wrapper-bg-shadow: #cccccc70;

    --web-grid-box-bg: white;
    --web-grid-box-border: white;
    --web-grid-box-color: rgb(0, 0, 0);

    --experience-h1: black;
    --experience-view-bg: white;
    --experience-view-border: white;
    --folder-img: invert(1);
    --search-img: invert(0);

    --more-on-bg: rgb(0, 0, 0);
    --more-on-border: rgb(0, 0, 0);
    --more-on-color: rgb(255, 255, 255);
    --more-on-img: invert(0);

    --proj-type-img: invert(0);

    --sidebar-bg: rgba(255, 255, 255, 0.8);

    --white-boxes-border: rgba(0, 0, 0, 0.1);

    --project-bg: rgba(0, 0, 0, 0.1);
    --project-color: black;

    --username-bg: rgba(0, 0, 0, 0.1);
}

:root.dark {
    --body-bg-color: #101010;
    --label-color: white;
    --textbox-color: white;
    --textbox-bg-color: rgba(255, 255, 255, 0.1);
    --textbox-border-color: rgba(255, 255, 255, 0.1);
    --contact-as-wrapper: rgba(0, 0, 0, 0.5);
    --contact-option-bg: white;
    --checkbox-bg: rgba(255, 255, 255, 0.1);
    --checkbox-border: rgba(255, 255, 255, 0.1);
    --checkbox-checked-bg: rgba(255, 255, 255, 0.1);
    --button-bg: rgba(255, 255, 255, 0.2);
    --button-color: rgb(255, 255, 255);
    --textbox-inputs-focus-border: rgba(255, 255, 255, 0.2);
    --scrollbar-track-bg: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-bg: rgba(255, 255, 255, 0.3);
    --scrollbar-thumb-bg-hover: rgba(255, 255, 255, 0.5);

    /* index */
    --hireme-btn-bg: rgb(255, 255, 255);
    --hireme-btn-border: rgb(255, 255, 255);
    --hireme-btn-color: rgb(0, 0, 0);
    --hireme-btn-div: rgb(0, 0, 0);
    --hireme-btn-img: invert(0);

    --btn-learnmore-bg: #CCCCCC50;
    --btn-learnmore-color: rgb(255, 255, 255);

    --extra-imgs-bg: white;
    --extra-img-border: white;

    --about-wrapper-bg: rgba(255, 255, 255, 0.1);
    --about-wrapper-border: rgba(255, 255, 255, 0.1);
    --about-wrapper-color: white;

    --about-text-span: rgb(255, 255, 255);

    --mini-profile-wrapper-bg-shadow: #cccccc3b;

    --web-grid-box-bg: rgba(255, 255, 255, 0.1);
    --web-grid-box-border: rgba(255, 255, 255, 0.2);
    --web-grid-box-color: white;

    --experience-h1: rgb(255, 255, 255);
    --experience-view-bg: rgba(255, 255, 255, 0.1);
    --experience-view-border: rgba(255, 255, 255, 0.2);
    --folder-img: invert(0);
    --search-img: invert(1);

    --work-hr: rgba(255, 255, 255, 0.2);

    --more-on-bg: rgb(0, 0, 0);
    --more-on-border: rgb(0, 0, 0);
    --more-on-color: rgb(255, 255, 255);
    --more-on-img: invert(0);

    --proj-type-img: invert(1);

    --sidebar-bg: rgba(0, 0, 0, 0.8);

    --white-boxes-border: rgba(0, 0, 0, 0.1);

    --project-bg: rgba(255, 255, 255, 0.1);
    --project-color: rgb(255, 255, 255);

    --username-bg: rgba(255, 255, 255, 0.1);
}