:root,
#root[data-page-color="blue"] #mainFooter, #root[data-page-color="magenta"] #mainFooter, #root[data-page-color="turquoise"] #mainFooter, #root[data-page-color="orange"] #mainFooter, #root[data-page-color="green"] #mainFooter,
#root[data-page-color="blue"] #mainHeader, #root[data-page-color="magenta"] #mainHeader, #root[data-page-color="turquoise"] #mainHeader, #root[data-page-color="orange"] #mainHeader, #root[data-page-color="green"] #mainHeader {
    --primary-color: #FFA600;
    --primary-color-light: rgba(255, 166, 0, 0.2);
    --primary-color-medium: rgba(255, 166, 0, 0.5);
    --primary-color-80: rgba(255, 166, 0, 0.8);
    --nav-color: #FFA600;
}

#root[data-page-color="blue"] {
    --primary-color: #6391b0;
    --primary-color-light: rgba(99, 145, 176, 0.2);
    --primary-color-medium: rgba(99, 145, 176, 0.5);
}

#root[data-page-color="magenta"] {
    --primary-color: #ca5b91;
    --primary-color-light: rgba(202, 91, 145, 0.2);
    --primary-color-medium: rgba(202, 91, 145, 0.5);
}

#root[data-page-color="turquoise"] {
    --primary-color: #77bbbd;
    --primary-color-light: rgba(119, 187, 189, 0.2);
    --primary-color-medium: rgba(119, 187, 189, 0.5);
}

#root[data-page-color="orange"] {
    --primary-color: #ea7625;
    --primary-color-light: rgba(234, 118, 37, 0.2);
    --primary-color-medium: rgba(234, 118, 37, 0.5);
}

#root[data-page-color="green"] {
    --primary-color: #51AF40;
    --primary-color-light: rgba(82, 176, 65, 0.2);
    --primary-color-medium: rgba(82, 176, 65, 0.5);
}