Nesting CSS styles (like in SASS) is supported by most modern browsers: https://caniuse.com/css-nesting
The validator throws a parse error. At least make it a warning instead of an error.
Here's the CSS. It complains about the double closing curly brackets.
<style>
.snapshot{
--grid-color: #3f7082;
--big-squish-txt: #b14f50;
--medium-squish-txt: #806729;
--header-txt: #525b64;
--demographics: #b14f50;
--hc-color: #c8d0b9;
--text: #615e59;
--link: #006699;
--border: 10px solid var(--grid-color);
--map-bg: url('[path]');
--map-text-position:185px;
--thead: #806729;
--thead-txt: white;
--caption: #3f7082;
--stripe: #FCF6E8;
/*HC border colors*/
--international: #3f7082;
--domestic: #806729;
--natural: #c8d0b9;
--darken:45%;
.big-bold{
font-family: var(--sans);
font-size: 1.25rem;
font-weight: 800;
line-height: 1.5;
text-transform: uppercase;
color: #525b64;
}
}
</style>
Nesting CSS styles (like in SASS) is supported by most modern browsers: https://caniuse.com/css-nesting
The validator throws a parse error. At least make it a warning instead of an error.
Here's the CSS. It complains about the double closing curly brackets.
<style> .snapshot{ --grid-color: #3f7082; --big-squish-txt: #b14f50; --medium-squish-txt: #806729; --header-txt: #525b64; --demographics: #b14f50; --hc-color: #c8d0b9; --text: #615e59; --link: #006699; --border: 10px solid var(--grid-color); --map-bg: url('[path]'); --map-text-position:185px; --thead: #806729; --thead-txt: white; --caption: #3f7082; --stripe: #FCF6E8; /*HC border colors*/ --international: #3f7082; --domestic: #806729; --natural: #c8d0b9; --darken:45%; .big-bold{ font-family: var(--sans); font-size: 1.25rem; font-weight: 800; line-height: 1.5; text-transform: uppercase; color: #525b64; } } </style>