:root {
    --clr-body-bg: hsl(26, 88%, 100%);
    --clr-card-bg: hsl( 36, 82%, 94%);
    --clr-sp-bg: hsl(0, 0%, 100%);
    --clr-eservice-bg: hsl(33, 39%, 95%);
    --clr-contact-bg: hsl(0, 0%, 100%);
    --clr-text: hsl(0 0% 15%);
    --clr-heading: hsl(34, 7%, 59%);
}

body {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.5;
    /*background-color: var(--clr-body-bg) !important;
    color: var(--clr-text);*/
}

h1,
h2,
h3,
a {
    color: var(--clr-heading);
    line-height: 1.1;
}

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

.color-picker > fieldset {
    border: 0;
    gap: 2rem;
    background: #fff;
    padding: 1rem 1rem;
    margin-inline: auto;
    border-radius: 0 0 1rem 1rem;
}

.color-picker input[type="radio"] {
    appearance: none;
    width: 2rem;
    height: 1.7rem;
    outline: 0px 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;
    }

    .color-picker input[type="radio"]#pink {
        --radio-color: #f17a20;
    }

    .color-picker input[type="radio"]#blue {
        --radio-color: blue;
    }

    .color-picker input[type="radio"]#green {
        --radio-color: green;
    }

    .color-picker input[type="radio"]#dark {
        --radio-color: #232323;
    }

.pink {
    --clr-body-bg: hsl(26, 88%, 100%);
    --clr-card-bg: hsl(26, 88%, 54%);
    --clr-sp-bg: hsl(26, 88%, 54%);
    --clr-eservice-bg: hsl(26, 88%, 54%);
    --clr-contact-bg: hsl(26, 88%, 54%);
    --clr-text: hsl(26, 88%, 100%);
    --clr-heading: hsl(26, 88%, 100%);
}

.blue {
    --clr-body-bg: hsl(26, 88%, 100%);
    --clr-card-bg: hsl(227, 42%, 45%);
    --clr-sp-bg: hsl(227, 42%, 45%);
    --clr-eservice-bg: hsl(227, 42%, 45%);
    --clr-contact-bg: hsl(227, 42%, 45%);
    --clr-text: hsl(227, 42%, 45%);
    --clr-heading: hsl(26, 88%, 100%);
}

.green {
    --clr-body-bg: hsl(26, 88%, 100%);
    --clr-card-bg: hsl(0, 0%, 45%);
    --clr-sp-bg: hsl(0, 0%, 45%);
    --clr-eservice-bg: hsl(0, 0%, 45%);
    --clr-contact-bg: hsl(0, 0%, 45%);
    --clr-text: hsl(109 50% 15%);
    --clr-heading: hsl(26, 88%, 100%);
}

.dark {
    --clr-body-bg: hsl(26, 88%, 100%);
    --clr-card-bg: hsl(0, 28%, 25%);
    --clr-sp-bg: hsl(0, 28%, 25%);
    --clr-eservice-bg: hsl(0, 28%, 25%);
    --clr-contact-bg: hsl(0, 28%, 25%);
    --clr-text: hsl(209 50% 90%);
    --clr-heading: hsl(26, 88%, 100%);
}

.default {
    --clr-body-bg: hsl(26, 88%, 100%);
    --clr-card-bg: hsl(36, 82%, 94%);
    --clr-sp-bg: hsl(0, 0%, 100%);
    --clr-eservice-bg: hsl(33, 39%, 95%);
    --clr-contact-bg: hsl(0, 0%, 100%);
    --clr-text: hsl(36, 32%, 56%);
    --clr-heading: hsl(34, 7%, 59%);
}

.visible {
    --clr-body-bg: hsl(36, 32%, 100%);
    --clr-card-bg: hsl(36, 82%, 94%);
    --clr-contact-bg: hsl(0, 0%, 100%);
    --clr-sp-bg: hsl(0, 0%, 100%);
    --clr-eservice-bg: hsl(33, 39%, 95%);
    --clr-text: hsl(36, 32%, 56%);
    --clr-heading: hsl(34, 7%, 59%);
}

.Unvisible {
    --clr-body-bg: hsl(36, 32%, 100%);
    --clr-card-bg: hsl(36, 82%, 94%);
    --clr-contact-bg: hsl(36, 82%, 94%);
    --clr-eservice-bg: hsl(36, 82%, 94%);
    --clr-sp-bg: hsl(0, 0%, 100%);
    --clr-text: hsl(36, 32%, 56%);
    --clr-heading: hsl(26, 88%, 100%);
}


:root:has(#default:checked) {
    --clr-body-bg: hsl(26, 88%, 100%);
    --clr-card-bg: hsl(36, 82%, 94%);
    --clr-contact-bg: hsl(0, 0%, 100%);
    --clr-eservice-bg: hsl(33, 39%, 95%);
    --clr-sp-bg: hsl(0, 0%, 100%);
    --clr-text: hsl(36, 32%, 56%);
    /*--clr-heading: hsl(36, 32%, 56%);*/
    --clr-heading: hsl(34, 7%, 59%);
}


:root:has(#pink:checked) {
    --clr-body-bg: hsl(26, 88%, 100%);
    --clr-card-bg: hsl(26, 88%, 54%);
    --clr-contact-bg: hsl(26, 88%, 54%);
    --clr-eservice-bg: hsl(26, 88%, 54%);
    --clr-sp-bg: hsl(26, 88%, 54%);
    --clr-text: hsl(310 50% 15%);
    --clr-heading: hsl(26, 88%, 100%);
}

:root:has(#blue:checked) {
    --clr-body-bg: hsl(26, 88%, 100%);
    --clr-card-bg: hsl(227, 42%, 45%);
    --clr-contact-bg: hsl(227, 42%, 45%);
    --clr-eservice-bg: hsl(227, 42%, 45%);
    --clr-sp-bg: hsl(227, 42%, 45%);
    --clr-text: hsl(227, 42%, 45%);
    --clr-heading: hsl(26, 88%, 100%);
}

:root:has(#green:checked) {
    --clr-body-bg: hsl(26, 88%, 100%);
    --clr-card-bg: hsl(0, 0%, 45%);
    --clr-contact-bg: hsl(0, 0%, 45%);
    --clr-eservice-bg: hsl(0, 0%, 45%);
    --clr-sp-bg: hsl(0, 0%, 45%);
    --clr-text: hsl(109 50% 15%);
    --clr-heading: hsl(26, 88%, 100%);
}

:root:has(#dark:checked) {
    --clr-body-bg: hsl(26, 88%, 100%);
    --clr-card-bg: hsl(0, 28%, 25%);
    --clr-contact-bg: hsl(0, 28%, 25%);
    --clr-eservice-bg: hsl(0, 28%, 25%);
    --clr-sp-bg: hsl(0, 28%, 25%);
    --clr-text: hsl(209 50% 90%);
    --clr-heading: hsl(26, 88%, 100%);
}

:root:has(#visible:checked) {
    --clr-body-bg: hsl(36, 32%, 100%);
    --clr-card-bg: hsl(36, 82%, 94%);
    --clr-contact-bg: #ffffff;
    --clr-eservice-bg: hsl(33, 39%, 95%);
    --clr-sp-bg: hsl(0, 0%, 100%);
    --clr-text: hsl(36, 32%, 56%);
    --clr-heading: hsl(34, 7%, 59%);
}

:root:has(#Unvisible:checked) {
    --clr-body-bg: hsl(0, 0%, 0%);
    --clr-card-bg: hsl(0, 0%, 0%);
    --clr-contact-bg: hsl(0, 0%, 0%);
    --clr-eservice-bg: hsl(0, 0%, 0%);
    --clr-sp-bg: hsl(0, 0%, 0%);
    --clr-text: hsl(36, 32%, 56%);
    --clr-heading: hsl(26, 88%, 100%);
}





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

.visible-color {
    width: 100%;
}

label.visibles {
    position: absolute;
    display: inline-block;
    width: 50px;
}

label.unvisibless {
    position: absolute;
    display: inline-block;
    width: 50px;
    /* margin: 5px; */
}

.fa-eye:before {
    content: "\f06e";
    position: relative;
    top: 6px;
    left: 13px;
    font-size: 18px;
    color: #3d5893;
}

.fa-eye-slash:before {
    content: "\f070";
    position: relative;
    top: 7px;
    left: 12px;
    font-size: 18px;
    color: #3d5893;
}

.default-are {
    width: 100%;
    display: inline-block;
    float: left;
}

.ona1 {
     display: inline-block;
    width: 50px;
    border: 1px solid #ddd;
    height: 44px;
    vertical-align: top;
}

.colos-area {
    width: 100%;
    display: inline-block;
}

.ona2 {
    display: inline-block;
    width: 36px;
 }

input#default {
    background: #b4976c;
}

input#blue {
    background: #4257a1;
}

input#pink {
    background: #f17a20;
}

input#green {
    background: #737373;
}

input#dark {
    background: #522e2e;
}

form.color-picker p {
    text-align: left;
    font-size: 22px;
    font-weight: 500;
    padding-left: 16px;
    padding-top: 35px;
}