// Reset
    html,
    body,
    p,
    ol,
    ul,
    li,
    dl,
    dt,
    dd,
    blockquote,
    figure,
    fieldset,
    legend,
    textarea,
    pre,
    iframe,
    hr,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      padding: 0;
      margin: 0;
    }
  
    html,
    body {
      height: 100%;
    }
  
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 100%;
      font-weight: normal;
    }
  
    ul {
      list-style: none;
    }
  
    button,
    input,
    optgroup,
    select,
    textarea {
      margin: 0;
      font-family: inherit;
      font-size: 100%;
      line-height: 1.5;
    }
  
    img,
    embed,
    iframe,
    object,
    audio,
    video {
      max-width: 100%;
      height: auto;
    }
  
    iframe {
      border: 0;
    }
  
    table {
      border-spacing: 0;
      border-collapse: collapse;
    }
  
    td,
    th {
      padding: 0;
      text-align: left;
    }
    
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
  
  
    body {
      font-family:var(--of--font-family); 
      font-size: var(--of--FontSize--sm);
      font-weight: normal;
      line-height: 1.5;
      text-align: left;
      color: var(--of--color-black--100);
    }
  
  a{
    color: var(--of--color-brand--100);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  // a, a:before, a:after, button, button:before, button:after {
  //     transition: var(--of--animation);
  // }
    button,
    a {
      cursor: pointer;
    }
  
    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
      // Remove the inner border and padding in Firefox.
      &::-moz-focus-inner {
        padding: 0;
        border-style: none;
      }
  
      // Restore the focus styles unset by the previous rule.
      &:-moz-focusring {
        outline: 1px dotted ButtonText;
      }
    }