:root {
    [data-theme='soft-rebecca'] {
        /* buttons */
        --btn: hsl(267, 50%, 50%);
        --btn_hover: hsl(267, 50%, 40%);
        --btn_txt: hsl(0, 0%, 100%);

        /* headers and bars */
        --hdr_bkgr: hsl(267, 40%, 94%);
        --hdr_txt: hsl(267, 60%, 30%);
        --hline: hsl(267, 40%, 80%);

        /* text and background*/
        --heading: hsl(267, 30%, 35%);
        --txt: hsl(260, 33%, 2%);
        --bkgr: hsl(267, 30%, 96%);

        /* forms */
        --input_bkgr: hsl(0, 0%, 100%);
        --input_txt: hsl(267, 50%, 25%);
        --input_placeholder: hsl(267, 20%, 60%);

        /* nav */
        --nav_bkgr: hsl(267, 30%, 93%);
        --nav_bkgr_open: hsl(267, 25%, 97%);
        --nav_hdr_txt: hsl(267, 50%, 35%);
        --nav_txt_open: hsl(267, 50%, 35%);
        --nav_txt: hsl(267, 50%, 35%);
        --nav_line: hsl(267, 30%, 88%);
        --nav_hover: hsl(267, 35%, 90%);
        --nav_hover_txt: hsl(267, 60%, 30%);
        --nav_sel_bkgr: hsl(267, 50%, 56%);
        --nav_sel_txt: hsl(0, 0%, 100%);

        /* details-summary */
        --sum_bkgr: hsl(267, 50%, 50%);
        --sum_txt: hsl(267, 50%, 98%);
        --det_bkgr: hsl(267, 50%, 95%);
        --det_txt: hsl(267, 50%, 25%);

        /* tables */
        --tbl_bkgr: hsl(267, 50%, 99%);
        --tbl_txt: hsl(267, 50%, 25%);
        --tbl_line: hsl(267, 30%, 90%);
        --tbl_hover: hsl(267, 40%, 96%);
        --tbl_hover_txt: hsl(267, 60%, 25%);
        --tbl_sel_bkgr: hsl(267, 50%, 75%);
        --tbl_sel_txt: hsl(267, 50%, 98%);

        /* icons */
        --icn_bkgr: hsl(267, 40%, 92%);
        --icn_stroke: hsl(267, 50%, 45%);
        --icn_fill: hsl(267, 50%, 35%);
        --icn_hover: hsl(267, 45%, 88%);
        --icn_sel_bkgr: hsl(267, 50%, 70%);
        --icn_sel_stroke: hsl(267, 50%, 98%);

        /* misc */
        --line: hsl(267, 30%, 88%);
    }

    /* ----------------------------------------------------------------------------------------------- */

    [data-theme='soft-dodger'] {
        /* buttons */
        --btn: hsl(210, 50%, 50%);
        --btn_hover: hsl(210, 50%, 40%);
        --btn_txt: hsl(210, 0%, 100%);

        /* headers and bars */
        --hdr_bkgr: hsl(210, 40%, 94%);
        --hdr_txt: hsl(210, 60%, 30%);
        --hline: hsl(210, 40%, 80%);

        /* text and background*/
        --heading: hsl(210, 50%, 35%);
        --txt: hsl(210, 50%, 25%);
        --bkgr: hsl(210, 50%, 96%);

        /* forms */
        --input_bkgr: hsl(210, 0%, 99%);
        --input_txt: hsl(210, 50%, 25%);
        --input_placeholder: hsl(210, 20%, 60%);

        /* nav */
        --nav_bkgr: hsl(210, 30%, 93%);
        --nav_bkgr_open: hsl(210, 25%, 97%);
        --nav_hdr_txt: hsl(210, 50%, 35%);
        ;
        --nav_txt_open: hsl(210, 50%, 35%);
        --nav_txt: hsl(210, 50%, 35%);
        --nav_line: hsl(210, 30%, 88%);
        --nav_hover: hsl(210, 35%, 90%);
        --nav_hover_txt: hsl(210, 60%, 30%);
        --nav_sel_bkgr: hsl(210, 50%, 56%);
        --nav_sel_txt: hsl(210, 0%, 99%);

        /* details-summary */
        --sum_bkgr: hsl(210, 50%, 50%);
        --sum_txt: hsl(210, 50%, 98%);
        --det_bkgr: hsl(210, 50%, 95%);
        --det_txt: hsl(210, 50%, 25%);

        /* tables */
        --tbl_bkgr: hsl(210, 50%, 99%);
        --tbl_txt: hsl(210, 50%, 25%);
        --tbl_line: hsl(210, 30%, 90%);
        --tbl_hover: hsl(210, 40%, 96%);
        --tbl_hover_txt: hsl(210, 60%, 25%);
        --tbl_sel_bkgr: hsl(210, 50%, 75%);
        --tbl_sel_txt: hsl(210, 50%, 98%);

        /* icons */
        --icn_bkgr: hsl(210, 40%, 92%);
        --icn_stroke: hsl(210, 50%, 45%);
        --icn_fill: hsl(210, 50%, 35%);
        --icn_hover: hsl(210, 45%, 88%);
        --icn_sel_bkgr: hsl(210, 50%, 70%);
        --icn_sel_stroke: hsl(210, 50%, 98%);

        /* misc */
        --line: hsl(210, 30%, 88%);
    }

    /* ----------------------------------------------------------------------------------------------- */

    [data-theme='soft-nature'] {
        /* buttons */
        --btn: hsl(160, 35%, 50%);
        --btn_hover: hsl(160, 35%, 40%);
        --btn_txt: hsl(160, 35%, 100%);

        /* headers and bars */
        --hdr_bkgr: hsl(160, 35%, 94%);
        --hdr_txt: hsl(160, 35%, 30%);
        --hline: hsl(160, 35%, 80%);

        /* text and background*/
        --heading: hsl(160, 35%, 35%);
        --txt: hsl(160, 35%, 25%);
        --bkgr: hsl(160, 35%, 96%);

        /* forms */
        --input_bkgr: hsl(160, 35%, 95%);
        --input_txt: hsl(160, 35%, 25%);
        --input_placeholder: hsl(160, 35%, 60%);

        /* nav */
        --nav_bkgr: hsl(160, 35%, 90%);
        --nav_bkgr_open: hsl(160, 35%, 98%);
        --nav_hdr_txt: hsl(160, 35%, 5%);
        --nav_txt_open: hsl(160, 35%, 5%);
        --nav_txt: hsl(160, 35%, 5%);
        --nav_line: hsl(160, 35%, 88%);
        --nav_hover: hsl(160, 35%, 90%);
        --nav_hover_txt: hsl(160, 35%, 30%);
        --nav_sel_bkgr: hsl(160, 35%, 56%);
        --nav_sel_txt: hsl(160, 35%, 99%);

        /* details-summary */
        --sum_bkgr: hsl(160, 35%, 50%);
        --sum_txt: hsl(160, 35%, 98%);
        --det_bkgr: hsl(160, 35%, 95%);
        --det_txt: hsl(160, 35%, 25%);

        /* tables */
        --tbl_bkgr: hsl(160, 35%, 99%);
        --tbl_txt: hsl(160, 35%, 25%);
        --tbl_line: hsl(160, 35%, 90%);
        --tbl_hover: hsl(160, 35%, 96%);
        --tbl_hover_txt: hsl(160, 35%, 25%);
        --tbl_sel_bkgr: hsl(160, 35%, 75%);
        --tbl_sel_txt: hsl(160, 35%, 98%);

        /* icons */
        --icn_bkgr: hsl(160, 35%, 92%);
        --icn_stroke: hsl(160, 35%, 5%);
        --icn_fill: hsl(160, 35%, 35%);
        --icn_hover: hsl(160, 35%, 88%);
        --icn_sel_bkgr: hsl(160, 35%, 70%);
        --icn_sel_stroke: hsl(160, 35%, 98%);

        /* misc */
        --line: hsl(160, 35%, 88%);
    }

    /* ----------------------------------------------------------------------------------------------- */
    [data-theme='dual-rebecca'] {
        /* buttons */
        --btn: hsl(267, 50%, 50%);
        --btn_hover: hsl(267, 50%, 40%);
        --btn_txt: hsl(0, 0%, 100%);

        /* headers and bars */
        --hdr_bkgr: hsl(267, 40%, 35%);
        --hdr_txt: hsl(267, 50%, 98%);
        --hline: hsl(267, 40%, 99%);

        /* text and background*/
        --heading: hsl(267, 50%, 35%);
        --txt: hsl(267, 50%, 25%);
        --bkgr: hsl(267, 30%, 95%);

        /* forms */
        --input_bkgr: hsl(0, 0%, 100%);
        --input_txt: hsl(267, 50%, 25%);
        --input_placeholder: hsl(267, 20%, 60%);

        /* nav */
        --nav_bkgr: hsl(267, 30%, 30%);
        --nav_bkgr_open: hsl(267, 25%, 85%);
        --nav_hdr_txt: hsl(267, 25%, 99%);
        --nav_txt_open: hsl(267, 25%, 5%);
        --nav_txt: hsl(267, 50%, 95%);
        --nav_line: hsl(267, 30%, 88%);
        --nav_hover: hsl(267, 35%, 90%);
        --nav_hover_txt: hsl(267, 60%, 30%);
        --nav_sel_bkgr: hsl(267, 30%, 95%);
        --nav_sel_txt: hsl(267, 50%, 25%);
        ;

        /* details-summary */
        --sum_bkgr: hsl(267, 50%, 50%);
        --sum_txt: hsl(267, 50%, 98%);
        --det_bkgr: hsl(267, 50%, 95%);
        --det_txt: hsl(267, 50%, 25%);

        /* tables */
        --tbl_bkgr: hsl(267, 50%, 98%);
        --tbl_txt: hsl(267, 50%, 25%);
        --tbl_line: hsl(267, 30%, 90%);
        --tbl_hover: hsl(267, 40%, 96%);
        --tbl_hover_txt: hsl(267, 60%, 25%);
        --tbl_sel_bkgr: hsl(267, 50%, 75%);
        --tbl_sel_txt: hsl(267, 50%, 98%);

        /* icons */
        --icn_bkgr: hsl(267, 40%, 92%);
        --icn_stroke: hsl(267, 50%, 98%);
        --icn_fill: hsl(267, 50%, 35%);
        --icn_hover: hsl(267, 45%, 55%);
        --icn_sel_bkgr: hsl(267, 50%, 70%);
        --icn_sel_stroke: hsl(267, 50%, 98%);

        /* misc */
        --line: hsl(267, 30%, 88%);
    }

    /* ----------------------------------------------------------------------------------------------- 160, 35% */
    [data-theme='dual-dodger'] {
        /* buttons */
        --btn: hsl(210, 50%, 50%);
        --btn_hover: hsl(210, 50%, 40%);
        --btn_txt: hsl(0, 0%, 100%);

        /* headers and bars */
        --hdr_bkgr: hsl(210, 50%, 35%);
        --hdr_txt: hsl(210, 50%, 98%);
        --hline: hsl(210, 50%, 99%);

        /* text and background*/
        --heading: hsl(210, 50%, 35%);
        --txt: hsl(210, 50%, 25%);
        --bkgr: hsl(210, 50%, 95%);

        /* forms */
        --input_bkgr: hsl(0, 0%, 100%);
        --input_txt: hsl(210, 50%, 25%);
        --input_placeholder: hsl(210, 50%, 60%);

        /* nav */
        --nav_bkgr: hsl(210, 50%, 30%);
        --nav_bkgr_open: hsl(210, 50%, 85%);
        --nav_hdr_txt: hsl(210, 50%, 99%);
        --nav_txt_open: hsl(210, 50%, 5%);
        --nav_txt: hsl(210, 50%, 95%);
        --nav_line: hsl(210, 50%, 88%);
        --nav_hover: hsl(210, 50%, 90%);
        --nav_hover_txt: hsl(210, 50%, 30%);
        --nav_sel_bkgr: hsl(210, 50%, 95%);
        --nav_sel_txt: hsl(210, 50%, 25%);
        ;

        /* details-summary */
        --sum_bkgr: hsl(210, 50%, 50%);
        --sum_txt: hsl(210, 50%, 98%);
        --det_bkgr: hsl(210, 50%, 95%);
        --det_txt: hsl(210, 50%, 25%);

        /* tables */
        --tbl_bkgr: hsl(210, 50%, 98%);
        --tbl_txt: hsl(210, 50%, 25%);
        --tbl_line: hsl(210, 50%, 90%);
        --tbl_hover: hsl(210, 50%, 96%);
        --tbl_hover_txt: hsl(267, 60%, 25%);
        --tbl_sel_bkgr: hsl(210, 50%, 75%);
        --tbl_sel_txt: hsl(210, 50%, 98%);

        /* icons */
        --icn_bkgr: hsl(210, 50%, 92%);
        --icn_stroke: hsl(210, 50%, 98%);
        --icn_fill: hsl(210, 50%, 35%);
        --icn_hover: hsl(210, 50%, 55%);
        --icn_sel_bkgr: hsl(210, 50%, 70%);
        --icn_sel_stroke: hsl(210, 50%, 98%);

        /* misc */
        --line: hsl(210, 50%, 88%);
    }

    /* ----------------------------------------------------------------------------------------------- 160, 35% */
    [data-theme='dual-nature'] {
        /* buttons */
        --btn: hsl(160, 35%, 50%);
        --btn_hover: hsl(160, 35%, 40%);
        --btn_txt: hsl(0, 0%, 100%);

        /* headers and bars */
        --hdr_bkgr: hsl(160, 35%, 35%);
        --hdr_txt: hsl(160, 35%, 98%);
        --hline: hsl(160, 35%, 99%);

        /* text and background*/
        --heading: hsl(160, 35%, 35%);
        --txt: hsl(160, 35%, 25%);
        --bkgr: hsl(160, 35%, 95%);

        /* forms */
        --input_bkgr: hsl(0, 0%, 100%);
        --input_txt: hsl(160, 35%, 25%);
        --input_placeholder: hsl(160, 35%, 60%);

        /* nav */
        --nav_bkgr: hsl(160, 35%, 30%);
        --nav_bkgr_open: hsl(160, 35%, 85%);
        --nav_hdr_txt: hsl(160, 35%, 99%);
        --nav_txt_open: hsl(160, 35%, 5%);
        --nav_txt: hsl(160, 35%, 95%);
        --nav_line: hsl(160, 35%, 88%);
        --nav_hover: hsl(160, 35%, 90%);
        --nav_hover_txt: hsl(160, 35%, 30%);
        --nav_sel_bkgr: hsl(160, 35%, 95%);
        --nav_sel_txt: hsl(160, 35%, 25%);
        ;

        /* details-summary */
        --sum_bkgr: hsl(160, 35%, 50%);
        --sum_txt: hsl(160, 35%, 98%);
        --det_bkgr: hsl(160, 35%, 95%);
        --det_txt: hsl(160, 35%, 25%);

        /* tables */
        --tbl_bkgr: hsl(160, 35%, 98%);
        --tbl_txt: hsl(160, 35%, 25%);
        --tbl_line: hsl(160, 35%, 90%);
        --tbl_hover: hsl(160, 35%, 96%);
        --tbl_hover_txt: hsl(160, 35%, 25%);
        --tbl_sel_bkgr: hsl(160, 35%, 75%);
        --tbl_sel_txt: hsl(160, 35%, 98%);

        /* icons */
        --icn_bkgr: hsl(160, 35%, 92%);
        --icn_stroke: hsl(160, 35%, 98%);
        --icn_fill: hsl(160, 35%, 35%);
        --icn_hover: hsl(160, 35%, 50%);
        --icn_sel_bkgr: hsl(160, 35%, 70%);
        --icn_sel_stroke: hsl(160, 35%, 98%);

        /* misc */
        --line: hsl(160, 35%, 88%);
    }

    /* ----------------------------------------------------------------------------------------------- */
    [data-theme='dark-rebecca'] {
        /* buttons */
        --btn: hsl(267, 50%, 50%);
        --btn_hover: hsl(267, 50%, 40%);
        --btn_txt: hsl(0, 0%, 100%);

        /* headers and bars */
        --hdr_bkgr: hsl(0, 0%, 25%);
        --hdr_txt: hsl(267, 60%, 99%);
        --hline: hsl(267, 40%, 95%);

        /* text and background*/
        --heading: hsl(267, 60%, 99%);
        --txt: hsl(267, 50%, 99%);
        --bkgr: hsl(0, 0%, 15%);

        /* forms */
        --input_bkgr: hsl(0, 0%, 100%);
        --input_txt: hsl(267, 50%, 25%);
        --input_placeholder: hsl(267, 20%, 60%);

        /* nav */
        --nav_bkgr: hsl(0, 0%, 10%);
        --nav_bkgr_open: hsl(0, 0%, 25%);
        --nav_hdr_txt: hsl(0, 0%, 100%);
        --nav_txt_open: hsl(267, 25%, 95%);
        --nav_txt: hsl(267, 50%, 95%);
        --nav_line: hsl(267, 30%, 88%);
        --nav_hover: hsl(267, 35%, 90%);
        --nav_hover_txt: hsl(267, 60%, 30%);
        --nav_sel_bkgr: hsl(267, 50%, 56%);
        --nav_sel_txt: hsl(0, 0%, 100%);

        /* details-summary */
        --sum_bkgr: hsl(267, 50%, 50%);
        --sum_txt: hsl(267, 50%, 98%);
        --det_bkgr: hsl(267, 50%, 20%);
        --det_txt: hsl(267, 50%, 25%);

        /* tables */
        --tbl_bkgr: hsl(0, 0%, 20%);
        --tbl_txt: hsl(267, 50%, 25%);
        --tbl_line: hsl(267, 30%, 90%);
        --tbl_hover: hsl(267, 40%, 96%);
        --tbl_hover_txt: hsl(267, 60%, 25%);
        --tbl_sel_bkgr: hsl(267, 50%, 75%);
        --tbl_sel_txt: hsl(267, 50%, 98%);

        /* icons */
        --icn_bkgr: hsl(267, 40%, 92%);
        --icn_stroke: hsl(267, 50%, 98%);
        --icn_fill: hsl(267, 50%, 35%);
        --icn_hover: hsl(267, 45%, 40%);
        --icn_sel_bkgr: hsl(267, 50%, 70%);
        --icn_sel_stroke: hsl(267, 50%, 98%);

        /* misc */
        --line: hsl(267, 30%, 88%);
    }

    /* ----------------------------------------------------------------------------------------------- */
    [data-theme='dark-dodger'] {
        /* buttons */
        --btn: hsl(210, 50%, 50%);
        --btn_hover: hsl(210, 50%, 40%);
        --btn_txt: hsl(210, 50%, 100%);

        /* headers and bars */
        --hdr_bkgr: hsl(0, 0%, 25%);
        --hdr_txt: hsl(210, 50%, 99%);
        --hline: hsl(210, 50%, 95%);

        /* text and background*/
        --heading: hsl(210, 50%, 99%);
        --txt: hsl(210, 50%, 99%);
        --bkgr: hsl(0, 0%, 15%);

        /* forms */
        --input_bkgr: hsl(0, 0%, 100%);
        --input_txt: hsl(210, 50%, 25%);
        --input_placeholder: hsl(210, 50%, 60%);

        /* nav */
        --nav_bkgr: hsl(0, 0%, 10%);
        --nav_bkgr_open: hsl(0, 0%, 25%);
        --nav_hdr_txt: hsl(0, 0%, 100%);
        --nav_txt_open: hsl(210, 50%, 95%);
        --nav_txt: hsl(210, 50%, 95%);
        --nav_line: hsl(210, 50%, 88%);
        --nav_hover: hsl(210, 50%, 90%);
        --nav_hover_txt: hsl(210, 50%, 30%);
        --nav_sel_bkgr: hsl(210, 50%, 56%);
        --nav_sel_txt: hsl(0, 0%, 100%);

        /* details-summary */
        --sum_bkgr: hsl(210, 50%, 50%);
        --sum_txt: hsl(210, 50%, 98%);
        --det_bkgr: hsl(210, 50%, 20%);
        --det_txt: hsl(267, 50%, 25%);

        /* tables */
        --tbl_bkgr: hsl(0, 0%, 20%);
        --tbl_txt: hsl(210, 50%, 25%);
        --tbl_line: hsl(210, 50%, 90%);
        --tbl_hover: hsl(210, 50%, 96%);
        --tbl_hover_txt: hsl(210, 50%, 25%);
        --tbl_sel_bkgr: hsl(210, 50%, 75%);
        --tbl_sel_txt: hsl(210, 50%, 98%);

        /* icons */
        --icn_bkgr: hsl(210, 50%, 92%);
        --icn_stroke: hsl(210, 50%, 98%);
        --icn_fill: hsl(210, 50%, 35%);
        --icn_hover: hsl(210, 50%, 40%);
        --icn_sel_bkgr: hsl(210, 50%, 70%);
        --icn_sel_stroke: hsl(210, 50%, 98%);

        /* misc */
        --line: hsl(210, 50%, 88%);
    }

    /* ----------------------------------------------------------------------------------------------- */
    [data-theme='dark-nature'] {
        /* buttons */
        --btn: hsl(160, 35%, 35%);
        --btn_hover: hsl(160, 35%, 40%);
        --btn_txt: hsl(160, 35%, 100%);

        /* headers and bars */
        --hdr_bkgr: hsl(0, 0%, 25%);
        --hdr_txt: hsl(160, 35%, 99%);
        --hline: hsl(160, 35%, 95%);

        /* text and background*/
        --heading: hsl(160, 35%, 99%);
        --txt: hsl(160, 35%, 99%);
        --bkgr: hsl(0, 0%, 15%);

        /* forms */
        --input_bkgr: hsl(0, 0%, 100%);
        --input_txt: hsl(160, 35%, 25%);
        --input_placeholder: hsl(160, 35%, 60%);

        /* nav */
        --nav_bkgr: hsl(0, 0%, 10%);
        --nav_bkgr_open: hsl(0, 0%, 25%);
        --nav_hdr_txt: hsl(0, 0%, 100%);
        --nav_txt_open: hsl(160, 35%, 95%);
        --nav_txt: hsl(160, 35%, 95%);
        --nav_line: hsl(160, 35%, 88%);
        --nav_hover: hsl(160, 35%, 90%);
        --nav_hover_txt: hsl(160, 35%, 30%);
        --nav_sel_bkgr: hsl(160, 35%, 35%);
        --nav_sel_txt: hsl(0, 0%, 100%);

        /* details-summary */
        --sum_bkgr: hsl(160, 35%, 50%);
        --sum_txt: hsl(160, 35%, 98%);
        --det_bkgr: hsl(160, 35%, 20%);
        --det_txt: hsl(160, 35%, 25%);

        /* tables */
        --tbl_bkgr: hsl(0, 0%, 20%);
        --tbl_txt: hsl(160, 35%, 25%);
        --tbl_line: hsl(160, 35%, 90%);
        --tbl_hover: hsl(160, 35%, 96%);
        --tbl_hover_txt: hsl(160, 35%, 25%);
        --tbl_sel_bkgr: hsl(160, 35%, 75%);
        --tbl_sel_txt: hsl(160, 35%, 98%);

        /* icons */
        --icn_bkgr: hsl(160, 35%, 92%);
        --icn_stroke: hsl(160, 35%, 98%);
        --icn_fill: hsl(160, 35%, 35%);
        --icn_hover: hsl(160, 35%, 40%);
        --icn_sel_bkgr: hsl(160, 35%, 50%);
        --icn_sel_stroke: hsl(160, 35%, 98%);

        /* misc */
        --line: hsl(160, 35%, 88%);
    }
}

/* --------------- checked --------------- */