.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: 1px;
}

.color-picker > fieldset {
  border: 0;
  display: flex;
  gap: 1.5rem;
  width: fit-content;
  background: #fff;
  padding: 1rem 2rem;
  margin-inline: auto;
  border-radius: 1rem;
  margin-bottom:10px;
}

.color-picker input[type="radio"] {
  appearance: none;
  width: .6rem;
  height: .6rem;
  outline: 3px solid var(--radio-color, currentColor);
  outline-offset: 2px;
  border-radius: 50%;
  cursor:pointer;
}

.color-picker input[type="radio"]:checked {
  background-color: var(--radio-color);
}

.color-picker input[type="radio"]#light {
  --radio-color: gray;
}
.color-picker input[type="radio"]#pink {
  --radio-color: #FF69B4;
}
.color-picker input[type="radio"]#purple {
  --radio-color: #84664e;
}
.color-picker input[type="radio"]#aqua {
  --radio-color: #00ffff;
}
.color-picker input[type="radio"]#blue {
  --radio-color: blue;
}
.color-picker input[type="radio"]#green {
  --radio-color: green;
}
.color-picker input[type="radio"]#orange {
  --radio-color: #ff6400;
}
.color-picker input[type="radio"]#olive {
  --radio-color: #9b9b00;
}
.color-picker input[type="radio"]#dark {
  --radio-color: #1c1c28;
}



.aqua {
  --clr-body-bg: hsl(180 100% 90%);
  --clr-head-bg: hsl(180 100% 65%);
  --clr-sidebar-bg: hsl(180 100% 40%);
  --clr-foot-bg: hsl(180 100% 20%);
  --clr-btn-primary-bg: hsl(180 100% 25%);
  --clr-btn-primary-txt: hsl(180 100% 90%);
  --bs-primary:#00afaf;
  --bs-primary-rgb:0,175,175; 
  --clr-btn-primay:#006666;
  --clr-btn-primay-hover:#004646;
  --clr-card-body-theme:#e1ffff;
  --clr-page-header-h4:#006666;
  --clr-page-header-h6:#569494;
}

:root:has(#aqua:checked) {
  --clr-body-bg: hsl(180 100% 90%);
  --clr-head-bg: hsl(180 100% 65%);
  --clr-sidebar-bg: hsl(180 100% 40%);
  --clr-foot-bg: hsl(180 100% 20%);
  --clr-btn-primary-bg: hsl(180 100% 25%);
  --clr-btn-primary-txt: hsl(180 100% 90%);
  --bs-primary:#00afaf;
  --bs-primary-rgb:0,175,175;  
  --clr-btn-primay:#006666;
  --clr-btn-primay-hover:#004646;
  --clr-card-body-theme:#e1ffff;
  --clr-page-header-h4:#006666;
  --clr-page-header-h6:#569494;
}

.light {
  --clr-body-bg: hsl(0 0% 98%);
  --clr-head-bg: hsl(0 0% 92%);
  --clr-sidebar-bg: hsl(0 0% 87%);
  --clr-foot-bg: hsl(0 0% 40%);
  --clr-btn-primary-bg: hsl(0 0% 60%);
  --clr-btn-primary-txt: hsl(0 0% 100%);
  --bs-primary:#646464;
  --bs-primary-rgb:100,100,100;
  --clr-btn-primay:#1b2850;
  --clr-btn-primay-hover:#0c1530;
  --clr-card-body-theme:hsl(0 0% 98%);
  --clr-page-header-h4:#212b36;
  --clr-page-header-h6:#555555;
}


:root:has(#light:checked) {
  --clr-body-bg: hsl(0 0% 98%);
  --clr-head-bg: hsl(0 0% 92%);
  --clr-sidebar-bg: hsl(0 0% 87%);
  --clr-foot-bg: hsl(0 0% 40%);
  --clr-btn-primary-bg: hsl(0 0% 60%);
  --clr-btn-primary-txt: hsl(0 0% 100%);
  --bs-primary:#646464;
  --bs-primary-rgb:100,100,100;
  --clr-btn-primay:#1b2850;
  --clr-btn-primay-hover:#0c1530;
  --clr-card-body-theme:hsl(0 0% 98%);
  --clr-page-header-h4:#212b36;
  --clr-page-header-h6:#555555;
}

.pink {
  --clr-body-bg: hsl(310 50% 90%);
  --clr-head-bg: hsl(310 50% 75%);
  --clr-sidebar-bg: hsl(310 50% 65%);
  --clr-foot-bg: hsl(310 50% 25%);
  --clr-btn-primary-bg: hsl(310 50% 25%);
  --clr-btn-primary-txt: hsl(310 50% 90%);
  --bs-primary:#c84baf;
  --bs-primary-rgb:200,75,175;
  --clr-btn-primay:#602055;
  --clr-btn-primay-hover:#380e31;
  --clr-card-body-theme:#fbe6f8;
  --clr-page-header-h4:#602055;
  --clr-page-header-h6:#86597e;
}

:root:has(#pink:checked) {
  --clr-body-bg: hsl(310 50% 90%);
  --clr-head-bg: hsl(310 50% 75%);
  --clr-sidebar-bg: hsl(310 50% 65%);
  --clr-foot-bg: hsl(310 50% 25%);
  --clr-btn-primary-bg: hsl(310 50% 25%);
  --clr-btn-primary-txt: hsl(310 50% 90%);
  --bs-primary:#c84baf;
  --bs-primary-rgb:200,75,175;
  --clr-btn-primay:#602055;
  --clr-btn-primay-hover:#380e31;
  --clr-card-body-theme:#fbe6f8;
  --clr-page-header-h4:#602055;
  --clr-page-header-h6:#86597e;
}

.purple {
  --clr-body-bg: #fdf3e0;
  --clr-head-bg: #f9e1ce;
  --clr-sidebar-bg: #f5d4b9;
  --clr-foot-bg: #84664e;
  --clr-btn-primary-bg: #84664e;
  --clr-btn-primary-txt: #fff;
  --bs-primary:#84664e;
  --bs-primary-rgb:132,102,78;
  --clr-btn-primay:#84664e;
  --clr-btn-primay-hover:#75543a;
  --clr-card-body-theme:#ffecdd;
  --clr-page-header-h4:#84664e;
  --clr-page-header-h6:#a49488;
}

:root:has(#purple:checked) {
  --clr-body-bg: #fdf3e0;
  --clr-head-bg: #f9e1ce;
  --clr-sidebar-bg: #f5d4b9;
  --clr-foot-bg: #84664e;
  --clr-btn-primary-bg: #84664e;
  --clr-btn-primary-txt: #fff;
  --bs-primary:#84664e;
  --bs-primary-rgb:132,102,78;
  --clr-btn-primay:#84664e;
  --clr-btn-primay-hover:#75543a;
  --clr-card-body-theme:#ffecdd;
  --clr-page-header-h4:#84664e;
  --clr-page-header-h6:#a49488;
}

.blue {
  --clr-body-bg: hsl(209 50% 90%);
  --clr-head-bg: hsl(209 50% 75%);
  --clr-sidebar-bg: hsl(209 50% 65%);
  --clr-foot-bg: hsl(209 50% 25%);
  --clr-btn-primary-bg: hsl(209 50% 25%);
  --clr-btn-primary-txt: hsl(209 50% 90%);
  --bs-primary:#3787c8;
  --bs-primary-rgb:55,135,200;
  --clr-btn-primay:#204160;
  --clr-btn-primay-hover:#0f263b;
  --clr-card-body-theme:#d4eaff;
  --clr-page-header-h4:#204160;
  --clr-page-header-h6:#61798f;
}

:root:has(#blue:checked) {
  --clr-body-bg: hsl(209 50% 90%);
  --clr-head-bg: hsl(209 50% 75%);
  --clr-sidebar-bg: hsl(209 50% 65%);
  --clr-foot-bg: hsl(209 50% 25%);
  --clr-btn-primary-bg: hsl(209 50% 25%);
  --clr-btn-primary-txt: hsl(209 50% 90%);
  --bs-primary:#3787c8;
  --bs-primary-rgb:55,135,200;  
  --clr-btn-primay:#204160;
  --clr-btn-primay-hover:#0f263b;
  --clr-card-body-theme:#d4eaff;
  --clr-page-header-h4:#204160;
  --clr-page-header-h6:#61798f;
}


.green {
  --clr-body-bg: hsl(109 50% 90%);
  --clr-head-bg: hsl(109 50% 75%);
  --clr-sidebar-bg: hsl(109 50% 65%);
  --clr-foot-bg: hsl(109 50% 85%);
  --clr-btn-primary-bg: hsl(109 50% 25%);
  --clr-btn-primary-txt: hsl(109 50% 90%);
  --bs-primary:#4baf4b;
  --bs-primary-rgb:75,175,75;  
  --clr-btn-primay:#2c6020;
  --clr-btn-primay-hover:#19420f;
  --clr-card-body-theme:#edfcea;
  --clr-page-header-h4:#2c6020;
  --clr-page-header-h6:#61815a;
}


:root:has(#green:checked) {
  --clr-body-bg: hsl(109 50% 90%);
  --clr-head-bg: hsl(109 50% 75%);
  --clr-sidebar-bg: hsl(109 50% 65%);
  --clr-foot-bg: hsl(109 50% 25%);
  --clr-btn-primary-bg: hsl(109 50% 25%);
  --clr-btn-primary-txt: hsl(109 50% 90%);
  --bs-primary:#4baf4b;
  --bs-primary-rgb:75,175,75;  
  --clr-btn-primay:#2c6020;
  --clr-btn-primay-hover:#19420f;
  --clr-card-body-theme:#edfcea;
  --clr-page-header-h4:#2c6020;
  --clr-page-header-h6:#61815a;
}


.orange {
  --clr-body-bg: hsl(24 100% 95%);
  --clr-head-bg: hsl(24 100% 85%);
  --clr-sidebar-bg: hsl(24 100% 75%);
  --clr-foot-bg: hsl(24 100% 25%);
  --clr-btn-primary-bg: hsl(24 100% 50%);
  --clr-btn-primary-txt: hsl(24 100% 100%);
  --bs-primary:#ff6400;
  --bs-primary-rgb:255,100,0;
  --clr-btn-primay:#ff9f43;
  --clr-btn-primay-hover:#fe820e;
  --clr-card-body-theme:#fff4f0;
  --clr-page-header-h4:#803300;
  --clr-page-header-h6:#a35d2f;
}


:root:has(#orange:checked) {
  --clr-body-bg: hsl(24 100% 95%);
  --clr-head-bg: hsl(24 100% 85%);
  --clr-sidebar-bg: hsl(24 100% 75%);
  --clr-foot-bg: hsl(24 100% 25%);
  --clr-btn-primary-bg: hsl(24 100% 50%);
  --clr-btn-primary-txt: hsl(24 100% 100%);
  --bs-primary:#ff6400;
  --bs-primary-rgb:255,100,0;
  --clr-btn-primay:#ff9f43;
  --clr-btn-primay-hover:#fe820e;
  --clr-card-body-theme:#fff4f0;
  --clr-page-header-h4:#803300;
  --clr-page-header-h6:#a35d2f;
}


.olive {
  --clr-body-bg: hsl(60 100% 95%);
  --clr-head-bg: hsl(60 100% 85%);
  --clr-sidebar-bg: hsl(60 100% 75%);
  --clr-foot-bg: hsl(60 100% 15%);
  --clr-btn-primary-bg: hsl(60 100% 25%);
  --clr-btn-primary-txt: hsl(60 100% 90%);
  --bs-primary:#9b9b00;
  --bs-primary-rgb:155,155,0;
  --clr-btn-primay:#4d4d00;
  --clr-btn-primay-hover:#272700;
  --clr-card-body-theme:#f5f5d6;
  --clr-page-header-h4:#4d4d00;
  --clr-page-header-h6:#73732c;
}


:root:has(#olive:checked) {
  --clr-body-bg: hsl(60 100% 95%);
  --clr-head-bg: hsl(60 100% 85%);
  --clr-sidebar-bg: hsl(60 100% 75%);
  --clr-foot-bg: hsl(60 100% 15%);
  --clr-btn-primary-bg: hsl(60 100% 25%);
  --clr-btn-primary-txt: hsl(60 100% 90%);
  --bs-primary:#9b9b00;
  --bs-primary-rgb:155,155,0;
  --clr-btn-primay:#4d4d00;
  --clr-btn-primay-hover:#272700;
  --clr-card-body-theme:#f5f5d6;
  --clr-page-header-h4:#4d4d00;
  --clr-page-header-h6:#73732c;
}

.dark {
  --clr-body-bg: hsl(240 18% 30%);
  --clr-head-bg: hsl(240 18% 50%);
  --clr-sidebar-bg: hsl(240 18% 20%);
  --clr-sidebar-txt: hsl(240 18% 80%);
  --clr-foot-bg: hsl(240 18% 15%);
  --clr-foot-txt: hsl(240 18% 50%);
  --clr-btn-primary-bg: hsl(240 18% 25%);
  --clr-btn-primary-txt: hsl(240 18% 90%);
  --bs-primary:#3c3c64;
  --bs-primary-rgb:60,60,100; 
  --clr-sidebar-svg-filter:100;  
  --clr-btn-primay:#3c3c64;
  --clr-btn-primay-hover:#23233b;
  --clr-card-body-theme:#ccccd7;
  --clr-page-header-h4:#9797c4;
  --clr-page-header-h6:#7d7daa;
}

:root:has(#dark:checked) {
  --clr-body-bg: hsl(240 18% 30%);
  --clr-head-bg: hsl(240 18% 50%);
  --clr-sidebar-bg: hsl(240 18% 20%);
  --clr-sidebar-txt: hsl(240 18% 80%);
  --clr-foot-bg: hsl(240 18% 15%);
  --clr-foot-txt: hsl(240 18% 50%);
  --clr-btn-primary-bg: hsl(240 18% 25%);
  --clr-btn-primary-txt: hsl(240 18% 90%);
  --bs-primary:#3c3c64;
  --bs-primary-rgb:60,60,100;  
  --clr-sidebar-svg-filter:100;
  --clr-btn-primay:#3c3c64;
  --clr-btn-primay-hover:#23233b;
  --clr-card-body-theme:#ccccd7;
  --clr-page-header-h4:#9797c4;
  --clr-page-header-h6:#7d7daa;
}

.header-theme { background-color: var(--clr-head-bg)!important; }
.sidebar-theme { background-color: var(--clr-sidebar-bg)!important; }
.sidebar-svg { filter: invert(var(--clr-sidebar-svg-filter)) }
.body-theme { background-color: var(--clr-body-bg)!important; }
.footer-theme { background-color: var(--clr-foot-bg)!important;  color: var(--clr-foot-txt)!important; }
.page-header h4 { color: var(--clr-page-header-h4)!important; }
.page-header h6 { color: var(--clr-page-header-h6)!important; }