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

.color-picker {
    border: 1px solid var(--clr-white);
    border-radius: 2rem 2rem 2rem 2rem;
    /*background-color: hsl(56 6% 89%);*/
}

.color-picker > fieldset {
    border: 0;
    display: flex;
    gap: 1.4rem;
    width: fit-content;
    margin-inline: auto;
    padding: 1rem 1rem;
    
}

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

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


    .color-picker input[type="radio"]#light {
        --radio-color: var(--clr-light);
    }

    .color-picker input[type="radio"]#pink {
        --radio-color: var(--clr-pink);
    }

    .color-picker input[type="radio"]#yellow {
        --radio-color: var(--clr-yellow);
    }

    .color-picker input[type="radio"]#dark {
        --radio-color: var(--clr-dark);
    }

.light,
:root:has(#light:checked) {
    --body-bg: var(--clr-light);
    --body-text: var(--clr-black);
    --logo-img-bg: var(--clr-white);
    --sidemenu-bg: var(--clr-dark);
    --sidemenu-text: var(--clr-light);
    --section-bg: var(--clr-yellow);
    --section-text: var(--clr-dark);
    --section-headlinetext: var(--clr-violet);
    --section-infotext: var(--clr-violet);
    --section-contentborder: var(--clr-light-border);
    --section-button-text: var(--clr-white);
    --card-bg: var(--clr-light);
    --card-bg-hover: var(--clr-white);
    --card-headlinetext: var(--clr-violet);
    --card-headlinetext-hover: var(--clr-violet);
    --card-infotext: var(--clr-black);
    --card-infotext-hover: var(--clr-black);
}

.pink,
:root:has(#pink:checked) {
    --body-bg: var(--clr-pink);
    --body-text: var(--clr-black);
    --logo-img-bg: var(--clr-white);
    --sidemenu-bg: var(--clr-violet);
    --sidemenu-text: var(--clr-light);
    --section-bg: var(--clr-yellow);
    --section-text: var(--clr-dark);
    --section-headlinetext: var(--clr-violet);
    --section-infotext: var(--clr-violet);
    --section-contentborder: var(--clr-light-border);
    --section-button-text: var(--clr-white);
    --card-bg: var(--clr-pink);
    --card-bg-hover: var(--clr-white);
    --card-headlinetext: var(--clr-violet);
    --card-headlinetext-hover: var(--clr-violet);
    --card-infotext: var(--clr-black);
    --card-infotext-hover: var(--clr-black);
}

.yellow,
:root:has(#yellow:checked) {
    --body-bg: var(--clr-yellow);
    --body-text: var(--clr-black);
    --logo-img-bg: var(--clr-white);
    --sidemenu-bg: var(--clr-violet);
    --sidemenu-text: var(--clr-light);
    --section-bg: var(--clr-yellow);
    --section-text: var(--clr-dark);
    --section-headlinetext: var(--clr-violet);
    --section-infotext: var(--clr-violet);
    --section-contentborder: var(--clr-yellow-border);
    --section-button-text: var(--clr-white);
    --card-bg: var(--clr-yellow);
    --card-bg-hover: var(--clr-white);
    --card-headlinetext: var(--clr-violet);
    --card-headlinetext-hover: var(--clr-violet);
    --card-infotext: var(--clr-black);
    --card-infotext-hover: var(--clr-black);
}

.dark,
:root:has(#dark:checked) {
    --body-bg: var(--clr-dark);
    --body-text: var(--clr-white);
    --logo-img-bg: var(--clr-white);
    --sidemenu-bg: var(--clr-black);
    --sidemenu-text: var(--clr-dark);
    --section-bg: var(--clr-yellow);
    --section-text: var(--clr-dark);
    --section-headlinetext: var(--clr-white);
    --section-infotext: var(--clr-violet);
    --section-contentborder: var(--clr-dark-border);
    --section-button-text: var(--clr-white);
    --card-bg: var(--clr-dark);
    --card-bg-hover: var(--clr-white);
    --card-headlinetext: var(--clr-white);
    --card-headlinetext-hover: var(--clr-black);
    --card-infotext: var(--clr-white);
    --card-infotext-hover: var(--clr-black);
}