/* Variables */
:root {
    --spacing: 1em;

    --gray-white-tint: hsl(0, 0%, 95%);
    --lightest: #eee;
    --light: #ccc;
    --mid: #999;
    --dark: #666;
    --darkest: #333;

    --primary: var(--darkest);

    --tiny: calc(var(--spacing) * 0.1);
    --smallest: calc(var(--spacing) * 0.25);
    --smaller: calc(var(--spacing) * 0.5);
    --smallish: calc(var(--spacing) * 0.75);
    --small: var(--spacing);
    --medium: calc(var(--spacing) * 2);
  
    --border-radius: 4px;
  
    --primary-white-tint: hsl(145, 25%, 95%); /* #eff5f2 */
    --primary-lightest: hsl(145, 25%, 91%); /* #e2eee7 */
    --primary-lighter: hsl(145, 25%, 88%); /* #e2eee7 */
    --primary-light: hsl(145, 25%, 81%); /* #c2dbcd */
    --primary-mid: hsl(145, 25%, 71%); /* #a3c8b2 */
    --primary-mid-dark: hsl(145, 25%, 51%); /* #63a17d */
    --primary-dark: hsl(144, 25%, 31%); /* #3b634b */
    --primary-darkest: hsl(144, 25%, 25%); /* #30503d */
    --primary-darker-than-darkest: hsl(143, 25%, 20%); /* #264030 */
    --primary-black-tint: hsl(142, 25%, 15%); /* #1d3024 */

    --negative-white-tint: hsl(342, 25%, 95%);
    --negative-lightest: hsl(342, 25%, 91%);
    --negative-lighter: hsl(342, 25%, 88%);
    --negative-light: hsl(342, 25%, 81%);
    --negative-mid: hsl(342, 25%, 71%);
    --negative-dark: hsl(342, 25%, 31%);
    --negative-darkest: hsl(342, 25%, 25%);
    --negative-darker-than-darkest: hsl(342, 25%, 20%);
    --negative-black-tint: hsl(342, 25%, 15%);
  
    --filter-primary-white-tint: invert(99%) sepia(3%) saturate(379%) hue-rotate(69deg)
      brightness(99%) contrast(94%);
    --filter-primary-lightest: invert(99%) sepia(60%) saturate(115%) hue-rotate(66deg) brightness(97%)
      contrast(92%);
    --filter-primary-light: invert(95%) sepia(7%) saturate(471%) hue-rotate(91deg) brightness(89%)
      contrast(94%);
    --filter-primary-mid: invert(78%) sepia(18%) saturate(325%) hue-rotate(92deg) brightness(97%)
      contrast(87%);
    --filter-primary-dark: invert(32%) sepia(16%) saturate(894%) hue-rotate(91deg) brightness(102%)
      contrast(92%);
    --filter-primary-darkest: invert(27%) sepia(23%) saturate(690%) hue-rotate(92deg) brightness(90%)
      contrast(88%);
    --filter-primary-darker-than-darkest: invert(20%) sepia(18%) saturate(858%) hue-rotate(90deg)
      brightness(96%) contrast(92%);
    --filter-primary-black-tint: invert(14%) sepia(11%) saturate(1588%) hue-rotate(89deg)
      brightness(94%) contrast(90%);
  
    --secondary-white-tint: hsl(246, 38%, 95%); /* #eeedf7 */
    --secondary-lightest: hsl(247, 39%, 91%); /* #e1dff1 */
    --secondary-light: hsl(247, 39%, 81%); /* #c0bce1 */
    --secondary-mid: hsl(247, 39%, 71%); /* #9f98d2 */
    --secondary-mid-dark: hsl(247, 25%, 51%); /* #6a63a1 */
    --secondary-dark: hsl(247, 39%, 31%); /* #37306e */
    --secondary-darkest: hsl(247, 39%, 25%); /* #2d2759 */
    --secondary-darker-than-darkest: hsl(247, 39%, 20%);
    --secondary-black-tint: hsl(247, 25%, 15%);
  
    --filter-secondary-mid: invert(71%) sepia(16%) saturate(857%) hue-rotate(207deg) brightness(86%)
      contrast(90%);
    --filter-secondary-darkest: invert(15%) sepia(54%) saturate(775%) hue-rotate(208deg)
      brightness(94%) contrast(97%);
    --filter-secondary-darker-than-darkest: invert(11%) sepia(44%) saturate(1355%) hue-rotate(216deg) brightness(96%) contrast(96%);
  
    --accent-white-tint: hsl(35, 68%, 95%); /* #fbf4ea */
    --accent-lightest: hsl(36, 70%, 91%); /* #f8ebd8; */
    --accent-lighter: hsl(35, 67%, 88%); /* #f5e4cc */
    --accent-light: hsl(35, 67%, 81%); /* #efd4ae */
    --accent-mid: hsl(35, 68%, 71%); /* #e7bd83 */
    --accent-mid-dark: hsl(35, 25%, 51%);
    --accent-dark: hsl(35, 68%, 31%); /* #855819 */
    --accent-darkest: hsl(35, 69%, 25%); /* #6b4714 */
    --accent-darker-than-darkest: hsl(35, 69%, 20%); /* #563910 */
    --accent-black-tint: hsl(35, 69%, 15%); /* #412b0c */
  
    --filter-accent-mid: invert(72%) sepia(35%) saturate(447%) hue-rotate(352deg) brightness(107%)
      contrast(81%);
    --filter-accent-dark: invert(34%) sepia(24%) saturate(1307%) hue-rotate(355deg) brightness(100%)
      contrast(94%);
    --filter-accent-darkest: invert(25%) sepia(73%) saturate(461%) hue-rotate(356deg) brightness(98%)
      contrast(96%);
    --filter-accent-darker-than-darkest: invert(22%) sepia(52%) saturate(612%) hue-rotate(356deg) brightness(94%) contrast(98%);
  
    --neutral-white-tint: hsl(0, 0%, 95%);
    --neutral-lightest: hsl(0, 0%, 93%); /* #ededed */
    --neutral-light: hsl(0, 0%, 80%); /* #cccccc */
    --neutral-mid: hsl(0, 0%, 60%); /* #999999 */
    --neutral-dark: hsl(0, 0%, 40%); /* #666666 */
    --neutral-darkest: hsl(0, 0%, 20%); /* #333333 */
  
    --filter-neutral-lightest: invert(100%) sepia(1%) saturate(119%) hue-rotate(186deg)
      brightness(117%) contrast(86%);
    --filter-neutral-light: invert(100%) sepia(1%) saturate(119%) hue-rotate(186deg) brightness(117%)
      contrast(86%);
    --filter-neutral-mid: invert(60%) sepia(0%) saturate(0%) hue-rotate(148deg) brightness(102%)
      contrast(88%);
    --filter-neutral-dark: invert(40%) sepia(0%) saturate(0%) hue-rotate(285deg) brightness(97%)
      contrast(89%);
    --filter-neutral-darkest: invert(13%) sepia(10%) saturate(0%) hue-rotate(160deg) brightness(104%)
      contrast(83%);
}

/* Pagefind UI */
.pagefind-ui {
    --pagefind-ui-font: 'Lato', sans-serif;
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border: var(--neutral-light);
    --pagefind-ui-border-radius: var(--smallest);
}

/* Generic */
*, html, body {
    color: var(--darkest);
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
header {
    padding: 1em;
    padding-bottom: 0px;
}
header h1 {
    font-size: 1rem;
}
#mobile-menu-toggle,
#mobile-menu-toggle ~ nav:first-of-type,
#mobile-menu-toggle-tailored,
#mobile-menu-toggle-tailored + ul,
#mobile-menu-toggle-webinars,
#mobile-menu-toggle-webinars + ul,
#submenu-toggle-tailored,
#submenu-toggle-tailored + ul,
#submenu-toggle-webinars,
#submenu-toggle-webinars + ul {
    display: none;
}
#mobile-menu-toggle:checked ~ nav:first-of-type,
#mobile-menu-toggle-tailored:checked + ul,
#mobile-menu-toggle-webinars:checked + ul,
#submenu-toggle-tailored:checked + ul,
#submenu-toggle-webinars:checked + ul  {
    display: inherit;
}
#submenu-toggle-webinars:checked + ul,
#submenu-toggle-tailored:checked + ul {
    position: absolute;
    background: var(--primary-white-tint);
    border-bottom: 1px solid var(--primary-mid);
    border-right: 1px solid var(--primary-mid);
    padding: var(--small);
    margin-top: var(--small);
    border-radius: var(--smaller);
    z-index: 1;
}
#mobile-menu-toggle ~ label#label-mobile-menu-toggle-opened,
#mobile-menu-toggle:checked ~ label#label-mobile-menu-toggle-closed {
    display: none;
}
#mobile-menu-toggle ~ label#label-mobile-menu-toggle-closed,
#mobile-menu-toggle:checked ~ label#label-mobile-menu-toggle-opened {
    display: inherit;
}
.hidden-checkbox, .toggled-content {
    display: none;
}
.hidden-checkbox:checked ~ .toggled-content {
    display: inherit;
}
header label svg {
    aspect-ratio: 1 / 1;
}
header label:hover svg {
    background-color: var(--primary-lighter);
    border-radius: 25%;
}
main, footer {
    padding: 1em;
}
footer {
    text-align: center;
    background-color: var(--primary-white-tint);
}
footer * {
    color: var(--primary-darkest);
}
footer, .fs-s, .fs-s a {
    font-size: 0.75rem;
}
.fs-1-25 {
    font-size: 1.25rem
}
.fs-m {
    font-size: 1.5rem !important;
}
.fs-l {
    font-size: 2rem
}
.fs-xl {
    font-size: 3rem
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
}
h3,
h3 > a {
    font-size: 1.17rem;
}
h4 {
    font-size: 1.10rem;
}
.article-header h2,
.article-header h3 {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
section.content h1,
section.content h2,
section.content h3,
section.content h4,
section.content h5,
section.content h6 {
    text-align: left;
}

section.content.ff-serif h1,
section.content.ff-serif h2,
section.content.ff-serif h3 {
    font-family: 'Playfair Display';
}
section.content.ff-serif h1 {
    font-size: 3rem
}
section.content.ff-serif h2 {
    font-size: 2rem
}
section.content.ff-serif h3 {
    font-size: 1.5rem !important;
}
section.content.fc-primary h1,
section.content.fc-primary h2,
section.content.fc-primary h3,
section.content.fc-primary h4,
section.content.fc-primary h5,
section.content.fc-primary h6 {
    color: var(--primary-dark);
}
section.content.fc-secondary h1,
section.content.fc-secondary h2,
section.content.fc-secondary h3,
section.content.fc-secondary h4,
section.content.fc-secondary h5,
section.content.fc-secondary h6 {
    color: var(--secondary-dark);
}
section.content.fc-accent h1,
section.content.fc-accent h2,
section.content.fc-accent h3,
section.content.fc-accent h4,
section.content.fc-accent h5,
section.content.fc-accent h6 {
    color: var(--accent-dark);
}

section.content img {
    max-width: 100%;
}
section.content.single table {
    border-collapse: collapse;
    text-align: left;
    margin-top: var(--smaller);
    margin-bottom: var(--smaller);
}
section.content.single table td,
section.content.single table th {
    border: 1px solid var(--neutral-light);
    padding: var(--smaller);
}
section.content.single table tr:nth-of-type(even),
section.content.single table th {
    background-color: var(--neutral-white-tint);
}
section.content.single ol,
section.content.single ul {
    padding-bottom: var(--small);
}
section.content.single ol ol,
section.content.single ol ul,
section.content.single ul ol,
section.content.single ul ul {
    padding-bottom: 0px;
}
section.content.single ol li,
section.content.single ul li {
    padding: var(--smaller);
}
section.content.single ol li a,
section.content.single ul li a {
    border-bottom: 1px solid var(--neutral-mid);
    text-decoration: none;
}
section.content.single ol li a:hover,
section.content.single ul li a:hover {
    background-color: var(--gray-white-tint);
}
.avatar {
    height: 3em;
    width: 3em;
}
.icon > svg {
    aspect-ratio: 1 / 1;
}
.icon,
.icon.small {
    height: 1.15rem;
    width: 1.15rem;
    top: 0.15rem;
    position: relative;
}
.icon.tiny {
    height: calc(0.75 * 1.15rem);
    width: calc(0.75 * 1.15rem);
    top: calc(0.75 * 0.15rem);
}
.icon.logo {
    height: 1.5em;
    width: 1.5em;
}
.icon.medium {
    height: calc(1.5 * 1.15rem);
    width: calc(1.5 * 1.15rem);
    top: calc(1.5 * 0.15rem);
}
.icon.large {
    height: calc(2 * 1.15rem);
    width: calc(2 * 1.15rem);
    top: calc(2 * 0.15rem);
}
.icon.gigantic {
    height: 7rem;
    width: 7rem;
}
.icon svg {
    height: inherit;
    width: fit-content;
}
h1, h2, h3, h4, h5, h6 {
    margin: 1em 0 0.5em; 
    text-align: center;
}
p {
    line-height: 150%;
    margin: 0.5em 0 1em;
    text-align: justify;
}
.content li p {
    margin: 0 0 0 0;
}
hr {
    border: none;
    border-top: 1px dashed var(--primary-mid);
    height: 0px;
}
.lh-150 {
    line-height: 150%;
}
.lh-200 {
    line-height: 200%;
}
section.content p > a,
section.content span > a,
section.content .a-la-a,
#sib-container a {
    background-color: var(--gray-white-tint) !important;
    border-bottom: 1px solid var(--neutral-mid);
    color: var(--darkest) !important;
    cursor: pointer;
    padding-left: calc(0.25 * var(--spacing));
    padding-right: calc(0.25 * var(--spacing));
    text-decoration: none !important;
}
section.content p > a:hover,
section.content span > a:hover,
section.content .a-la-a:hover,
#sib-container a:hover {
    background-color: var(--lightest) !important;
}
section.content p > a.on-dark-bgr {
    background: none !important;
    color: white !important;
    padding: 0 0 0 0;
}
section.content p > a.on-dark-bgr:hover {
    background: none !important;
    border-bottom: 1px solid white;
}
a {
    text-decoration: none;
}
td a {
    text-decoration: underline;
}
button.external::after,
a.external::after {
    color: var(--neutral-mid);
    content: " ↗";
    font-weight: 100;
}
footer a, .td-u {
    text-decoration: underline;
}
footer a:hover {
    color: var(--primary-dark);
}
code {
    background-color: var(--lightest);
    border-left: var(--spacing) solid var(--light);
    display: block;
    font-family: 'Courier Prime', monospace;
    margin-bottom: var(--spacing);
    padding: var(--spacing);
    white-space: pre-line;
}
p > code, li > code {
    display: inline;
    padding: calc(var(--spacing) * 0.25);
    border-left: none;
}

/* Lists */
ul, ol {
    list-style-position: inside;
    list-style: auto;
    margin-left: 1em;
}
ol li::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    font-weight: bold;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}
ul {
    list-style: disc;
}
ul[class*=ul-styled] {
    list-style-position: inside;
    list-style: disc;
    margin-left: 1em;
}
ul[class*=ul-styled] li {
    line-height:150% ;
}
ul.ul-styled li::marker,
ul.ul-styled-primary li::marker {
    color: var(--primary-light);
}
ul.ul-styled-secondary li::marker {
    color: var(--secondary-light);
}
ul.ul-styled-accent li::marker {
    color: var(--accent-light);
}
.ls-d {
    list-style: none;
    list-style-position: outside;
}
.ls-d > li {
    padding: 0 0 var(--smaller) 0;
}
.ls-d > li::before {
    content: "\0000B7";
    padding-right: var(--smaller);
}
.ls-n {
    list-style: none;
    margin-left: 0px;
}
.ls-i-m-2 > li {
    margin: calc(var(--spacing) * 0.25);
}
.ls-i-m-4 > li {
    margin: calc(var(--spacing) * 0.5);
}
.ls-i-m-8 > li {
    margin: var(--spacing);
}
.ls-i-mx-2 > li {
    margin-left: calc(var(--spacing) * 0.25);
    margin-right: calc(var(--spacing) * 0.25);
}
.ls-i-mx-4 > li {
    margin-left: calc(var(--spacing) * 0.5);
    margin-right: calc(var(--spacing) * 0.5);
}
.ls-i-mx-8 > li {
    margin-left: var(--spacing);
    margin-right: var(--spacing);
}
.ls-i-mx-2 > :first-child,
.ls-i-mx-4 > :first-child,
.ls-i-mx-8 > :first-child {
    margin-left: 0px;
}
.ls-i-mx-2 > :last-child,
.ls-i-mx-4 > :last-child,
.ls-i-mx-8 > :last-child {
    margin-right: 0px;
}
nav a {
    border-bottom: 1px solid transparent;
}
nav .selected,
nav a:hover,
.subnav a:hover,
.subnav .selected {
    background-color: var(--primary-white-tint);
    border-bottom: 1px solid var(--primary-mid);
    text-decoration: none;
}
#TableOfContents ul {
    list-style: none;
    margin-left: 0px;
    margin-bottom: 0px;
    padding-left: 0px;
}
#TableOfContents ul li {
    padding-left: 0px;
}
#TableOfContents ul > li > ul {
    margin-bottom: 0px;
    padding-left: var(--medium);
    padding-bottom: 0px;
}
#TableOfContents a {
    border-bottom: 1px solid var(--neutral-light);
    text-decoration: none;
}

/* Cursor */
.c-d {
    cursor: default !important;  
}
.c-p {
    cursor: pointer;  
}
.c-na {
    cursor: not-allowed !important;
}

/* Display */
.clear-b {
    clear: both;
}
.display-b {
    display: block;
}
.display-i {
    display: inline;
}
.display-ib {
    display: inline-block;
}
.display-if {
    display: inline-flex;
}
.display-f {
    display: flex;
}
.display-g {
    display: grid;
}
.display-ig {
    display: inline-grid;
}
.display-n {
    display: none;
}
.fd-c {
    flex-direction: column;
}
.fd-r {
    flex-direction: row;
}
.fw-w {
    flex-wrap: wrap;
}
.ow-bw {
    overflow-wrap: break-word;
}
.ac-c {
    align-content: center;
}
.ac-e {
    align-content: end;
}
.ai-b {
    align-items: baseline;
}
.ai-c {
    align-items: center;
}
.ai-s {
    align-items: start;
}
.ai-e {
    align-items: end;
}
.as-c {
    align-self: center;
}
.as-e {
    align-self: end;
}
.gtc-1 {
    grid-template-columns: repeat(1, 1fr);
}
.gtc-2 {
    grid-template-columns: repeat(2, 1fr);
}
.gtc-2-auto-fc {
    grid-template-columns: auto fit-content(100%);
}
.gtc-2-fc-auto {
    grid-template-columns: fit-content(100%) auto;
}
.gtc-2-a {
    grid-template-columns: repeat(2, auto);
}
.gtc-2-1-2 {
    grid-template-columns: 1fr 2fr;
}
.gtc-2-2-1 {
    grid-template-columns: 2fr 1fr;
}
.gtc-2-2-3 {
    grid-template-columns: 2fr 3fr;
}
.gtc-2-3-4 {
    grid-template-columns: 3fr 4fr;
}
.gtc-2-3-1 {
    grid-template-columns: 3fr 1fr;
}
.gtc-2-3-2 {
    grid-template-columns: 3fr 2fr;
}
.gtc-2-4-3 {
    grid-template-columns: 4fr 3fr;
}
.gtc-2-4-1 {
    grid-template-columns: 4fr 1fr;
}
.gtc-3 {
    grid-template-columns: repeat(3, 1fr);
}
.gtc-3-fc-fc-auto {
    grid-template-columns: repeat(2, fit-content(100%)) auto;
}
.gtc-3-auto-fc-auto {
    grid-template-columns: auto fit-content(100%) auto;
}
.gtc-3-1-auto-1 {
    grid-template-columns: 1fr auto 1fr;
}
.gtc-3-auto-fc-fc {
    grid-template-columns: auto repeat(2, fit-content(100%));
}
.gtc-3-2-1-1 {
    grid-template-columns: 2fr 1fr 1fr;
}
.gtc-4 {
    grid-template-columns: repeat(4, 1fr);
}
.gtc-4-auto {
    grid-template-columns: repeat(4, auto);
}
.gtc-4-auto-fc-fc-auto {
    grid-template-columns: auto fit-content(100%) fit-content(100%) auto;
}
.gtc-5 {
    grid-template-columns: repeat(5, 1fr);
}
.gtc-5-2-1-1-1-1 {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}
.gtc-6 {
    grid-template-columns: repeat(6, 1fr);
}
.gtc-7 {
    grid-template-columns: repeat(7, 1fr);
}
.gtc-7-fc-auto-fc-auto-fc-auto-fc {
    grid-template-columns: repeat(3, fit-content(100%) 1fr) fit-content(100%);
}
.gtc-5-a {
    grid-template-columns: repeat(5, auto);
}
.gtr-2 {
    grid-template-rows: 1fr 1fr;
}
.gtr-2-1-2 {
    grid-template-rows: 1fr 2fr;
}
.gtr-2-1-fc {
    grid-template-rows: 1fr fit-content(100%);
}
.gtr-2-2-1 {
    grid-template-rows: 2fr 1fr;
}
.gtr-2-3-1 {
    grid-template-rows: 3fr 1fr;
}
.gtr-2-a {
    grid-template-rows: auto auto;
}
.gtr-2-auto-fc {
    grid-template-rows: auto fit-content(100%);
}
.gtr-3-1-3-2 {
    grid-template-rows: 1fr 3fr 2fr;
}
.gtr-5-fc-fc-fc-auto-fc {
    grid-template-rows: fit-content(100%) fit-content(100%) fit-content(100%) auto fit-content(100%);
}
.gc-1 {
    grid-column: 1;
}
.gc-1-3 {
    grid-column: 1 / 3;
}
.gc-2 {
    grid-column: 2;
}
.gc-2-end {
    grid-column: 2 / -1;
}
.gc-3 {
    grid-column: 3;
}
.gc-3-5 {
    grid-column: 3 / 5;
}
.gc-3-end {
    grid-column: 3 / -1;
}
.gc-4 {
    grid-column: 4;
}
.gc-5 {
    grid-column: 5;
}
.gc-5-7 {
    grid-column: 5 / 7;
}
.gc-7-end {
    grid-column: 7 / -1;
}
.gc-all {
    grid-column: 1 / -1;
}
.gr-1 {
    grid-row: 1;
}
.gr-2 {
    grid-row: 2;
}
.gr-3 {
    grid-row: 3;
}
.gr-4 {
    grid-row: 4;
}
.gr-5 {
    grid-row: 5;
}
.gr-6 {
    grid-row: 6;
}
.gr-7 {
    grid-row: 7;
}
.gr-8 {
    grid-row: 8;
}
.gr-all {
    grid-row: 1 / -1;
}
.gcg-0 {
    column-gap: 0;
}
.gcg-2 {
    column-gap: calc(var(--spacing) * 0.25);
}
.gcg-4 {
    column-gap: calc(var(--spacing) * 0.5);
}
.gcg-8 {
    column-gap: var(--spacing);
}
.gcg-16 {
    column-gap: calc(var(--spacing) /  0.5);
}
.gcg-32 {
    column-gap: calc(var(--spacing) /  0.25);
}
.grg-2 {
    row-gap: calc(var(--spacing) * 0.25);
}
.grg-4 {
    row-gap: calc(var(--spacing) * 0.5);
}
.grg-8 {
    row-gap: var(--spacing);
}
.grg-16 {
    row-gap: calc(var(--spacing) /  0.5);
}
.grg-32 {
    row-gap: calc(var(--spacing) /  0.25);
}
.jc-c {
    justify-content: center;
}
.jc-l {
    justify-content: left;
}
.jc-r {
    justify-content: right;
}
.jc-sb {
    justify-content: space-between;
}
.ji-c {
    justify-items: center;
}
.ji-e {
    justify-items: end;
}
.js-c {
    justify-self: center;
}
.js-e {
    justify-self: end;
}
.ta-c {
    text-align: center !important;
}
.ta-j {
    text-align: justify !important;
}
.ta-l {
    text-align: left !important;
}
.ta-r {
    text-align: right !important;
}
.td-n {
    text-decoration: none;
}
.tt-c {
    text-transform: capitalize;
}
.tt-u {
    text-transform: uppercase;
}
.fc-accent {
    color: var(--accent-dark);
}
.fc-negative {
    color: var(--negative-dark);
}
.fc-primary {
    color: var(--primary-dark);
}
.fc-primary-light {
    color: var(--primary-light);
}
.fc-primary-white-tint {
    color: var(--primary-white-tint);
}
.fc-white {
    color: white;
}
.fc-secondary {
    color: var(--secondary-dark);
}

.author-box p {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

/* Spacing */
.m-auto {
    margin: auto;
}
.m-0 {
    margin: 0;
}
.m-2 {
    margin: calc(var(--spacing) * 0.25);
}
.m-4 {
    margin: calc(var(--spacing) * 0.5);
}
.m-8 {
    margin: var(--spacing);
}
.m-16 {
    margin: calc(var(--spacing) /  0.5);
}
.m-32 {
    margin: calc(var(--spacing) /  0.25);
}

.ml-2 {
    margin-left: calc(var(--spacing) * 0.25);
}
.ml-4 {
    margin-left: calc(var(--spacing) * 0.5);
}
.ml-8 {
    margin-left: var(--spacing);
}
.ml-16 {
    margin-left: calc(var(--spacing) /  0.5);
}
.ml-32 {
    margin-left: calc(var(--spacing) /  0.25);
}

.mr-2 {
    margin-right: calc(var(--spacing) * 0.25);
}
.mr-4 {
    margin-right: calc(var(--spacing) * 0.5);
}
.mr-8 {
    margin-right: var(--spacing);
}
.mr-16 {
    margin-right: calc(var(--spacing) /  0.5);
}
.mr-32 {
    margin-right: calc(var(--spacing) /  0.25);
}

.mt-0 {
    margin-top: 0;
}
.mt-2 {
    margin-top: calc(var(--spacing) * 0.25);
}
.mt-4 {
    margin-top: calc(var(--spacing) * 0.5);
}
.mt-8 {
    margin-top: var(--spacing);
}
.mt-16 {
    margin-top: calc(var(--spacing) /  0.5);
}
.mt-32 {
    margin-top: calc(var(--spacing) /  0.25);
}

.mb-0 {
    margin-bottom: 0;
}
.mb-2 {
    margin-bottom: calc(var(--spacing) * 0.25);
}
.mb-4 {
    margin-bottom: calc(var(--spacing) * 0.5);
}
.mb-8 {
    margin-bottom: var(--spacing);
}
.mb-16 {
    margin-bottom: calc(var(--spacing) /  0.5);
}
.mb-32 {
    margin-bottom: calc(var(--spacing) /  0.25);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.mx-2 {
    margin-left: calc(var(--spacing) * 0.25);
    margin-right: calc(var(--spacing) * 0.25);
}
.mx-4 {
    margin-left: calc(var(--spacing) * 0.5);
    margin-right: calc(var(--spacing) * 0.5);
}
.mx-8 {
    margin-left: var(--spacing);
    margin-right: var(--spacing);
}
.mx-16 {
    margin-left: calc(var(--spacing) /  0.5);
    margin-right: calc(var(--spacing) / 0.5);
}
.mx-32 {
    margin-left: calc(var(--spacing) /  0.25);
    margin-right: calc(var(--spacing) / 0.25);
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.my-2 {
    margin-top: calc(var(--spacing) * 0.25);
    margin-bottom: calc(var(--spacing) * 0.25);
}
.my-4 {
    margin-top: calc(var(--spacing) * 0.5);
    margin-bottom: calc(var(--spacing) * 0.5);
}
.my-8 {
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
}
.my-16 {
    margin-top: calc(var(--spacing) /  0.5);
    margin-bottom: calc(var(--spacing) / 0.5);
}
.my-32 {
    margin-top: calc(var(--spacing) /  0.25);
    margin-bottom: calc(var(--spacing) / 0.25);
}

.p-0 {
    padding: 0;
}
.p-2 {
    padding: calc(var(--spacing) * 0.25);
}
.p-4 {
    padding: calc(var(--spacing) * 0.5);
}
.p-8 {
    padding: var(--spacing);
}
.p-16 {
    padding: calc(var(--spacing) /  0.5);
}
.p-32 {
    padding: calc(var(--spacing) /  0.25);
}

.pt-0 {
    padding-top: 0;
}
.pt-2 {
    padding-top: calc(var(--spacing) * 0.25);
}
.pt-4 {
    padding-top: calc(var(--spacing) * 0.5);
}
.pt-8 {
    padding-top: var(--spacing);
}
.pt-16 {
    padding-top: calc(var(--spacing) /  0.5);
}
.pt-32 {
    padding-top: calc(var(--spacing) /  0.25);
}

.pl-2 {
    padding-left: calc(var(--spacing) * 0.25);
}
.pl-4 {
    padding-left: calc(var(--spacing) * 0.5);
}
.pl-8 {
    padding-left: var(--spacing);
}
.pl-16 {
    padding-left: calc(var(--spacing) /  0.5);
}
.pl-32 {
    padding-left: calc(var(--spacing) /  0.25);
}

.pr-2 {
    padding-right: calc(var(--spacing) * 0.25);
}
.pr-4 {
    padding-right: calc(var(--spacing) * 0.5);
}
.pr-8 {
    padding-right: var(--spacing);
}
.pr-16 {
    padding-right: calc(var(--spacing) /  0.5);
}
.pr-32 {
    padding-right: calc(var(--spacing) /  0.25);
}
.rg-2 {
    row-gap: calc(var(--spacing) * 0.25);
}
.pb-0 {
    padding-bottom: 0;
}
.pb-2 {
    padding-bottom: calc(var(--spacing) * 0.25);
}
.pb-4 {
    padding-bottom: calc(var(--spacing) * 0.5);
}
.pb-8 {
    padding-bottom: var(--spacing);
}
.pb-16 {
    padding-bottom: calc(var(--spacing) /  0.5);
}
.pb-32 {
    padding-bottom: calc(var(--spacing) /  0.25);
}

.px-2 {
    padding-left: calc(var(--spacing) * 0.25);
    padding-right: calc(var(--spacing) * 0.25);
}
.px-4 {
    padding-left: calc(var(--spacing) * 0.5);
    padding-right: calc(var(--spacing) * 0.5);
}
.px-8 {
    padding-left: var(--spacing);
    padding-right: var(--spacing);
}
.px-16 {
    padding-left: calc(var(--spacing) /  0.5);
    padding-right: calc(var(--spacing) /  0.5);
}
.px-32 {
    padding-left: calc(var(--spacing) /  0.25);
    padding-right: calc(var(--spacing) /  0.25);
}

.py-2 {
    padding-top: calc(var(--spacing) * 0.25);
    padding-bottom: calc(var(--spacing) * 0.25);
}
.py-4 {
    padding-top: calc(var(--spacing) * 0.5);
    padding-bottom: calc(var(--spacing) * 0.5);
}
.py-8 {
    padding-top: var(--spacing);
    padding-bottom: var(--spacing);
}
.py-16 {
    padding-top: calc(var(--spacing) /  0.5);
    padding-bottom: calc(var(--spacing) /  0.5);
}
.py-32 {
    padding-top: calc(var(--spacing) /  0.25);
    padding-bottom: calc(var(--spacing) /  0.25);
}

/* Colors */
.c-lightest {
    color: var(--lightest);
}
.c-light {
    color: var(--light);
}
.c-mid {
    color: var(--mid);
}
.c-dark {
    color: var(--dark);
}
.c-darkest {
    color: var(--darkest);
}

/* Backgrounds */
.bc-primary {
    background-color: var(--primary-white-tint);
}
.bc-secondary {
    background-color: var(--secondary-white-tint);
}
.bc-accent {
    background-color: var(--accent-white-tint);
}
.bc-lightest {
    background-color: var(--lightest);
}
.bc-light {
    background-color: var(--light);
}
.bc-mid {
    background-color: var(--mid);
}
.bc-dark {
    background-color: var(--dark);
}
.bc-darkest {
    background-color: var(--darkest);
}
.bp-cc {
    background-position: center center;
}
.bp-lc {
    background-position: left center;
}
.bp-rc {
    background-position: right center;
}
.bp-cb {
    background-position: center bottom;
}
.bp-rt {
    background-position: right top;
}
.br-n {
    background-repeat: no-repeat;
}
.bs-c {
    background-size: cover;
}
.bs-50 {
    background-size: 50%;
}

/* Sizing */
.ar-1-1 {
    aspect-ratio : 1 / 1;
}
.ar-3-4 {
    aspect-ratio : 3 / 4;
}
.ar-2-1 {
    aspect-ratio : 2 / 1;
}
.ar-3-1 {
    aspect-ratio : 3 / 1;
}
.ar-2-3 {
    aspect-ratio : 2 / 3;
}
.ar-1-2 {
    aspect-ratio : 1 / 2;
}
.ar-3-2 {
    aspect-ratio : 3 / 2;
}
.ar-4-3 {
    aspect-ratio : 4 / 3;
}
.ar-16-9 {
    aspect-ratio: 16 / 9;
}
.ar-i {
    aspect-ratio: inherit;
}
.h-100 {
    height: 100%;
}
.h-100vh {
    height: 100vh;
}
.h-50 {
    height: 50%;
}
.h-fc {
    height: fit-content;
}
.w-fc {
    width: fit-content;
}
.w-50 {
    width: 50%;
}
.w-80 {
    width: 80%;
}
.w-100 {
    width: 100%;
}
.w-fc {
    width: fit-content;
}

/* Border Mods */
.b-n {
    border: 0;
}
.b-2 {
    border-radius: calc(var(--spacing) * 0.25);
}
.b-4 {
    border-radius: calc(var(--spacing) * 0.5);
}
.b-8 {
    border-radius: var(--spacing);
}
.b-16 {
    border-radius: calc(var(--spacing) /  0.5);
}
.b-32 {
    border-radius: calc(var(--spacing) /  0.25);
}

.br-50 {
    border-radius: 50%;
}

.br-2 {
    border-radius: calc(var(--spacing) * 0.25);
}
.br-4 {
    border-radius: calc(var(--spacing) * 0.5);
}
.br-8 {
    border-radius: var(--spacing);
}
.br-16 {
    border-radius: calc(var(--spacing) /  0.5);
}
.br-32 {
    border-radius: calc(var(--spacing) /  0.25);
}

.brl-4 {
    border-top-left-radius: calc(var(--spacing) * 0.5);
    border-bottom-left-radius: calc(var(--spacing) * 0.5);
}
.brr-4 {
    border-top-right-radius: calc(var(--spacing) * 0.5);
    border-bottom-right-radius: calc(var(--spacing) * 0.5);
}

.brt-2 {
    border-top-left-radius: calc(var(--spacing) * 0.25);
    border-top-right-radius: calc(var(--spacing) * 0.25);
}
.brt-4 {
    border-top-left-radius: calc(var(--spacing) * 0.5);
    border-top-right-radius: calc(var(--spacing) * 0.5);
}
.brt-8 {
    border-top-left-radius: var(--spacing);
    border-top-right-radius: var(--spacing);
}
.brt-16 {
    border-top-left-radius: calc(var(--spacing) /  0.5);
    border-top-right-radius: calc(var(--spacing) /  0.5);
}
.brt-32 {
    border-top-left-radius: calc(var(--spacing) /  0.25);
    border-top-right-radius: calc(var(--spacing) /  0.25);
}

.brtl-2 {
    border-top-left-radius: calc(var(--spacing) * 0.25);
}
.brtl-4 {
    border-top-left-radius: calc(var(--spacing) * 0.5);
}
.brtl-8 {
    border-top-left-radius: var(--spacing);
}
.brtl-16 {
    border-top-left-radius: calc(var(--spacing) /  0.5);
}
.brtl-32 {
    border-top-left-radius: calc(var(--spacing) /  0.25);
}

.brtr-2 {
    border-top-right-radius: calc(var(--spacing) * 0.25);
}
.brtr-4 {
    border-top-right-radius: calc(var(--spacing) * 0.5);
}
.brtr-8 {
    border-top-right-radius: var(--spacing);
}
.brtr-16 {
    border-top-right-radius: calc(var(--spacing) /  0.5);
}
.brtr-32 {
    border-top-right-radius: calc(var(--spacing) /  0.25);
}

.brb-2 {
    border-bottom-left-radius: calc(var(--spacing) * 0.25);
    border-bottom-right-radius: calc(var(--spacing) * 0.25);
}
.brb-4 {
    border-bottom-left-radius: calc(var(--spacing) * 0.5);
    border-bottom-right-radius: calc(var(--spacing) * 0.5);
}
.brb-8 {
    border-bottom-left-radius: var(--spacing);
    border-bottom-right-radius: var(--spacing);
}
.brb-16 {
    border-bottom-left-radius: calc(var(--spacing) /  0.5);
    border-bottom-right-radius: calc(var(--spacing) /  0.5);
}
.brb-32 {
    border-bottom-left-radius: calc(var(--spacing) /  0.25);
    border-bottom-right-radius: calc(var(--spacing) /  0.25);
}

.brbl-2 {
    border-bottom-left-radius: calc(var(--spacing) * 0.25);
}
.brbl-4 {
    border-bottom-left-radius: calc(var(--spacing) * 0.5);
}
.brbl-8 {
    border-bottom-left-radius: var(--spacing);
}
.brbl-16 {
    border-bottom-left-radius: calc(var(--spacing) /  0.5);
}
.brbl-32 {
    border-bottom-left-radius: calc(var(--spacing) /  0.25);
}

.brbr-2 {
    border-bottom-right-radius: calc(var(--spacing) * 0.25);
}
.brbr-4 {
    border-bottom-right-radius: calc(var(--spacing) * 0.5);
}
.brbr-8 {
    border-bottom-right-radius: var(--spacing);
}
.brbr-16 {
    border-bottom-right-radius: calc(var(--spacing) /  0.5);
}
.brbr-32 {
    border-bottom-right-radius: calc(var(--spacing) /  0.25);
}
.b-neutral-mid {
    border: var(--neutral-mid) 1px solid;
}
.b-neutral-lightest {
    border: var(--neutral-lightest) 1px solid
}

.pill {
    background-color: white;
    border-radius: 0.25em;
    display: inline-block;
    padding: 0.25em;
}

/* Dropdown */
li.dropable {
    position: relative;
    display: inline-block;
}
li.dropable > ul {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}
li.dropable:hover > ul {
    display: block;
}
li.dropable > ul > li {
    white-space: nowrap; /* to prevent long titles from splitting */
}

.ws-nw {
    white-space: nowrap;
}

/* Action Buttons */
.action-button {
    background-color: var(--light);
    border-radius: 1em;
    line-height: 200%;
    padding: 0 1em;
}
.action-button.primary, .action-button.primary * {
    background-color: var(--primary);
    color: var(--lightest);
}
.action-button.hollow {
    border-width: 0.0125em;
    border-style: dashed;
    border-color: var(--dark);
}
.action-button.hollow, .action-button.hollow * {
    background-color: var(--lightest);
    color: var(--darkest);
}
.action-button > a {
    display: block;
    width: 100%;
}
.action-button:hover, .action-button:hover * {
    background-color: var(--dark);
    color: var(--lightest);
}
.action-button.hollow:hover, .action-button.hollow:hover * {
    background-color: var(--light);
    color: var(--darkest);
}
.btn-accent,
.btn-disabled,
.btn-primary,
.btn-secondary,
[class*="btn-"] {
    border: none;
    border-radius: var(--smallest);
    cursor: pointer;
    padding: var(--small);
}
.btn-primary,
.toggle-primary-on,
.btn-primary-to-dark {
    background: var(--primary-lightest);
    color: var(--primary-darker-than-darkest);
}
.btn-ghost-primary:hover,
.toggle-primary-on:hover,
.btn-primary:hover {
    background-color: var(--primary-white-tint);
}
.btn-primary-to-dark:hover {
    background: var(--primary-light);
}
.btn-primary-dark {
    background-color: var(--primary-dark);
}
.btn-primary-dark:hover {
    background-color: var(--primary-mid-dark);
}
.btn-primary-light {
    background: var(--primary-light);
    color: var(--primary-darker-than-darkest);
}
.btn-primary-light:hover {
    background-color: var(--primary-mid);
}
.btn-secondary,
.btn-secondary-to-dark {
    background: var(--secondary-lightest);
    color: var(--secondary-darker-than-darkest);
}
.btn-ghost-secondary:hover,
.btn-secondary:hover {
    background-color: var(--secondary-white-tint);
}
.btn-secondary-to-dark:hover {
    background: var(--secondary-light);
}
.btn-secondary-light {
    background: var(--secondary-light);
    color: var(--secondary-darker-than-darkest);
}
.btn-secondary-light:hover {
    background-color: var(--secondary-mid);
}
.btn-accent,
.btn-accent-to-dark {
    background: var(--accent-lightest);
    color: var(--accent-darker-than-darkest);
}
.btn-ghost-accent:hover,
.btn-accent:hover {
    background-color: var(--accent-white-tint);
}
.btn-accent-to-dark:hover {
    background: var(--accent-light);
}
.btn-accent-light {
    background: var(--accent-light);
    color: var(--accent-darker-than-darkest);
}
.btn-accent-light:hover {
    background-color: var(--accent-mid);
}
.btn-neutral,
.toggle-off:hover {
    background-color: var(--neutral-white-tint);
}
.btn-neutral:hover,
.toggle-off {
    background-color: var(--neutral-lightest);
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-accent:disabled,
.btn-primary:disabled:hover,
.btn-secondary:disabled:hover,
.btn-accent:disabled:hover,
.btn-disabled,
.btn-disabled:hover {
    background-color: var(--neutral-lightest);
    cursor: default;
}
[class*=" btn-outline-"] {
    background-color: white;
}
.btn-outline-neutral {
    border: 1px solid var(--neutral-light);
}
.btn-outline-neutral:hover,
.btn-outline-neutral.active {
    border: 1px solid var(--neutral-mid);
}
.btn-outline-neutral.active {
    background-color: var(--neutral-lightest);
}
[class*="btn-ghost-"] {
    background: none;
}
[class*="btn-pill"] {
    border-radius: 10rem;
    padding: 0.5rem 1rem;
}

/* Scroll Up Btn */
#scrollUpBtn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: none; 
    position: fixed; 
    bottom: 5%; 
    right: 5%;
}
#scrollUpBtn * {
    color: var(--mid)
}
#scrollUpBtn .icon {
    top: 0;
    padding: 0;
    margin: 0;
}

/* Sign Up styling */
.entry__choice {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
.entry__label {
    font-weight: normal !important;
    margin: var(--spacing) 0 calc(var(--spacing) * 0.5) 0 !important;
}
.entry__error {
    color: #653131 !important;
}
.entry__field {
    margin: 0 0 0 0 !important;
}
#sib-container {
    max-width: 100% !important;
    padding: var(--spacing) !important;
}
#sib-container input:-ms-input-placeholder {
    text-align: left;
    color: #c0ccda;
}
#sib-container input::placeholder {
    text-align: left;
    color: #c0ccda;
}
#sib-container textarea::placeholder {
    text-align: left;
    color: #c0ccda;
}
#sib-container a {
    text-decoration: underline;
    color: #2BB2FC;
}
.sib-form__declaration {
    padding: 0 0 0 0 !important;
}
.declaration-block-icon {
    filter: saturate(0) opacity(0.5);
}
.sib-form {
    padding: 0 0 0 0 !important;
}
.sib-form-block {
    padding: 0 0 0 0 !important;
}
.sib-form .entry__error, .sib-form .entry__label, .sib-form .entry__specification, .sib-form .form__error {
    max-width: 100% !important;
}
.sib-form .input_replaced:checked+.checkbox_tick_positive {
    background-color: var(--primary-mid) !important;
    border-color: var(--primary-mid) !important;
}
.bgr-accent {
    background-color: var(--accent-white-tint);
    border-radius: var(--smaller);
}
.bgr-accent-lightest {
    background-color: var(--accent-lightest);
    border-radius: var(--smaller);
}
.bgr-accent-mid-dark {
    background-color: var(--accent-mid-dark);
    border-radius: var(--smaller);
}
.bgr-accent-dark {
    background-color: var(--accent-dark);
    border-radius: var(--smaller);
}
a.bgr-accent:hover {
    background-color: var(--accent-lightest);
}
.bgr-neutral {
    background-color: var(--neutral-white-tint);
    border-radius: var(--smaller);
}
.bgr-neutral-darkest {
    background-color: var(--neutral-darkest);
    border-radius: var(--smaller);
}
.bgr-primary {
    background-color: var(--primary-white-tint);
    border-radius: var(--smaller);
}
.bgr-primary-lightest {
    background-color: var(--primary-lightest);
    border-radius: var(--smaller);
}
.bgr-primary-dark {
    background-color: var(--primary-dark);
}
.bgr-negative {
    background-color: var(--negative-white-tint);
    border-radius: var(--smaller);
}
.bgr-white {
    background-color: white;
    border-radius: var(--smaller);
}
.bgr-p-cc {
    background-position: center center;
}
.bgr-p-lc {
    background-position: left center;
}
.brdr-black-and-white {
    border-style: solid;
    border-width: 1px;
}
.brdr-black-and-white {
    border-color: black;
    border-radius: var(--smaller);
}
.brdr-primary {
    border-style: solid;
    border-width: 1px;
}
.brdr-primary {
    border-color: var(--primary-mid);
    border-radius: var(--smaller);
}
a.bgr-primary:hover {
    background-color: var(--primary-lightest);
    border-radius: var(--smaller);
}
.bgr-secondary {
    background-color: var(--secondary-white-tint);
    border-radius: var(--smaller);
}
.bgr-secondary-lightest {
    background-color: var(--secondary-lightest);
    border-radius: var(--smaller);
}
.bgr-secondary-dark {
    background-color: var(--secondary-dark);
    border-radius: var(--smaller);
}
.bgr-secondary-black-tint {
    background-color: var(--secondary-black-tint);
    border-radius: var(--smaller);
}
a.bgr-secondary:hover {
    background-color: var(--secondary-lightest);
    border-radius: var(--smaller);
}
.o-75 {
    opacity: 0.75;
}
.alt-img-1 {
    animation-name: fade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-direction: alternate;
}
@keyframes fade {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.glowable,
.bgr-primary.glowable {
    border: 1px solid var(--primary-white-tint);
    transition: border 0.5s;
}
.bgr-primary.glowable:hover {
    border: 1px solid var(--primary-mid);
}
.bgr-secondary.glowable:hover {
    border: 1px solid var(--secondary-mid);
}
.bgr-accent.glowable:hover {
    border: 1px solid var(--accent-mid);
}

.card-icon span.icon {
    background-color: var(--primary-light);
    border-radius: var(--small);
    height: var(--medium);
    width: var(--medium);
    padding: var(--smallish);
}

.bgr-secondary .card-icon span.icon {
    background-color: var(--secondary-light);
}

.bgr-accent .card-icon span.icon {
    background-color: var(--accent-light);
}

.box {
    background-color: var(--primary-lightest);
    border-radius: var(--smaller);
    padding: var(--small);
    padding-bottom: var(--smaller);
    margin-bottom: var(--small);
}
.box * {
    font-size: 0.9rem;
}
.box.details {
    background-color: var(--neutral-lightest);
}
.box.details.toc {
    border: 1px solid var(--neutral-light);
    background-color: white;
}
.box.details.toc li {
    padding: var(--smallest);
}
.box.guide-irl,
.box.tip {
    background-color: var(--secondary-lightest);
}
.box.guide > :first-child,
.box.guide-irl > :first-child {
    line-height: 150%;
    margin: 0.5em 0 1em;
}
.box.warning {
    background-color: var(--accent-lightest);
}
.box > input ~ div {
    display: none
}
.box > input ~ p > label::before {
    content: '▸ ';
    padding-right: var(--smallest);
}
.box > input:checked ~ div {
    display: block
}
.box > input:checked ~ p > label::before {
    content: '▾ ';
}
.box.guide li {
        line-height: 150%;
}

.fs-key {
    background-color: hsl(0, 0%, 85%);
    border-radius: var(--border-radius);
    border: 1px solid #666;
    border-right: 2px solid #999;
    border-bottom: 2px solid hsl(0, 0%, 40%);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 100%;
    padding: var(--smallest) var(--smallest) var(--tiny);
    vertical-align: baseline;
  }
  
  .fs-key:hover {
    background-color: hsl(0, 0%, 88%);
    border-bottom: 2px solid hsl(0, 0%, 37%);
    padding-top: calc(var(--smallest) - 1px);
  }
  
  .fs-key span {
    border-bottom: 1px solid white;
    position: relative;
    top: 0px;
  }
  
  .fs-key:hover span,
  .fs-key span:hover {
    border-bottom: none;
    top: 1px;
  }

.img-cover {
    object-fit: cover;
    object-position: center;
}