.color-picker-box {
    width: 300px;
    top: 0px;
    left: -120px;
}

.font-size-picker-box {
    width: 300px;
    top: 280px;
    left: -120px;
}

.color-picker input[type="radio"] {
    appearance: none;
    /* margin-right: 10px; */
    width: 36px;
    height: 36px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 1px, inset rgba(0, 0, 0, 0.5) 0 0 0 1px;
    background-color: var(--radio-color);
    background-image: radial-gradient( var(--radial-color04) 0%, var(--radial-color03) 15%, var(--radial-color02) 28%, var(--radial-color01) 70% );
    background-repeat: no-repeat;
    transition: .15s cubic-bezier(0, .8, 1, 1);
}

.color-picker input[type="radio"]:active {
    transition: .1s cubic-bezier(1, 0, .2, 1);
}

.color-picker input[type="radio"],
.color-picker input[type="radio"]:active {
    background-position: 36px 0;
}

.color-picker input[type="radio"]:checked {
    background-position: 0 0;
    transition: .2s .15s cubic-bezier(1, 0, .2, 1);
}

.color-picker input[type="radio"]:checked {
    background-color: var(--radio-color);
}
.color-picker input[type="radio"]#light {
    --radio-color: rgb(255, 255, 255);
}
.color-picker input[type="radio"]#light {
    --radio-color: rgb(255, 255, 255);
    --radial-color01: rgba(255, 255, 255, 0.1);
    --radial-color02: rgba(223, 223, 223, 0.4);
    --radial-color03: rgb(33, 33, 33);
    --radial-color04: rgba(56, 56, 56, 0.1);
}
.color-picker input[type="radio"]#dark {
    --radio-color: rgb(0, 0, 0);
    --radial-color01: rgba(160, 0, 21, 0.1);
    --radial-color02: rgba(90, 90, 90, 0.4);
    --radial-color03: rgb(220, 220, 220);
    --radial-color04: rgba(255, 255, 255, 0.1);
}
.color-picker input[type="radio"]#pink {
    --radio-color: pink;
    --radial-color01: rgba(255, 255, 255, 0.1);
    --radial-color02: rgba(223, 223, 223, 0.4);
    --radial-color03: rgb(33, 33, 33);
    --radial-color04: rgba(56, 56, 56, 0.1);
}
.color-picker input[type="radio"]#blue {
    --radio-color: blue;
    --radial-color01: rgba(160, 0, 21, 0.1);
    --radial-color02: rgba(90, 90, 90, 0.4);
    --radial-color03: rgb(220, 220, 220);
    --radial-color04: rgba(255, 255, 255, 0.1);
}
.color-picker input[type="radio"]#green {
    --radio-color: rgb(0, 128, 0);
    --radial-color01: rgba(160, 0, 21, 0.1);
    --radial-color02: rgba(90, 90, 90, 0.4);
    --radial-color03: rgb(220, 220, 220);
    --radial-color04: rgba(255, 255, 255, 0.1);
}
.color-picker input[type="radio"]#darkblue {
    --radio-color: rgb(36, 74, 110);
    --radial-color01: rgba(160, 0, 21, 0.1);
    --radial-color02: rgba(90, 90, 90, 0.4);
    --radial-color03: rgb(220, 220, 220);
    --radial-color04: rgba(255, 255, 255, 0.1);
}

.dark {
    --bg-col008: rgb(33, 33, 33);
    --tc-col007: hsl(209 50% 90%);
    --tc-col010: rgb(240, 164, 23);
    /* --clr-card-bg: hsl(209 50% 5%); */
    /* --clr-heading: hsl(209 50% 80%); */
    --radial-color01: rgba(160, 0, 21, 0.1);
    --radial-color02: rgba(90, 90, 90, 0.4);
    --radial-color03: rgb(220, 220, 220);
    --radial-color04: rgba(255, 255, 255, 0.1);
}

.pink {
    --bg-col008: hsl(310 50% 90%);
    --bg-col0001: rgb(99, 68, 94);
    --tc-col007: hsl(310 50% 15%);
    --tc-col010: rgb(240, 164, 23);
    /* --clr-card-bg: hsl(310 50% 100%); */
    /* --clr-heading: hsl(310 50% 25%); */
    --radial-color01: rgba(255, 255, 255, 0.1);
    --radial-color02: rgba(223, 223, 223, 0.4);
    --radial-color03: rgb(33, 33, 33);
    --radial-color04: rgba(56, 56, 56, 0.1);
}

.blue {
    --bg-col008: hsl(209 50% 90%);
    --tc-col007: hsl(209 50% 15%);
    --tc-col010: rgb(240, 164, 23);
    /* --clr-card-bg: hsl(209 50% 100%); */
    /* --clr-heading: hsl(209 50% 25%); */
    --radial-color01: rgba(255, 255, 255, 0.1);
    --radial-color02: rgba(223, 223, 223, 0.4);
    --radial-color03: rgb(33, 33, 33);
    --radial-color04: rgba(56, 56, 56, 0.1);
}

.green {
    --bg-col008: hsl(109 50% 90%);
    --tc-col007: hsl(109 50% 15%);
    --tc-col010: rgb(240, 164, 23);
    /* --clr-card-bg: hsl(109 50% 100%); */
    /* --clr-heading: hsl(109 50% 25%); */
    --radial-color01: rgba(255, 255, 255, 0.1);
    --radial-color02: rgba(223, 223, 223, 0.4);
    --radial-color03: rgb(33, 33, 33);
    --radial-color04: rgba(56, 56, 56, 0.1);
}

.darkblue {
    --bg-col008: hsl(209 50% 10%);
    --tc-col007: hsl(209 50% 90%);
    --tc-col010: rgb(71, 168, 248);
    /* --clr-card-bg: hsl(209 50% 5%); */
    /* --clr-heading: hsl(209 50% 80%); */
    --radial-color01: rgba(160, 0, 21, 0.1);
    --radial-color02: rgba(90, 90, 90, 0.4);
    --radial-color03: rgb(220, 220, 220);
    --radial-color04: rgba(255, 255, 255, 0.1);
}

:root:has(#dark:checked) {
    --bg-col008: rgb(33, 33, 33);
    --bg-col0001: rgb(217, 230, 242);
    --tc-col007: rgb(217, 230, 242);
    --tc-col010: rgb(60, 60, 60);
    /* --clr-card-bg: hsl(310 50% 100%); */
    /* --clr-heading: hsl(310 50% 25%); */
    --radial-color01: rgba(160, 0, 21, 0.1);
    --radial-color02: rgba(90, 90, 90, 0.4);
    --radial-color03: rgb(220, 220, 220);
    --radial-color04: rgba(255, 255, 255, 0.1);
}

:root:has(#pink:checked) {
    --bg-col008: rgb(242, 217, 238);
    --bg-col0001: rgb(159, 52, 143);
    --tc-col007: rgb(57, 19, 51);
    --tc-col010: rgb(255, 39, 244);
    /* --clr-card-bg: hsl(310 50% 100%); */
    /* --clr-heading: hsl(310 50% 25%); */
    --radial-color01: rgba(255, 255, 255, 0.1);
    --radial-color02: rgba(223, 223, 223, 0.4);
    --radial-color03: rgb(33, 33, 33);
    --radial-color04: rgba(56, 56, 56, 0.1);
}

:root:has(#blue:checked) {
    --bg-col008: hwb(209 85% 5%);
    --bg-col0001: rgb(58, 124, 181);
    --tc-col007: rgb(19, 39, 57);
    --tc-col010: rgb(34, 255, 255);
    /* --clr-card-bg: hsl(209 50% 100%); */
    /* --clr-heading: hsl(209 50% 25%); */
    --radial-color01: rgba(255, 255, 255, 0.1);
    --radial-color02: rgba(223, 223, 223, 0.4);
    --radial-color03: rgb(33, 33, 33);
    --radial-color04: rgba(56, 56, 56, 0.1);
}

:root:has(#green:checked) {
    --bg-col008: hsl(109 50% 90%);
    --bg-col0001: rgb(76, 168, 56);
    --tc-col007: rgb(26, 57, 19);
    --tc-col010: rgb(116, 255, 29);
    /* --clr-card-bg: hsl(109 50% 100%); */
    /* --clr-heading: hsl(109 50% 25%); */
    --radial-color01: rgba(255, 255, 255, 0.1);
    --radial-color02: rgba(223, 223, 223, 0.4);
    --radial-color03: rgb(33, 33, 33);
    --radial-color04: rgba(56, 56, 56, 0.1);
}

:root:has(#darkblue:checked) {
    --bg-col008: hsl(209 50% 10%);
    --bg-col0001: rgb(217, 230, 242);
    --tc-col007: rgb(217, 230, 242);
    --tc-col010: rgb(23, 81, 240);
    /* --clr-card-bg: hsl(209 50% 5%); */
    /* --clr-heading: hsl(209 50% 80%); */
    --radial-color01: rgba(160, 0, 21, 0.1);
    --radial-color02: rgba(90, 90, 90, 0.4);
    --radial-color03: rgb(220, 220, 220);
    --radial-color04: rgba(255, 255, 255, 0.1);
}