<div class="ctrls">
<input type="radio" name="mode" value="default" checked />
<input type="radio" name="mode" value="dark" />
<input type="radio" name="mode" value="grayscale" />
</div>
<div class="row">
<div class="col">
<p style="--background--: var(--red-50); --color--: var(--red-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-100); --color--: var(--red-450);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-150); --color--: var(--red-500);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-200); --color--: var(--red-550);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-250); --color--: var(--red-600);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-300); --color--: var(--red-650);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-350); --color--: var(--red-700);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-400); --color--: var(--red-750);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-400); --color--: var(--red-50);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-450); --color--: var(--red-100);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-500); --color--: var(--red-150);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-550); --color--: var(--red-200);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-600); --color--: var(--red-250);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-650); --color--: var(--red-300);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-700); --color--: var(--red-350);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--red-750); --color--: var(--red-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col">
<p style="--background--: var(--yellow-50); --color--: var(--yellow-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-100); --color--: var(--yellow-450);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-150); --color--: var(--yellow-500);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-200); --color--: var(--yellow-550);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-250); --color--: var(--yellow-600);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-300); --color--: var(--yellow-650);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-350); --color--: var(--yellow-700);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-400); --color--: var(--yellow-750);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-400); --color--: var(--yellow-50);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-450); --color--: var(--yellow-100);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-500); --color--: var(--yellow-150);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-550); --color--: var(--yellow-200);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-600); --color--: var(--yellow-250);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-650); --color--: var(--yellow-300);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-700); --color--: var(--yellow-350);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--yellow-750); --color--: var(--yellow-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col">
<p style="--background--: var(--green-50); --color--: var(--green-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-100); --color--: var(--green-450);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-150); --color--: var(--green-500);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-200); --color--: var(--green-550);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-250); --color--: var(--green-600);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-300); --color--: var(--green-650);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-350); --color--: var(--green-700);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-400); --color--: var(--green-750);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-400); --color--: var(--green-50);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-450); --color--: var(--green-100);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-500); --color--: var(--green-150);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-550); --color--: var(--green-200);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-600); --color--: var(--green-250);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-650); --color--: var(--green-300);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-700); --color--: var(--green-350);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--green-750); --color--: var(--green-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col">
<p style="--background--: var(--blue-50); --color--: var(--blue-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-100); --color--: var(--blue-450);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-150); --color--: var(--blue-500);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-200); --color--: var(--blue-550);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-250); --color--: var(--blue-600);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-300); --color--: var(--blue-650);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-350); --color--: var(--blue-700);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-400); --color--: var(--blue-750);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-400); --color--: var(--blue-50);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-450); --color--: var(--blue-100);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-500); --color--: var(--blue-150);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-550); --color--: var(--blue-200);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-600); --color--: var(--blue-250);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-650); --color--: var(--blue-300);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-700); --color--: var(--blue-350);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--blue-750); --color--: var(--blue-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col">
<p style="--background--: var(--gray-50); --color--: var(--gray-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-100); --color--: var(--gray-450);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-150); --color--: var(--gray-500);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-200); --color--: var(--gray-550);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-250); --color--: var(--gray-600);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-300); --color--: var(--gray-650);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-350); --color--: var(--gray-700);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-400); --color--: var(--gray-750);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-400); --color--: var(--gray-50);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-450); --color--: var(--gray-100);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-500); --color--: var(--gray-150);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-550); --color--: var(--gray-200);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-600); --color--: var(--gray-250);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-650); --color--: var(--gray-300);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-700); --color--: var(--gray-350);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="--background--: var(--gray-750); --color--: var(--gray-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
html {
& {
--black: #000;
--white: #fff;
--borw: var(--black);
--worb: var(--white);
--red: hsl(0, 90%, 64%);
--red-50: color-mix(in srgb, var(--worb), var(--red) 12.5%);
--red-100: color-mix(in srgb, var(--worb), var(--red) 25%);
--red-150: color-mix(in srgb, var(--worb), var(--red) 37.5%);
--red-200: color-mix(in srgb, var(--worb), var(--red) 50%);
--red-250: color-mix(in srgb, var(--worb), var(--red) 62.5%);
--red-300: color-mix(in srgb, var(--worb), var(--red) 75%);
--red-350: color-mix(in srgb, var(--worb), var(--red) 87.5%);
--red-400: var(--red);
--red-450: color-mix(in srgb, var(--borw), var(--red) 87.5%);
--red-500: color-mix(in srgb, var(--borw), var(--red) 75%);
--red-550: color-mix(in srgb, var(--borw), var(--red) 62.5%);
--red-600: color-mix(in srgb, var(--borw), var(--red) 50%);
--red-650: color-mix(in srgb, var(--borw), var(--red) 37.5%);
--red-700: color-mix(in srgb, var(--borw), var(--red) 25%);
--red-750: color-mix(in srgb, var(--borw), var(--red) 12.5%);
--yellow: hsl(40, 90%, 43%);
--yellow-50: color-mix(in srgb, var(--worb), var(--yellow) 12.5%);
--yellow-100: color-mix(in srgb, var(--worb), var(--yellow) 25%);
--yellow-150: color-mix(in srgb, var(--worb), var(--yellow) 37.5%);
--yellow-200: color-mix(in srgb, var(--worb), var(--yellow) 50%);
--yellow-250: color-mix(in srgb, var(--worb), var(--yellow) 62.5%);
--yellow-300: color-mix(in srgb, var(--worb), var(--yellow) 75%);
--yellow-350: color-mix(in srgb, var(--worb), var(--yellow) 87.5%);
--yellow-400: var(--yellow);
--yellow-450: color-mix(in srgb, var(--borw), var(--yellow) 87.5%);
--yellow-500: color-mix(in srgb, var(--borw), var(--yellow) 75%);
--yellow-550: color-mix(in srgb, var(--borw), var(--yellow) 62.5%);
--yellow-600: color-mix(in srgb, var(--borw), var(--yellow) 50%);
--yellow-650: color-mix(in srgb, var(--borw), var(--yellow) 37.5%);
--yellow-700: color-mix(in srgb, var(--borw), var(--yellow) 25%);
--yellow-750: color-mix(in srgb, var(--borw), var(--yellow) 12.5%);
--green: hsl(100, 80%, 35%);
--green-50: color-mix(in srgb, var(--worb), var(--green) 12.5%);
--green-100: color-mix(in srgb, var(--worb), var(--green) 25%);
--green-150: color-mix(in srgb, var(--worb), var(--green) 37.5%);
--green-200: color-mix(in srgb, var(--worb), var(--green) 50%);
--green-250: color-mix(in srgb, var(--worb), var(--green) 62.5%);
--green-300: color-mix(in srgb, var(--worb), var(--green) 75%);
--green-350: color-mix(in srgb, var(--worb), var(--green) 87.5%);
--green-400: var(--green);
--green-450: color-mix(in srgb, var(--borw), var(--green) 87.5%);
--green-500: color-mix(in srgb, var(--borw), var(--green) 75%);
--green-550: color-mix(in srgb, var(--borw), var(--green) 62.5%);
--green-600: color-mix(in srgb, var(--borw), var(--green) 50%);
--green-650: color-mix(in srgb, var(--borw), var(--green) 37.5%);
--green-700: color-mix(in srgb, var(--borw), var(--green) 25%);
--green-750: color-mix(in srgb, var(--borw), var(--green) 12.5%);
--blue: hsl(220, 90%, 59%);
--blue-50: color-mix(in srgb, var(--worb), var(--blue) 12.5%);
--blue-100: color-mix(in srgb, var(--worb), var(--blue) 25%);
--blue-150: color-mix(in srgb, var(--worb), var(--blue) 37.5%);
--blue-200: color-mix(in srgb, var(--worb), var(--blue) 50%);
--blue-250: color-mix(in srgb, var(--worb), var(--blue) 62.5%);
--blue-300: color-mix(in srgb, var(--worb), var(--blue) 75%);
--blue-350: color-mix(in srgb, var(--worb), var(--blue) 87.5%);
--blue-400: var(--blue);
--blue-450: color-mix(in srgb, var(--borw), var(--blue) 87.5%);
--blue-500: color-mix(in srgb, var(--borw), var(--blue) 75%);
--blue-550: color-mix(in srgb, var(--borw), var(--blue) 62.5%);
--blue-600: color-mix(in srgb, var(--borw), var(--blue) 50%);
--blue-650: color-mix(in srgb, var(--borw), var(--blue) 37.5%);
--blue-700: color-mix(in srgb, var(--borw), var(--blue) 25%);
--blue-750: color-mix(in srgb, var(--borw), var(--blue) 12.5%);
--gray: hsl(0, 0%, 50%);
--gray-50: color-mix(in srgb, var(--worb), var(--gray) 12.5%);
--gray-100: color-mix(in srgb, var(--worb), var(--gray) 25%);
--gray-150: color-mix(in srgb, var(--worb), var(--gray) 37.5%);
--gray-200: color-mix(in srgb, var(--worb), var(--gray) 50%);
--gray-250: color-mix(in srgb, var(--worb), var(--gray) 62.5%);
--gray-300: color-mix(in srgb, var(--worb), var(--gray) 75%);
--gray-350: color-mix(in srgb, var(--worb), var(--gray) 87.5%);
--gray-400: var(--gray);
--gray-450: color-mix(in srgb, var(--borw), var(--gray) 87.5%);
--gray-500: color-mix(in srgb, var(--borw), var(--gray) 75%);
--gray-550: color-mix(in srgb, var(--borw), var(--gray) 62.5%);
--gray-600: color-mix(in srgb, var(--borw), var(--gray) 50%);
--gray-650: color-mix(in srgb, var(--borw), var(--gray) 37.5%);
--gray-700: color-mix(in srgb, var(--borw), var(--gray) 25%);
--gray-750: color-mix(in srgb, var(--borw), var(--gray) 12.5%);
}
&:has([value="dark"]:checked) {
--borw: var(--white);
--worb: var(--black);
}
&:has([value="grayscale"]:checked) {
filter: grayscale(100%);
}
}
[style~="--background--:"] {
background: var(--background--);
}
[style~="--color--:"] {
color: var(--color--);
}
body {
margin: 0;
}
.ctrls {
& {
background: var(--black);
color: var(--white);
display: flex;
position: sticky;
inset-block-start: 0;
}
&:not(:hover, :focus-within) {
opacity: 0.5;
}
& input {
appearance: none;
background: none;
border: none;
color: inherit;
cursor: pointer;
margin: 0;
padding: 0.5em;
padding-inline: 1em;
}
& input::before {
content: attr(value);
text-transform: uppercase;
}
& input:checked {
background: color-mix(in srgb, var(--black), var(--white) 25%);
}
}
.row {
& {
display: flex;
}
& p {
margin: 0;
padding: 1em;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.