Deploy from Travis build 47 [ci skip]

Build URL: https://travis-ci.com/gadenbuie/xaringanthemer/builds/158426499
Commit: 6509095af2

dev/404.html

 </li>
 <li>
   <a href="articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/LICENSE-text.html

 </li>
 <li>
   <a href="articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/LICENSE.html

 </li>
 <li>
   <a href="articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/articles/fonts.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
 <ul class="nav navbar-nav navbar-right">

dev/articles/index.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/articles/template-variables.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
 <ul class="nav navbar-nav navbar-right">
 <p>To be concrete, <code><a href="../reference/style_mono_accent.html">style_mono_accent()</a></code> has three additional arguments: <code>base_color</code> (the accent color), <code>white_color</code>, and <code>black_color</code>. In this theme, the background slide color defaults to <code>white_color</code>, but you can choose a different slide background color by setting <code>background_color</code>, for example <code>background_color = "#EAEAEA"</code>.</p>
 <table class="table">
 <thead><tr class="header">
-<th align="left">variable</th>
-<th align="left">description</th>
-<th align="left">element</th>
-<th align="left">default</th>
+<th align="left">Variable</th>
+<th align="left">Description</th>
+<th align="left">Element</th>
+<th align="left">Default</th>
+<th align="left">CSS Variable</th>
 </tr></thead>
 <tbody>
 <tr class="odd">
 <td align="left">Text Color</td>
 <td align="left">body</td>
 <td align="left">#000</td>
+<td align="left">–text_color</td>
 </tr>
 <tr class="even">
 <td align="left"><code>header_color</code></td>
 <td align="left">Header Color</td>
 <td align="left">h1, h2, h3</td>
 <td align="left">#000</td>
+<td align="left">–header-color</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>background_color</code></td>
 <td align="left">Slide Background Color</td>
 <td align="left">.remark-slide-content</td>
 <td align="left">#FFF</td>
+<td align="left">–background-color</td>
 </tr>
 <tr class="even">
 <td align="left"><code>link_color</code></td>
 <td align="left">Link Color</td>
 <td align="left">a, a &gt; code</td>
 <td align="left">rgb(249, 38, 114)</td>
+<td align="left">–link-color</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>text_bold_color</code></td>
 <td align="left">Bold Text Color</td>
 <td align="left">strong</td>
 <td align="left">NULL</td>
+<td align="left">–text-bold-color</td>
 </tr>
 <tr class="even">
 <td align="left"><code>text_slide_number_color</code></td>
 <td align="left">Slide Number Color</td>
 <td align="left">.remark-slide-number</td>
 <td align="left">inverse_background_color</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>padding</code></td>
 <td align="left">Slide Padding in <code>top right [bottom left]</code> format</td>
 <td align="left">.remark-slide-content</td>
 <td align="left">16px 64px 16px 64px</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>background_image</code></td>
 <td align="left">Background image applied to each <em>and every</em> slide. Set <code>title_slide_background_image = "none"</code> to remove the background image from the title slide</td>
 <td align="left">.remark-slide-content</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>background_size</code></td>
 <td align="left">Background image size, requires <code>background_image</code> to be set. If <code>background_image</code> is set, <code>background_size</code> will default to <code>cover</code> so the backround fills the screen. If both <code>background_image</code> and <code>background_position</code> are set, will default to 100 percent</td>
 <td align="left">.remark-slide-content</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>background_position</code></td>
 </td>
 <td align="left">.remark-slide-content</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>code_highlight_color</code></td>
 <td align="left">Code Line Highlight</td>
 <td align="left">.remark-code-line-highlighted</td>
 <td align="left">rgba(255,255,0,0.5)</td>
+<td align="left">–code-highlight-color</td>
 </tr>
 <tr class="even">
 <td align="left"><code>code_inline_color</code></td>
 <td align="left">Inline Code Color</td>
 <td align="left">.remark-inline-code</td>
 <td align="left">#000</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>code_inline_background_color</code></td>
 <td align="left">Inline Code Background Color</td>
 <td align="left">.remark-inline-code</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>code_inline_font_size</code></td>
 <td align="left">Inline Code Text Font Size</td>
 <td align="left">.remark-inline-code</td>
 <td align="left">1em</td>
+<td align="left">–code-inline-font-size</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>inverse_background_color</code></td>
 <td align="left">Inverse Background Color</td>
 <td align="left">.inverse</td>
 <td align="left">#272822</td>
+<td align="left">–inverse-background-color</td>
 </tr>
 <tr class="even">
 <td align="left"><code>inverse_text_color</code></td>
 <td align="left">Inverse Text Color</td>
 <td align="left">.inverse</td>
 <td align="left">#d6d6d6</td>
+<td align="left">–inverse-text-color</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>inverse_text_shadow</code></td>
 <td align="left">Enables Shadow on text of inverse slides</td>
 <td align="left">.inverse</td>
 <td align="left">FALSE</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>inverse_header_color</code></td>
 <td align="left">Inverse Header Color</td>
 <td align="left">.inverse h1, .inverse h2, .inverse h3</td>
 <td align="left">#f3f3f3</td>
+<td align="left">–inverse-header-color</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>title_slide_text_color</code></td>
 <td align="left">Title Slide Text Color</td>
 <td align="left">.title-slide</td>
 <td align="left">inverse_text_color</td>
+<td align="left">–title-slide-text-color</td>
 </tr>
 <tr class="even">
 <td align="left"><code>title_slide_background_color</code></td>
 <td align="left">Title Slide Background Color</td>
 <td align="left">.title-slide</td>
 <td align="left">inverse_background_color</td>
+<td align="left">–title-slide-background-color</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>title_slide_background_image</code></td>
 <td align="left">Title Slide Background Image URL</td>
 <td align="left">.title-slide</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>title_slide_background_size</code></td>
 <td align="left">Title Slide Background Image Size, defaults to “cover” if background image is set</td>
 <td align="left">.title-slide</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>title_slide_background_position</code></td>
 <td align="left">Title Slide Background Image Position</td>
 <td align="left">.title-slide</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>footnote_color</code></td>
 <td align="left">Footnote text color (if <code>NA</code>, then it will be the same color as <code>text_color</code>)</td>
 <td align="left">.footnote</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>footnote_font_size</code></td>
 <td align="left">Footnote font size</td>
 <td align="left">.footnote</td>
 <td align="left">0.9em</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>footnote_position_bottom</code></td>
 <td align="left">Footnote location from bottom of screen</td>
 <td align="left">.footnote</td>
 <td align="left">60px</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>left_column_subtle_color</code></td>
 <td align="left">Left Column Text (not last)</td>
 <td align="left">.left-column h2, .left-column h3</td>
 <td align="left">#777</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>left_column_selected_color</code></td>
 <td align="left">Left Column Current Selection</td>
 <td align="left">.left-column h2:last-of-type, .left-column h3:last-child</td>
 <td align="left">#000</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>blockquote_left_border_color</code></td>
 <td align="left">Blockquote Left Border Color</td>
 <td align="left">blockquote</td>
 <td align="left">lightgray</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>table_border_color</code></td>
 <td align="left">Table top/bottom border</td>
 <td align="left">table: border-top, border-bottom</td>
 <td align="left">#666</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>table_row_border_color</code></td>
 <td align="left">Table row inner bottom border</td>
 <td align="left">table thead th: border-bottom</td>
 <td align="left">#ddd</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>table_row_even_background_color</code></td>
 <td align="left">Table Even Row Background Color</td>
 <td align="left">thead, tfoot, tr:nth-child(even)</td>
 <td align="left">#eee</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>base_font_size</code></td>
 <td align="left">Base Font Size for All Slide Elements (must be <code>px</code>)</td>
 <td align="left">html</td>
 <td align="left">20px</td>
+<td align="left">–base-font-size</td>
 </tr>
 <tr class="even">
 <td align="left"><code>text_font_size</code></td>
 <td align="left">Slide Body Text Font Size</td>
 <td align="left">.remark-slide-content</td>
 <td align="left">1rem</td>
+<td align="left">–text-font-size</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>header_h1_font_size</code></td>
 <td align="left">h1 Header Text Font Size</td>
 <td align="left">.remark-slide-content h1</td>
 <td align="left">2.75rem</td>
+<td align="left">–header-h1-font-size</td>
 </tr>
 <tr class="even">
 <td align="left"><code>header_h2_font_size</code></td>
 <td align="left">h2 Header Text Font Size</td>
 <td align="left">.remark-slide-content h2</td>
 <td align="left">2.25rem</td>
+<td align="left">–header-h2-font-size</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>header_h3_font_size</code></td>
 <td align="left">h3 Header Text Font Size</td>
 <td align="left">.remark-slide-content h3</td>
 <td align="left">1.75rem</td>
+<td align="left">–header-h3-font-size</td>
 </tr>
 <tr class="even">
 <td align="left"><code>header_background_auto</code></td>
 <td align="left">Add background under slide title automatically for h1 header elements. If not enabled, use <code>class: header_background</code> to enable</td>
 <td align="left"></td>
 <td align="left">FALSE</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>header_background_color</code></td>
 <td align="left">Background Color for h1 Header with Background</td>
 <td align="left">.remark-slide-content h1</td>
 <td align="left">header_color</td>
+<td align="left">–header-background-color</td>
 </tr>
 <tr class="even">
 <td align="left"><code>header_background_text_color</code></td>
 <td align="left">Text Color for h1 Header with Background</td>
 <td align="left">.remark-slide-content h1</td>
 <td align="left">background_color</td>
+<td align="left">–header-background-text-color</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>header_background_padding</code></td>
 <td align="left">Padding for h1 Header with Background</td>
 <td align="left">.remark-slide-content h1</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>header_background_content_padding_top</code></td>
 <td align="left">Top Padding for Content in Slide with Header with Background</td>
 <td align="left">.remark-slide-content</td>
 <td align="left">7rem</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>header_background_ignore_classes</code></td>
 <td align="left">Slide Classes Where Header with Background will not be Applied</td>
 <td align="left">.remark-slide-content</td>
 <td align="left">c(‘normal’, ‘inverse’, ‘title’, ‘middle’, ‘bottom’)</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>text_slide_number_font_size</code></td>
 <td align="left">Slide Number Text Font Size</td>
 <td align="left">.remark-slide-number</td>
 <td align="left">0.9em</td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>text_font_google</code></td>
 <td align="left">Use <code><a href="../reference/google_font.html">google_font()</a></code> to specify body font</td>
 <td align="left">body</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>text_font_family</code></td>
 <td align="left">Body Text Font Family (xaringan default is <code>'Droid Serif'</code>)</td>
 <td align="left">body</td>
 <td align="left">Noto Sans</td>
+<td align="left">–text-font-family</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>text_font_weight</code></td>
 <td align="left">Body Text Font Weight</td>
 <td align="left">body</td>
 <td align="left">normal</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>text_font_url</code></td>
 <td align="left">
 <span class="citation">@import</span> url()</td>
 <td align="left"><a href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&amp;display=swap" class="uri">https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&amp;display=swap</a></td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>text_font_family_fallback</code></td>
 <td align="left">Body Text Font Fallbacks</td>
 <td align="left">body</td>
 <td align="left">-apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial</td>
+<td align="left">–text-font-family-fallback</td>
 </tr>
 <tr class="even">
 <td align="left"><code>text_font_base</code></td>
 <td align="left">Body Text Base Font (Total Failure Fallback)</td>
 <td align="left">body</td>
 <td align="left">sans-serif</td>
+<td align="left">–text-font-base</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>header_font_google</code></td>
 <td align="left">Use <code><a href="../reference/google_font.html">google_font()</a></code> to specify header font</td>
 <td align="left">body</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>header_font_family</code></td>
 <td align="left">Header Font Family (xaringan default is <code>'Yanone Kaffeesatz'</code>)</td>
 <td align="left">h1, h2, h3</td>
 <td align="left">Cabin</td>
+<td align="left">–header-font-family</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>header_font_weight</code></td>
 <td align="left">Header Font Weight</td>
 <td align="left">h1, h2, h3</td>
 <td align="left">600</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>header_font_url</code></td>
 <td align="left">
 <span class="citation">@import</span> url</td>
 <td align="left"><a href="https://fonts.googleapis.com/css?family=Cabin:600,600i&amp;display=swap" class="uri">https://fonts.googleapis.com/css?family=Cabin:600,600i&amp;display=swap</a></td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>code_font_google</code></td>
 <td align="left">Use <code><a href="../reference/google_font.html">google_font()</a></code> to specify code font</td>
 <td align="left">body</td>
 <td align="left">NULL</td>
+<td align="left">NA</td>
 </tr>
 <tr class="even">
 <td align="left"><code>code_font_family</code></td>
 <td align="left">Code Font Family</td>
 <td align="left">.remark-code, .remark-inline-code</td>
 <td align="left">Source Code Pro</td>
+<td align="left">–code-font-family</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>code_font_size</code></td>
 <td align="left">Code Text Font Size</td>
 <td align="left">.remark-inline</td>
 <td align="left">0.9rem</td>
+<td align="left">–code-font-size</td>
 </tr>
 <tr class="even">
 <td align="left"><code>code_font_url</code></td>
 <td align="left">
 <span class="citation">@import</span> url</td>
 <td align="left"><a href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&amp;display=swap" class="uri">https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&amp;display=swap</a></td>
+<td align="left">NA</td>
 </tr>
 <tr class="odd">
 <td align="left"><code>code_font_family_fallback</code></td>
 <td align="left">Code Font Fallback</td>
 <td align="left">.remark-code, .remark-inline-code</td>
 <td align="left">Menlo, Consolas, Monaco, Liberation Mono, Lucida Console</td>
+<td align="left">NA</td>
 </tr>
 </tbody>
 </table>

dev/articles/themes.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
 <ul class="nav navbar-nav navbar-right">

dev/articles/xaringanthemer.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
 <ul class="nav navbar-nav navbar-right">

dev/authors.html

 </li>
 <li>
   <a href="articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/index.html

 </li>
 <li>
   <a href="articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="articles/css-help.html">CSS Help</a>
 </li>
       </ul>
 <ul class="nav navbar-nav navbar-right">

dev/news/index.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
 <li><p>Renamed all xaringanthemer functions that create CSS styles to use the prefix “<code>style_</code>”. For example, <code><a href="../reference/xaringanthemer-deprecated.html">mono_light()</a></code> is now <code><a href="../reference/style_mono_light.html">style_mono_light()</a></code>. Additionally, <code><a href="../reference/xaringanthemer-deprecated.html">write_xaringan_theme()</a></code> is now <code><a href="../reference/style_xaringan.html">style_xaringan()</a></code> and <code><a href="../reference/xaringanthemer-deprecated.html">write_extra_css()</a></code> is <code><a href="../reference/style_extra_css.html">style_extra_css()</a></code>. Overall, this change makes the xarignanthemer API much cleaner and easier to navigate. Previous function names are deprecated but still work.</p></li>
 <li><p>Added <code>background_header_auto</code> parameter that adds a background under the first <code>h1</code> element (i.e. <code># Slide Title</code>) on a slide. When enabled, the background is added automatically to slides, as long as they aren’t <code>inverse</code>, <code>center</code>, <code>middle</code>, or <code>bottom</code>-styled slides. When disabled, you can still enable slide title headers by adding the <code>header_background</code> class to a slide. (thanks, <a href='https://github.com/Btibert3'>@Btibert3</a>, <a href='https://github.com/gadenbuie/xaringanthemer/issues/10'>#10</a>)</p></li>
 <li><p>The underlying template now uses the <code>whisker</code> package.</p></li>
+<li><p>xaringanthemer styles now use CSS variables throughout. Most of the settings used in defining a style are stored in CSS variables. The variable names are documented in their corresponding arguments. For example, the color selected for <code>background_color</code> is stored in the variable <code>--background-color</code>. These variables can be used in custom CSS rules or in other arguments in any style functions, for example as <code><a href="https://rdrr.io/r/stats/cor.html">var(--background-color)</a></code>.</p></li>
 <li><p>xaringanthemer now uses a different set of default fonts for heading and body fonts. The new defaults use <a href="https://fonts.google.com/specimen/Cabin">Cabin</a> for headings and <a href="https://fonts.google.com/specimen/Noto+Sans">Noto Sans</a> for body text. These fonts are easier to read on screens and at a distance during presentations, and they support a wide variety of languages and weights. Another reason for the change is that the xaringan (remarkjs) default body font, <em>Droid Serif</em>, is no longer officially included in Google Fonts.</p></li>
 <li><p>Additional colors can be provided in the <code>colors</code> argument, which takes a named vector of colors. The names become both CSS classes and CSS variables that can be used throughout your slide styles. For example, <code>colors = c(red = "#d34213")</code> creates a <code>.red</code> CSS class for red foreground text, a <code>.bg-red</code> CSS class for a red background, and a <code>--red</code> CSS variable that can be referenced as <code><a href="https://rdrr.io/r/stats/cor.html">var(--red)</a></code> in any <code>_color</code> argument of your style function.</p></li>
 </ul>

dev/pkgdown.yml

   template-variables: template-variables.html
   themes: themes.html
   xaringanthemer: xaringanthemer.html
-last_built: 2020-04-04T19:45Z
+last_built: 2020-04-04T22:34Z
 urls:
   reference: https://pkg.garrickadenbuie.com/xaringanthemer//reference
   article: https://pkg.garrickadenbuie.com/xaringanthemer//articles

dev/reference/apply_alpha.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/choose_dark_or_light.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/google_font.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/google_language_codes.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/index.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/lighten_darken_color.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/scale_xaringan.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/style_duo.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/style_duo_accent.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/style_duo_accent_inverse.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/style_extra_css.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/style_mono_accent.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/style_mono_accent_inverse.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/style_mono_dark.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/style_mono_light.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/style_solarized_dark.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
     <tr>
       <th>text_color</th>
       <td><p>Text Color. Defaults to #839496. Modifies the <code>body</code>
-element.</p></td>
+element. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text_color)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_color</th>
       <td><p>Header Color. Defaults to #dc322f. Modifies the
-<code>h1, h2, h3</code> elements.</p></td>
+<code>h1, h2, h3</code> elements. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-color)</a></code> in any argument
+of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>background_color</th>
       <td><p>Slide Background Color. Defaults to #002b36.
-Modifies the <code>.remark-slide-content</code> class.</p></td>
+Modifies the <code>.remark-slide-content</code> class. The value of this variable is
+also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--background-color)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>link_color</th>
       <td><p>Link Color. Defaults to #b58900. Modifies the
-<code>a, a &gt; code</code> elements.</p></td>
+<code>a, a &gt; code</code> elements. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--link-color)</a></code> in any argument
+of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_bold_color</th>
       <td><p>Bold Text Color. Defaults to #d33682. Modifies the
-<code>strong</code> element.</p></td>
+<code>strong</code> element. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-bold-color)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_slide_number_color</th>
       <td><p>Slide Number Color. Defaults to #586e75.
-Modifies the <code>.remark-slide-number</code> class.</p></td>
+Modifies the <code>.remark-slide-number</code> class. The value of this variable is
+also stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>padding</th>
       <td><p>Slide Padding in <code>top right [bottom left]</code> format. Defaults
-to 16px 64px 16px 64px. Modifies the <code>.remark-slide-content</code> class.</p></td>
+to 16px 64px 16px 64px. Modifies the <code>.remark-slide-content</code> class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>background_image</th>
       <td><p>Background image applied to each <em>and every</em> slide.
 Set <code>title_slide_background_image = "none"</code> to remove the background image
 from the title slide. Defaults to <code>NULL</code>. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>background_size</th>
 be set. If <code>background_image</code> is set, <code>background_size</code> will default to
 <code>cover</code> so the backround fills the screen. If both <code>background_image</code> and
 <code>background_position</code> are set, will default to 100 percent. Defaults to
-<code>NULL</code>. Modifies the <code>.remark-slide-content</code> class.</p></td>
+<code>NULL</code>. Modifies the <code>.remark-slide-content</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>background_position</th>
       <td><p>Background image position, requires
 <code>background_image</code> to be set, and it is recommended to adjust
 <code>background_size</code>. Defaults to <code>NULL</code>. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_highlight_color</th>
       <td><p>Code Line Highlight. Defaults to #268bd240.
-Modifies the <code>.remark-code-line-highlighted</code> class.</p></td>
+Modifies the <code>.remark-code-line-highlighted</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-highlight-color)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_inline_color</th>
       <td><p>Inline Code Color. Defaults to #6c71c4. Modifies
-the <code>.remark-inline-code</code> class.</p></td>
+the <code>.remark-inline-code</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_inline_background_color</th>
       <td><p>Inline Code Background Color. Defaults
-to <code>NULL</code>. Modifies the <code>.remark-inline-code</code> class.</p></td>
+to <code>NULL</code>. Modifies the <code>.remark-inline-code</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_inline_font_size</th>
       <td><p>Inline Code Text Font Size. Defaults to 1em.
-Modifies the <code>.remark-inline-code</code> class.</p></td>
+Modifies the <code>.remark-inline-code</code> class. The value of this variable is
+also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-inline-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_background_color</th>
       <td><p>Inverse Background Color. Defaults to
-#fdf6e3. Modifies the <code>.inverse</code> class.</p></td>
+#fdf6e3. Modifies the <code>.inverse</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--inverse-background-color)</a></code> in any argument of a style function or
+in custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_text_color</th>
       <td><p>Inverse Text Color. Defaults to #002b36. Modifies
-the <code>.inverse</code> class.</p></td>
+the <code>.inverse</code> class. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--inverse-text-color)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_text_shadow</th>
       <td><p>Enables Shadow on text of inverse slides.
-Defaults to <code>FALSE</code>. Modifies the <code>.inverse</code> class.</p></td>
+Defaults to <code>FALSE</code>. Modifies the <code>.inverse</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_header_color</th>
       <td><p>Inverse Header Color. Defaults to
 <code>inverse_text_color</code>. Modifies the <code>.inverse h1, .inverse h2, .inverse h3</code>
-classes.</p></td>
+classes. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--inverse-header-color)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_text_color</th>
       <td><p>Title Slide Text Color. Defaults to
-<code>inverse_text_color</code>. Modifies the <code>.title-slide</code> class.</p></td>
+<code>inverse_text_color</code>. Modifies the <code>.title-slide</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--title-slide-text-color)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_color</th>
       <td><p>Title Slide Background Color. Defaults
-to <code>inverse_background_color</code>. Modifies the <code>.title-slide</code> class.</p></td>
+to <code>inverse_background_color</code>. Modifies the <code>.title-slide</code> class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--title-slide-background-color)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_image</th>
       <td><p>Title Slide Background Image URL.
-Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class.</p></td>
+Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_size</th>
       <td><p>Title Slide Background Image Size,
 defaults to "cover" if background image is set. Defaults to <code>NULL</code>.
-Modifies the <code>.title-slide</code> class.</p></td>
+Modifies the <code>.title-slide</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_position</th>
       <td><p>Title Slide Background Image
-Position. Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class.</p></td>
+Position. Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class. The value
+of this variable is also stored as a CSS variable that can be referenced
+with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>footnote_color</th>
       <td><p>Footnote text color (if <code>NA</code>, then it will be the same
 color as <code>text_color</code>). Defaults to <code>NULL</code>. Modifies the <code>.footnote</code>
-class.</p></td>
+class. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>footnote_font_size</th>
       <td><p>Footnote font size. Defaults to 0.9em. Modifies
-the <code>.footnote</code> class.</p></td>
+the <code>.footnote</code> class. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>footnote_position_bottom</th>
       <td><p>Footnote location from bottom of screen.
-Defaults to 60px. Modifies the <code>.footnote</code> class.</p></td>
+Defaults to 60px. Modifies the <code>.footnote</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>left_column_subtle_color</th>
       <td><p>Left Column Text (not last). Defaults to
-#586e75. Modifies the <code>.left-column h2, .left-column h3</code> classes.</p></td>
+#586e75. Modifies the <code>.left-column h2, .left-column h3</code> classes. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>left_column_selected_color</th>
       <td><p>Left Column Current Selection. Defaults to
 #93a1a1. Modifies the
-<code>.left-column h2:last-of-type, .left-column h3:last-child</code> classes.</p></td>
+<code>.left-column h2:last-of-type, .left-column h3:last-child</code> classes. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>blockquote_left_border_color</th>
       <td><p>Blockquote Left Border Color. Defaults
-to #cb4b16. Modifies the <code>blockquote</code> element.</p></td>
+to #cb4b16. Modifies the <code>blockquote</code> element. The value of this variable
+is also stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in
+any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>table_border_color</th>
       <td><p>Table top/bottom border. Defaults to #657b83.
-Modifies the <code>table: border-top, border-bottom</code> elements.</p></td>
+Modifies the <code>table: border-top, border-bottom</code> elements. The value of
+this variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>table_row_border_color</th>
       <td><p>Table row inner bottom border. Defaults to
-#657b83. Modifies the <code>table thead th: border-bottom</code> elements.</p></td>
+#657b83. Modifies the <code>table thead th: border-bottom</code> elements. The value
+of this variable is also stored as a CSS variable that can be referenced
+with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>table_row_even_background_color</th>
       <td><p>Table Even Row Background Color.
 Defaults to #073642. Modifies the <code>thead, tfoot, tr:nth-child(even)</code>
-elements.</p></td>
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>base_font_size</th>
       <td><p>Base Font Size for All Slide Elements (must be <code>px</code>).
-Defaults to 20px. Modifies the <code>html</code> element.</p></td>
+Defaults to 20px. Modifies the <code>html</code> element. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--base-font-size)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_size</th>
       <td><p>Slide Body Text Font Size. Defaults to 1rem. Modifies
-the <code>.remark-slide-content</code> class.</p></td>
+the <code>.remark-slide-content</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-size)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>header_h1_font_size</th>
       <td><p>h1 Header Text Font Size. Defaults to 2.75rem.
-Modifies the <code>.remark-slide-content h1</code> class.</p></td>
+Modifies the <code>.remark-slide-content h1</code> class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-h1-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_h2_font_size</th>
       <td><p>h2 Header Text Font Size. Defaults to 2.25rem.
-Modifies the <code>.remark-slide-content h2</code> class.</p></td>
+Modifies the <code>.remark-slide-content h2</code> class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-h2-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_h3_font_size</th>
       <td><p>h3 Header Text Font Size. Defaults to 1.75rem.
-Modifies the <code>.remark-slide-content h3</code> class.</p></td>
+Modifies the <code>.remark-slide-content h3</code> class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-h3-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_auto</th>
       <td><p>Add background under slide title automatically
 for h1 header elements. If not enabled, use <code>class: header_background</code> to
-enable. Defaults to <code>FALSE</code>.</p></td>
+enable. Defaults to <code>FALSE</code>.  The value of this variable is also stored as
+a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_color</th>
       <td><p>Background Color for h1 Header with
 Background. Defaults to <code>header_color</code>. Modifies the
-<code>.remark-slide-content h1</code> class.</p></td>
+<code>.remark-slide-content h1</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-background-color)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_text_color</th>
       <td><p>Text Color for h1 Header with
 Background. Defaults to <code>background_color</code>. Modifies the
-<code>.remark-slide-content h1</code> class.</p></td>
+<code>.remark-slide-content h1</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-background-text-color)</a></code> in any argument of a style function
+or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_padding</th>
       <td><p>Padding for h1 Header with Background.
-Defaults to <code>NULL</code>. Modifies the <code>.remark-slide-content h1</code> class.</p></td>
+Defaults to <code>NULL</code>. Modifies the <code>.remark-slide-content h1</code> class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_content_padding_top</th>
       <td><p>Top Padding for Content in
 Slide with Header with Background. Defaults to 7rem. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_ignore_classes</th>
       <td><p>Slide Classes Where Header with
 Background will not be Applied. Defaults to
 <code><a href='https://rdrr.io/r/base/c.html'>c('normal', 'inverse', 'title', 'middle', 'bottom')</a></code>. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_slide_number_font_size</th>
       <td><p>Slide Number Text Font Size. Defaults to
-0.9em. Modifies the <code>.remark-slide-number</code> class.</p></td>
+0.9em. Modifies the <code>.remark-slide-number</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_google</th>
       <td><p>Use <code><a href='google_font.html'>google_font()</a></code> to specify body font. Defaults
-to <code>NULL</code>. Modifies the <code>body</code> element.</p></td>
+to <code>NULL</code>. Modifies the <code>body</code> element. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_family</th>
       <td><p>Body Text Font Family (xaringan default is
-<code>'Droid Serif'</code>). Defaults to Noto Sans. Modifies the <code>body</code> element.</p></td>
+<code>'Droid Serif'</code>). Defaults to Noto Sans. Modifies the <code>body</code> element. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-family)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_weight</th>
       <td><p>Body Text Font Weight. Defaults to normal. Modifies
-the <code>body</code> element.</p></td>
+the <code>body</code> element. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_url</th>
       <td><p>Body Text Font URL(s). Defaults to
 https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&amp;display=swap.
-Modifies the <code>@import url()</code> elements.</p></td>
+Modifies the <code>@import url()</code> elements. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_family_fallback</th>
       <td><p>Body Text Font Fallbacks. Defaults to
 -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
 helvetica, Ubuntu, roboto, noto, segoe ui, arial. Modifies the <code>body</code>
-element.</p></td>
+element. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-family-fallback)</a></code> in any argument
+of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_base</th>
       <td><p>Body Text Base Font (Total Failure Fallback). Defaults
-to sans-serif. Modifies the <code>body</code> element.</p></td>
+to sans-serif. Modifies the <code>body</code> element. The value of this variable is
+also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-base)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_google</th>
       <td><p>Use <code><a href='google_font.html'>google_font()</a></code> to specify header font.
-Defaults to <code>NULL</code>. Modifies the <code>body</code> element.</p></td>
+Defaults to <code>NULL</code>. Modifies the <code>body</code> element. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_family</th>
       <td><p>Header Font Family (xaringan default is
 <code>'Yanone Kaffeesatz'</code>). Defaults to Cabin. Modifies the <code>h1, h2, h3</code>
-elements.</p></td>
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-font-family)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_weight</th>
       <td><p>Header Font Weight. Defaults to 600. Modifies the
-<code>h1, h2, h3</code> elements.</p></td>
+<code>h1, h2, h3</code> elements. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_url</th>
       <td><p>Header Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Cabin:600,600i&amp;display=swap.
-Modifies the <code>@import url</code> elements.</p></td>
+Modifies the <code>@import url</code> elements. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_google</th>
       <td><p>Use <code><a href='google_font.html'>google_font()</a></code> to specify code font. Defaults
-to <code>NULL</code>. Modifies the <code>body</code> element.</p></td>
+to <code>NULL</code>. Modifies the <code>body</code> element. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_family</th>
       <td><p>Code Font Family. Defaults to Source Code Pro.
-Modifies the <code>.remark-code, .remark-inline-code</code> classes.</p></td>
+Modifies the <code>.remark-code, .remark-inline-code</code> classes. The value of
+this variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-font-family)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_size</th>
       <td><p>Code Text Font Size. Defaults to 0.9rem. Modifies the
-<code>.remark-inline</code> class.</p></td>
+<code>.remark-inline</code> class. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-font-size)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_url</th>
       <td><p>Code Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&amp;display=swap.
-Modifies the <code>@import url</code> elements.</p></td>
+Modifies the <code>@import url</code> elements. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_family_fallback</th>
       <td><p>Code Font Fallback. Defaults to Menlo,
 Consolas, Monaco, Liberation Mono, Lucida Console. Modifies the
-<code>.remark-code, .remark-inline-code</code> classes.</p></td>
+<code>.remark-code, .remark-inline-code</code> classes. The value of this variable is
+also stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>colors</th>

dev/reference/style_solarized_light.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
     <tr>
       <th>text_color</th>
       <td><p>Text Color. Defaults to #657b83. Modifies the <code>body</code>
-element.</p></td>
+element. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text_color)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_color</th>
       <td><p>Header Color. Defaults to #dc322f. Modifies the
-<code>h1, h2, h3</code> elements.</p></td>
+<code>h1, h2, h3</code> elements. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-color)</a></code> in any argument
+of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>background_color</th>
       <td><p>Slide Background Color. Defaults to #fdf6e3.
-Modifies the <code>.remark-slide-content</code> class.</p></td>
+Modifies the <code>.remark-slide-content</code> class. The value of this variable is
+also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--background-color)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>link_color</th>
       <td><p>Link Color. Defaults to #b58900. Modifies the
-<code>a, a &gt; code</code> elements.</p></td>
+<code>a, a &gt; code</code> elements. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--link-color)</a></code> in any argument
+of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_bold_color</th>
       <td><p>Bold Text Color. Defaults to #d33682. Modifies the
-<code>strong</code> element.</p></td>
+<code>strong</code> element. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-bold-color)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_slide_number_color</th>
       <td><p>Slide Number Color. Defaults to #93a1a1.
-Modifies the <code>.remark-slide-number</code> class.</p></td>
+Modifies the <code>.remark-slide-number</code> class. The value of this variable is
+also stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>padding</th>
       <td><p>Slide Padding in <code>top right [bottom left]</code> format. Defaults
-to 16px 64px 16px 64px. Modifies the <code>.remark-slide-content</code> class.</p></td>
+to 16px 64px 16px 64px. Modifies the <code>.remark-slide-content</code> class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>background_image</th>
       <td><p>Background image applied to each <em>and every</em> slide.
 Set <code>title_slide_background_image = "none"</code> to remove the background image
 from the title slide. Defaults to <code>NULL</code>. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>background_size</th>
 be set. If <code>background_image</code> is set, <code>background_size</code> will default to
 <code>cover</code> so the backround fills the screen. If both <code>background_image</code> and
 <code>background_position</code> are set, will default to 100 percent. Defaults to
-<code>NULL</code>. Modifies the <code>.remark-slide-content</code> class.</p></td>
+<code>NULL</code>. Modifies the <code>.remark-slide-content</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>background_position</th>
       <td><p>Background image position, requires
 <code>background_image</code> to be set, and it is recommended to adjust
 <code>background_size</code>. Defaults to <code>NULL</code>. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_highlight_color</th>
       <td><p>Code Line Highlight. Defaults to #268bd240.
-Modifies the <code>.remark-code-line-highlighted</code> class.</p></td>
+Modifies the <code>.remark-code-line-highlighted</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-highlight-color)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_inline_color</th>
       <td><p>Inline Code Color. Defaults to #6c71c4. Modifies
-the <code>.remark-inline-code</code> class.</p></td>
+the <code>.remark-inline-code</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_inline_background_color</th>
       <td><p>Inline Code Background Color. Defaults
-to <code>NULL</code>. Modifies the <code>.remark-inline-code</code> class.</p></td>
+to <code>NULL</code>. Modifies the <code>.remark-inline-code</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_inline_font_size</th>
       <td><p>Inline Code Text Font Size. Defaults to 1em.
-Modifies the <code>.remark-inline-code</code> class.</p></td>
+Modifies the <code>.remark-inline-code</code> class. The value of this variable is
+also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-inline-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_background_color</th>
       <td><p>Inverse Background Color. Defaults to
-#002b36. Modifies the <code>.inverse</code> class.</p></td>
+#002b36. Modifies the <code>.inverse</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--inverse-background-color)</a></code> in any argument of a style function or
+in custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_text_color</th>
       <td><p>Inverse Text Color. Defaults to #fdf6e3. Modifies
-the <code>.inverse</code> class.</p></td>
+the <code>.inverse</code> class. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--inverse-text-color)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_text_shadow</th>
       <td><p>Enables Shadow on text of inverse slides.
-Defaults to <code>FALSE</code>. Modifies the <code>.inverse</code> class.</p></td>
+Defaults to <code>FALSE</code>. Modifies the <code>.inverse</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_header_color</th>
       <td><p>Inverse Header Color. Defaults to
 <code>inverse_text_color</code>. Modifies the <code>.inverse h1, .inverse h2, .inverse h3</code>
-classes.</p></td>
+classes. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--inverse-header-color)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_text_color</th>
       <td><p>Title Slide Text Color. Defaults to
-<code>inverse_text_color</code>. Modifies the <code>.title-slide</code> class.</p></td>
+<code>inverse_text_color</code>. Modifies the <code>.title-slide</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--title-slide-text-color)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_color</th>
       <td><p>Title Slide Background Color. Defaults
-to <code>inverse_background_color</code>. Modifies the <code>.title-slide</code> class.</p></td>
+to <code>inverse_background_color</code>. Modifies the <code>.title-slide</code> class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--title-slide-background-color)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_image</th>
       <td><p>Title Slide Background Image URL.
-Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class.</p></td>
+Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_size</th>
       <td><p>Title Slide Background Image Size,
 defaults to "cover" if background image is set. Defaults to <code>NULL</code>.
-Modifies the <code>.title-slide</code> class.</p></td>
+Modifies the <code>.title-slide</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_position</th>
       <td><p>Title Slide Background Image
-Position. Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class.</p></td>
+Position. Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class. The value
+of this variable is also stored as a CSS variable that can be referenced
+with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>footnote_color</th>
       <td><p>Footnote text color (if <code>NA</code>, then it will be the same
 color as <code>text_color</code>). Defaults to <code>NULL</code>. Modifies the <code>.footnote</code>
-class.</p></td>
+class. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>footnote_font_size</th>
       <td><p>Footnote font size. Defaults to 0.9em. Modifies
-the <code>.footnote</code> class.</p></td>
+the <code>.footnote</code> class. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>footnote_position_bottom</th>
       <td><p>Footnote location from bottom of screen.
-Defaults to 60px. Modifies the <code>.footnote</code> class.</p></td>
+Defaults to 60px. Modifies the <code>.footnote</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>left_column_subtle_color</th>
       <td><p>Left Column Text (not last). Defaults to
-#93a1a1. Modifies the <code>.left-column h2, .left-column h3</code> classes.</p></td>
+#93a1a1. Modifies the <code>.left-column h2, .left-column h3</code> classes. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>left_column_selected_color</th>
       <td><p>Left Column Current Selection. Defaults to
 #586e75. Modifies the
-<code>.left-column h2:last-of-type, .left-column h3:last-child</code> classes.</p></td>
+<code>.left-column h2:last-of-type, .left-column h3:last-child</code> classes. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>blockquote_left_border_color</th>
       <td><p>Blockquote Left Border Color. Defaults
-to #cb4b16. Modifies the <code>blockquote</code> element.</p></td>
+to #cb4b16. Modifies the <code>blockquote</code> element. The value of this variable
+is also stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in
+any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>table_border_color</th>
       <td><p>Table top/bottom border. Defaults to #839496.
-Modifies the <code>table: border-top, border-bottom</code> elements.</p></td>
+Modifies the <code>table: border-top, border-bottom</code> elements. The value of
+this variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>table_row_border_color</th>
       <td><p>Table row inner bottom border. Defaults to
-#839496. Modifies the <code>table thead th: border-bottom</code> elements.</p></td>
+#839496. Modifies the <code>table thead th: border-bottom</code> elements. The value
+of this variable is also stored as a CSS variable that can be referenced
+with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>table_row_even_background_color</th>
       <td><p>Table Even Row Background Color.
 Defaults to #eee8d5. Modifies the <code>thead, tfoot, tr:nth-child(even)</code>
-elements.</p></td>
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>base_font_size</th>
       <td><p>Base Font Size for All Slide Elements (must be <code>px</code>).
-Defaults to 20px. Modifies the <code>html</code> element.</p></td>
+Defaults to 20px. Modifies the <code>html</code> element. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--base-font-size)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_size</th>
       <td><p>Slide Body Text Font Size. Defaults to 1rem. Modifies
-the <code>.remark-slide-content</code> class.</p></td>
+the <code>.remark-slide-content</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-size)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>header_h1_font_size</th>
       <td><p>h1 Header Text Font Size. Defaults to 2.75rem.
-Modifies the <code>.remark-slide-content h1</code> class.</p></td>
+Modifies the <code>.remark-slide-content h1</code> class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-h1-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_h2_font_size</th>
       <td><p>h2 Header Text Font Size. Defaults to 2.25rem.
-Modifies the <code>.remark-slide-content h2</code> class.</p></td>
+Modifies the <code>.remark-slide-content h2</code> class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-h2-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_h3_font_size</th>
       <td><p>h3 Header Text Font Size. Defaults to 1.75rem.
-Modifies the <code>.remark-slide-content h3</code> class.</p></td>
+Modifies the <code>.remark-slide-content h3</code> class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-h3-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_auto</th>
       <td><p>Add background under slide title automatically
 for h1 header elements. If not enabled, use <code>class: header_background</code> to
-enable. Defaults to <code>FALSE</code>.</p></td>
+enable. Defaults to <code>FALSE</code>.  The value of this variable is also stored as
+a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_color</th>
       <td><p>Background Color for h1 Header with
 Background. Defaults to <code>header_color</code>. Modifies the
-<code>.remark-slide-content h1</code> class.</p></td>
+<code>.remark-slide-content h1</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-background-color)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_text_color</th>
       <td><p>Text Color for h1 Header with
 Background. Defaults to <code>background_color</code>. Modifies the
-<code>.remark-slide-content h1</code> class.</p></td>
+<code>.remark-slide-content h1</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-background-text-color)</a></code> in any argument of a style function
+or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_padding</th>
       <td><p>Padding for h1 Header with Background.
-Defaults to <code>NULL</code>. Modifies the <code>.remark-slide-content h1</code> class.</p></td>
+Defaults to <code>NULL</code>. Modifies the <code>.remark-slide-content h1</code> class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_content_padding_top</th>
       <td><p>Top Padding for Content in
 Slide with Header with Background. Defaults to 7rem. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_ignore_classes</th>
       <td><p>Slide Classes Where Header with
 Background will not be Applied. Defaults to
 <code><a href='https://rdrr.io/r/base/c.html'>c('normal', 'inverse', 'title', 'middle', 'bottom')</a></code>. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_slide_number_font_size</th>
       <td><p>Slide Number Text Font Size. Defaults to
-0.9em. Modifies the <code>.remark-slide-number</code> class.</p></td>
+0.9em. Modifies the <code>.remark-slide-number</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_google</th>
       <td><p>Use <code><a href='google_font.html'>google_font()</a></code> to specify body font. Defaults
-to <code>NULL</code>. Modifies the <code>body</code> element.</p></td>
+to <code>NULL</code>. Modifies the <code>body</code> element. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_family</th>
       <td><p>Body Text Font Family (xaringan default is
-<code>'Droid Serif'</code>). Defaults to Noto Sans. Modifies the <code>body</code> element.</p></td>
+<code>'Droid Serif'</code>). Defaults to Noto Sans. Modifies the <code>body</code> element. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-family)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_weight</th>
       <td><p>Body Text Font Weight. Defaults to normal. Modifies
-the <code>body</code> element.</p></td>
+the <code>body</code> element. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_url</th>
       <td><p>Body Text Font URL(s). Defaults to
 https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&amp;display=swap.
-Modifies the <code>@import url()</code> elements.</p></td>
+Modifies the <code>@import url()</code> elements. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_family_fallback</th>
       <td><p>Body Text Font Fallbacks. Defaults to
 -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
 helvetica, Ubuntu, roboto, noto, segoe ui, arial. Modifies the <code>body</code>
-element.</p></td>
+element. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-family-fallback)</a></code> in any argument
+of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_base</th>
       <td><p>Body Text Base Font (Total Failure Fallback). Defaults
-to sans-serif. Modifies the <code>body</code> element.</p></td>
+to sans-serif. Modifies the <code>body</code> element. The value of this variable is
+also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-base)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_google</th>
       <td><p>Use <code><a href='google_font.html'>google_font()</a></code> to specify header font.
-Defaults to <code>NULL</code>. Modifies the <code>body</code> element.</p></td>
+Defaults to <code>NULL</code>. Modifies the <code>body</code> element. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_family</th>
       <td><p>Header Font Family (xaringan default is
 <code>'Yanone Kaffeesatz'</code>). Defaults to Cabin. Modifies the <code>h1, h2, h3</code>
-elements.</p></td>
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-font-family)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_weight</th>
       <td><p>Header Font Weight. Defaults to 600. Modifies the
-<code>h1, h2, h3</code> elements.</p></td>
+<code>h1, h2, h3</code> elements. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_url</th>
       <td><p>Header Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Cabin:600,600i&amp;display=swap.
-Modifies the <code>@import url</code> elements.</p></td>
+Modifies the <code>@import url</code> elements. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_google</th>
       <td><p>Use <code><a href='google_font.html'>google_font()</a></code> to specify code font. Defaults
-to <code>NULL</code>. Modifies the <code>body</code> element.</p></td>
+to <code>NULL</code>. Modifies the <code>body</code> element. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_family</th>
       <td><p>Code Font Family. Defaults to Source Code Pro.
-Modifies the <code>.remark-code, .remark-inline-code</code> classes.</p></td>
+Modifies the <code>.remark-code, .remark-inline-code</code> classes. The value of
+this variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-font-family)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_size</th>
       <td><p>Code Text Font Size. Defaults to 0.9rem. Modifies the
-<code>.remark-inline</code> class.</p></td>
+<code>.remark-inline</code> class. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-font-size)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_url</th>
       <td><p>Code Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&amp;display=swap.
-Modifies the <code>@import url</code> elements.</p></td>
+Modifies the <code>@import url</code> elements. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_family_fallback</th>
       <td><p>Code Font Fallback. Defaults to Menlo,
 Consolas, Monaco, Liberation Mono, Lucida Console. Modifies the
-<code>.remark-code, .remark-inline-code</code> classes.</p></td>
+<code>.remark-code, .remark-inline-code</code> classes. The value of this variable is
+also stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>colors</th>

dev/reference/style_xaringan.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
     <colgroup><col class="name" /><col class="desc" /></colgroup>
     <tr>
       <th>text_color</th>
-      <td><p>Text Color. Defaults to #000. Modifies the <code>body</code> element.</p></td>
+      <td><p>Text Color. Defaults to #000. Modifies the <code>body</code> element.
+The value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text_color)</a></code> in any argument of a style function or
+in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_color</th>
       <td><p>Header Color. Defaults to #000. Modifies the
-<code>h1, h2, h3</code> elements.</p></td>
+<code>h1, h2, h3</code> elements. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-color)</a></code> in any argument
+of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>background_color</th>
       <td><p>Slide Background Color. Defaults to #FFF. Modifies
-the <code>.remark-slide-content</code> class.</p></td>
+the <code>.remark-slide-content</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--background-color)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>link_color</th>
       <td><p>Link Color. Defaults to rgb(249, 38, 114). Modifies the
-<code>a, a &gt; code</code> elements.</p></td>
+<code>a, a &gt; code</code> elements. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--link-color)</a></code> in any argument
+of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_bold_color</th>
       <td><p>Bold Text Color. Defaults to <code>NULL</code>. Modifies the
-<code>strong</code> element.</p></td>
+<code>strong</code> element. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-bold-color)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_slide_number_color</th>
       <td><p>Slide Number Color. Defaults to
-<code>inverse_background_color</code>. Modifies the <code>.remark-slide-number</code> class.</p></td>
+<code>inverse_background_color</code>. Modifies the <code>.remark-slide-number</code> class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>padding</th>
       <td><p>Slide Padding in <code>top right [bottom left]</code> format. Defaults
-to 16px 64px 16px 64px. Modifies the <code>.remark-slide-content</code> class.</p></td>
+to 16px 64px 16px 64px. Modifies the <code>.remark-slide-content</code> class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>background_image</th>
       <td><p>Background image applied to each <em>and every</em> slide.
 Set <code>title_slide_background_image = "none"</code> to remove the background image
 from the title slide. Defaults to <code>NULL</code>. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>background_size</th>
 be set. If <code>background_image</code> is set, <code>background_size</code> will default to
 <code>cover</code> so the backround fills the screen. If both <code>background_image</code> and
 <code>background_position</code> are set, will default to 100 percent. Defaults to
-<code>NULL</code>. Modifies the <code>.remark-slide-content</code> class.</p></td>
+<code>NULL</code>. Modifies the <code>.remark-slide-content</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>background_position</th>
       <td><p>Background image position, requires
 <code>background_image</code> to be set, and it is recommended to adjust
 <code>background_size</code>. Defaults to <code>NULL</code>. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_highlight_color</th>
       <td><p>Code Line Highlight. Defaults to
-rgba(255,255,0,0.5). Modifies the <code>.remark-code-line-highlighted</code> class.</p></td>
+rgba(255,255,0,0.5). Modifies the <code>.remark-code-line-highlighted</code> class.
+The value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-highlight-color)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_inline_color</th>
       <td><p>Inline Code Color. Defaults to #000. Modifies the
-<code>.remark-inline-code</code> class.</p></td>
+<code>.remark-inline-code</code> class. The value of this variable is also stored as
+a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_inline_background_color</th>
       <td><p>Inline Code Background Color. Defaults
-to <code>NULL</code>. Modifies the <code>.remark-inline-code</code> class.</p></td>
+to <code>NULL</code>. Modifies the <code>.remark-inline-code</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_inline_font_size</th>
       <td><p>Inline Code Text Font Size. Defaults to 1em.
-Modifies the <code>.remark-inline-code</code> class.</p></td>
+Modifies the <code>.remark-inline-code</code> class. The value of this variable is
+also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-inline-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_background_color</th>
       <td><p>Inverse Background Color. Defaults to
-#272822. Modifies the <code>.inverse</code> class.</p></td>
+#272822. Modifies the <code>.inverse</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--inverse-background-color)</a></code> in any argument of a style function or
+in custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_text_color</th>
       <td><p>Inverse Text Color. Defaults to #d6d6d6. Modifies
-the <code>.inverse</code> class.</p></td>
+the <code>.inverse</code> class. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--inverse-text-color)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_text_shadow</th>
       <td><p>Enables Shadow on text of inverse slides.
-Defaults to <code>FALSE</code>. Modifies the <code>.inverse</code> class.</p></td>
+Defaults to <code>FALSE</code>. Modifies the <code>.inverse</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>inverse_header_color</th>
       <td><p>Inverse Header Color. Defaults to #f3f3f3.
-Modifies the <code>.inverse h1, .inverse h2, .inverse h3</code> classes.</p></td>
+Modifies the <code>.inverse h1, .inverse h2, .inverse h3</code> classes. The value of
+this variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--inverse-header-color)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_text_color</th>
       <td><p>Title Slide Text Color. Defaults to
-<code>inverse_text_color</code>. Modifies the <code>.title-slide</code> class.</p></td>
+<code>inverse_text_color</code>. Modifies the <code>.title-slide</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--title-slide-text-color)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_color</th>
       <td><p>Title Slide Background Color. Defaults
-to <code>inverse_background_color</code>. Modifies the <code>.title-slide</code> class.</p></td>
+to <code>inverse_background_color</code>. Modifies the <code>.title-slide</code> class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--title-slide-background-color)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_image</th>
       <td><p>Title Slide Background Image URL.
-Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class.</p></td>
+Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_size</th>
       <td><p>Title Slide Background Image Size,
 defaults to "cover" if background image is set. Defaults to <code>NULL</code>.
-Modifies the <code>.title-slide</code> class.</p></td>
+Modifies the <code>.title-slide</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>title_slide_background_position</th>
       <td><p>Title Slide Background Image
-Position. Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class.</p></td>
+Position. Defaults to <code>NULL</code>. Modifies the <code>.title-slide</code> class. The value
+of this variable is also stored as a CSS variable that can be referenced
+with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>footnote_color</th>
       <td><p>Footnote text color (if <code>NA</code>, then it will be the same
 color as <code>text_color</code>). Defaults to <code>NULL</code>. Modifies the <code>.footnote</code>
-class.</p></td>
+class. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>footnote_font_size</th>
       <td><p>Footnote font size. Defaults to 0.9em. Modifies
-the <code>.footnote</code> class.</p></td>
+the <code>.footnote</code> class. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>footnote_position_bottom</th>
       <td><p>Footnote location from bottom of screen.
-Defaults to 60px. Modifies the <code>.footnote</code> class.</p></td>
+Defaults to 60px. Modifies the <code>.footnote</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>left_column_subtle_color</th>
       <td><p>Left Column Text (not last). Defaults to
-#777. Modifies the <code>.left-column h2, .left-column h3</code> classes.</p></td>
+#777. Modifies the <code>.left-column h2, .left-column h3</code> classes. The value
+of this variable is also stored as a CSS variable that can be referenced
+with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>left_column_selected_color</th>
       <td><p>Left Column Current Selection. Defaults to
 #000. Modifies the
-<code>.left-column h2:last-of-type, .left-column h3:last-child</code> classes.</p></td>
+<code>.left-column h2:last-of-type, .left-column h3:last-child</code> classes. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>blockquote_left_border_color</th>
       <td><p>Blockquote Left Border Color. Defaults
-to lightgray. Modifies the <code>blockquote</code> element.</p></td>
+to lightgray. Modifies the <code>blockquote</code> element. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>table_border_color</th>
       <td><p>Table top/bottom border. Defaults to #666.
-Modifies the <code>table: border-top, border-bottom</code> elements.</p></td>
+Modifies the <code>table: border-top, border-bottom</code> elements. The value of
+this variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>table_row_border_color</th>
       <td><p>Table row inner bottom border. Defaults to
-#ddd. Modifies the <code>table thead th: border-bottom</code> elements.</p></td>
+#ddd. Modifies the <code>table thead th: border-bottom</code> elements. The value of
+this variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>table_row_even_background_color</th>
       <td><p>Table Even Row Background Color.
 Defaults to #eee. Modifies the <code>thead, tfoot, tr:nth-child(even)</code>
-elements.</p></td>
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>base_font_size</th>
       <td><p>Base Font Size for All Slide Elements (must be <code>px</code>).
-Defaults to 20px. Modifies the <code>html</code> element.</p></td>
+Defaults to 20px. Modifies the <code>html</code> element. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--base-font-size)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_size</th>
       <td><p>Slide Body Text Font Size. Defaults to 1rem. Modifies
-the <code>.remark-slide-content</code> class.</p></td>
+the <code>.remark-slide-content</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-size)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>header_h1_font_size</th>
       <td><p>h1 Header Text Font Size. Defaults to 2.75rem.
-Modifies the <code>.remark-slide-content h1</code> class.</p></td>
+Modifies the <code>.remark-slide-content h1</code> class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-h1-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_h2_font_size</th>
       <td><p>h2 Header Text Font Size. Defaults to 2.25rem.
-Modifies the <code>.remark-slide-content h2</code> class.</p></td>
+Modifies the <code>.remark-slide-content h2</code> class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-h2-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_h3_font_size</th>
       <td><p>h3 Header Text Font Size. Defaults to 1.75rem.
-Modifies the <code>.remark-slide-content h3</code> class.</p></td>
+Modifies the <code>.remark-slide-content h3</code> class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-h3-font-size)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_auto</th>
       <td><p>Add background under slide title automatically
 for h1 header elements. If not enabled, use <code>class: header_background</code> to
-enable. Defaults to <code>FALSE</code>.</p></td>
+enable. Defaults to <code>FALSE</code>.  The value of this variable is also stored as
+a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_color</th>
       <td><p>Background Color for h1 Header with
 Background. Defaults to <code>header_color</code>. Modifies the
-<code>.remark-slide-content h1</code> class.</p></td>
+<code>.remark-slide-content h1</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-background-color)</a></code> in any argument of a style function or in
+custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_text_color</th>
       <td><p>Text Color for h1 Header with
 Background. Defaults to <code>background_color</code>. Modifies the
-<code>.remark-slide-content h1</code> class.</p></td>
+<code>.remark-slide-content h1</code> class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-background-text-color)</a></code> in any argument of a style function
+or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_padding</th>
       <td><p>Padding for h1 Header with Background.
-Defaults to <code>NULL</code>. Modifies the <code>.remark-slide-content h1</code> class.</p></td>
+Defaults to <code>NULL</code>. Modifies the <code>.remark-slide-content h1</code> class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_content_padding_top</th>
       <td><p>Top Padding for Content in
 Slide with Header with Background. Defaults to 7rem. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_background_ignore_classes</th>
       <td><p>Slide Classes Where Header with
 Background will not be Applied. Defaults to
 <code><a href='https://rdrr.io/r/base/c.html'>c('normal', 'inverse', 'title', 'middle', 'bottom')</a></code>. Modifies the
-<code>.remark-slide-content</code> class.</p></td>
+<code>.remark-slide-content</code> class. The value of this variable is also stored
+as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of
+a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_slide_number_font_size</th>
       <td><p>Slide Number Text Font Size. Defaults to
-0.9em. Modifies the <code>.remark-slide-number</code> class.</p></td>
+0.9em. Modifies the <code>.remark-slide-number</code> class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_google</th>
       <td><p>Use <code><a href='google_font.html'>google_font()</a></code> to specify body font. Defaults
-to <code>NULL</code>. Modifies the <code>body</code> element.</p></td>
+to <code>NULL</code>. Modifies the <code>body</code> element. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_family</th>
       <td><p>Body Text Font Family (xaringan default is
-<code>'Droid Serif'</code>). Defaults to Noto Sans. Modifies the <code>body</code> element.</p></td>
+<code>'Droid Serif'</code>). Defaults to Noto Sans. Modifies the <code>body</code> element. The
+value of this variable is also stored as a CSS variable that can be
+referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-family)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_weight</th>
       <td><p>Body Text Font Weight. Defaults to normal. Modifies
-the <code>body</code> element.</p></td>
+the <code>body</code> element. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_url</th>
       <td><p>Body Text Font URL(s). Defaults to
 https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&amp;display=swap.
-Modifies the <code>@import url()</code> elements.</p></td>
+Modifies the <code>@import url()</code> elements. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_family_fallback</th>
       <td><p>Body Text Font Fallbacks. Defaults to
 -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
 helvetica, Ubuntu, roboto, noto, segoe ui, arial. Modifies the <code>body</code>
-element.</p></td>
+element. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-family-fallback)</a></code> in any argument
+of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>text_font_base</th>
       <td><p>Body Text Base Font (Total Failure Fallback). Defaults
-to sans-serif. Modifies the <code>body</code> element.</p></td>
+to sans-serif. Modifies the <code>body</code> element. The value of this variable is
+also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--text-font-base)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_google</th>
       <td><p>Use <code><a href='google_font.html'>google_font()</a></code> to specify header font.
-Defaults to <code>NULL</code>. Modifies the <code>body</code> element.</p></td>
+Defaults to <code>NULL</code>. Modifies the <code>body</code> element. The value of this
+variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_family</th>
       <td><p>Header Font Family (xaringan default is
 <code>'Yanone Kaffeesatz'</code>). Defaults to Cabin. Modifies the <code>h1, h2, h3</code>
-elements.</p></td>
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--header-font-family)</a></code> in any argument of a
+style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_weight</th>
       <td><p>Header Font Weight. Defaults to 600. Modifies the
-<code>h1, h2, h3</code> elements.</p></td>
+<code>h1, h2, h3</code> elements. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any argument of a style
+function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>header_font_url</th>
       <td><p>Header Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Cabin:600,600i&amp;display=swap.
-Modifies the <code>@import url</code> elements.</p></td>
+Modifies the <code>@import url</code> elements. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_google</th>
       <td><p>Use <code><a href='google_font.html'>google_font()</a></code> to specify code font. Defaults
-to <code>NULL</code>. Modifies the <code>body</code> element.</p></td>
+to <code>NULL</code>. Modifies the <code>body</code> element. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_family</th>
       <td><p>Code Font Family. Defaults to Source Code Pro.
-Modifies the <code>.remark-code, .remark-inline-code</code> classes.</p></td>
+Modifies the <code>.remark-code, .remark-inline-code</code> classes. The value of
+this variable is also stored as a CSS variable that can be referenced with
+<code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-font-family)</a></code> in any argument of a style function or in custom
+CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_size</th>
       <td><p>Code Text Font Size. Defaults to 0.9rem. Modifies the
-<code>.remark-inline</code> class.</p></td>
+<code>.remark-inline</code> class. The value of this variable is also stored as a CSS
+variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(--code-font-size)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_url</th>
       <td><p>Code Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&amp;display=swap.
-Modifies the <code>@import url</code> elements.</p></td>
+Modifies the <code>@import url</code> elements. The value of this variable is also
+stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>code_font_family_fallback</th>
       <td><p>Code Font Fallback. Defaults to Menlo,
 Consolas, Monaco, Liberation Mono, Lucida Console. Modifies the
-<code>.remark-code, .remark-inline-code</code> classes.</p></td>
+<code>.remark-code, .remark-inline-code</code> classes. The value of this variable is
+also stored as a CSS variable that can be referenced with <code><a href='https://rdrr.io/r/stats/cor.html'>var(NA)</a></code> in any
+argument of a style function or in custom CSS.</p></td>
     </tr>
     <tr>
       <th>colors</th>

dev/reference/theme_xaringan.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/theme_xaringan_base.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/theme_xaringan_get_value.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/theme_xaringan_inverse.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/theme_xaringan_set_defaults.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/xaringanthemer-deprecated.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">

dev/reference/xaringanthemer-package.html

 </li>
 <li>
   <a href="../articles/template-variables.html">Template Variables</a>
-</li>
-<li>
-  <a href="../articles/css-help.html">CSS Help</a>
 </li>
       </ul>
       <ul class="nav navbar-nav navbar-right">