:root {
    --clr-body-bg: hsl(0 0% 93%);
    --clr-nav-bg: hsl(0 0% 99%);
    --clr-card-bg: hsl(0 0% 98%);
    --clr-text: hsl(0, 0%, 15%);
    --clr-heading: hsl(0 0% 40%);
    --clr-title: hsl(0 0% 40%);

    --clr-dark: #152935;
    --clr-less-dark: #8fc8e9;
    --clr-middle: #f3d6c0;
    --clr-less-light: #ccd5d2;
    --clr-light: #fff9f3;
}

body {
    background: var(--clr-body-bg) !important;
    background: var(--clr-nav-bg) !important;
    color: var(--clr-text) !important;
}

h1,
h2,
h3 {
    color: var(--clr-heading);
}

.card {
    background-color: var(--clr-card-bg);
}


.color__item {
    width: 30px;
    height: 30px;

    border-radius: 50%;
}



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

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

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

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

.color-picker input[type=radio]#light {
    --radio-color: gray;
}

:root:has(#blue:checked) {
    --clr-dark: #152935;
    --clr-less-dark: #8fc8e9;
    --clr-middle: #f3d6c0;
    --clr-less-light: #ccd5d2;
    --clr-light: #fff9f3;
}

:root:has(#green:checked) {
    --clr-dark: #212b0f;
    --clr-less-dark: #9ab867;
    --clr-middle: #f3d6c0;
    --clr-less-light: #d6c3ab;
    --clr-light: #fff9f3;
}

:root:has(#dust:checked) {
    --clr-dark: #5b484a;
    --clr-less-dark: #8b5943;
    --clr-middle: #d9bf9d;
    --clr-less-light: #e1d1b9;
    --clr-light: #e3e1e6;
}

:root:has(#pink:checked) {
    --clr-dark: #2e2c39;
    --clr-less-dark: #afa3d5;
    --clr-middle: #f1bfc0;
    --clr-less-light: #a9ccc1;
    --clr-light: #e7e3f1;
}

:root:has(#dark:checked) {
    --clr-dark: #28264b;
    --clr-less-dark: #4e5174;
    --clr-middle: #e55f89;
    --clr-less-light: #c0c3e2;
    --clr-light: #e8eae7;
}

html::after {
    background-color: transparent !important;
}


.blue::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #8fc8e9;
    position: absolute;
    left: 50%;
    top: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.green::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #9ab867;
    position: absolute;
    left: 50%;
    top: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.dust::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #8b5943;
    position: absolute;
    left: 50%;
    top: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.pink::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #afa3d5;
    position: absolute;
    left: 50%;
    top: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.dark::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e55f89;
    position: absolute;
    left: 50%;
    top: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
}