mainStyle.ts

/**
 * Based on: https://github.com/robsheldon/sscaffold-css
 * This is extracted from sscaffold.css and meant to be used within elements to style the shadow roots.
 */

import { css } from 'lit-element';

export const mainStyle = css`
  /******************************************************************************
   *
   *  RESET
   *
   *  Following rules are intended to fix layout quirks in different browsers.
   * 
   ******************************************************************************/

  *,
  *:after,
  *:before {
    /* Set universal box sizing with inheritance. [3] */
    box-sizing: inherit;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  ul[class],
  ol[class],
  dl,
  li,
  blockquote,
  figure,
  figcaption,
  button,
  input,
  optgroup,
  select,
  textarea {
    /* Remove the default margin for these elements in all browsers. [1],[4] */
    margin: 0;
  }

  main,
  details {
    /* Render <main> consistently in IE and add the correct display for <details>
      in Edge, IE 10+, and Firefox. [1] */
    display: block;
  }

  summary {
    /* Add the correct display in all browsers. [1] */
    display: list-item;
  }

  template {
    /* Add the correct display in IE 10+. [1] */
    display: none;
  }

  h1 {
    /* Fix the font size and margin on 'h1' elements in 'section' and 
      'article' contexts in Chrome, Firefox, and Safari. [1] */
    font-size: 2em;
    margin: 0.67em 0;
  }

  hr {
    /* Add the correct box sizing in Firefox. [1] */
    box-sizing: content-box;
    height: 0;
    /* Show the overflow in Edge and IE. [1] */
    overflow: visible;
  }

  pre,
  code,
  kbd,
  samp {
    /* Fix the inheritance and scaling of font size in all browsers. [1] */
    font-family: monospace, monospace;
    /* Fix the odd 'em' font sizing in all browsers. [1] */
    font-size: 1em;
    /* Ensure that these are block-level elements by default. */
    display: block;
    /* Ensure that these elements don't soft-wrap by default. [2] */
    white-space: pre;
    /* Since white-space is set to "pre", ensure that the element has
      scrollbars as necessary. */
    overflow: auto;
  }

  p > pre,
  p > code,
  p > kbd,
  p > samp {
    /* Render code blocks contained by <p> blocks as inline. */
    display: inline;
  }

  ul[class],
  ol[class],
  dl[class] {
    /* Remove default padding from list elements that have a class attribute. [4] */
    padding: 0;
    /* Reset list style for lists with class attributes. [4] */
    list-style: none;
  }

  a {
    /* Remove the gray background on active links in IE 10. [1] */
    background-color: transparent;
  }

  a:not([class]) {
    /* Makes links a bit more readable while avoiding conflicts. [4] */
    text-decoration-skip-ink: auto;
  }

  abbr[title] {
    /* Remove the bottom border in Chrome 57-. [1] */
    border-bottom: none;
    /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. [1] */
    text-decoration: underline;
    text-decoration: underline dotted;
  }

  b,
  strong {
    /* Add the correct font weight in Chrome, Edge, and Safari. [1] */
    /* This has been changed from [1] because the 'bolder' value is not well
      enough supported in common fonts: https://css-tricks.com/almanac/properties/f/font-weight/ */
    font-weight: bold;
  }

  small {
    /* Enforce the correct font size in all browsers. [1] */
    font-size: 80%;
  }

  sub,
  sup {
    /* Prevent 'sub' and 'sup' elements from affecting the line height
      in all browsers. [1] */
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    /* Enforce 'sub' positioning in all browsers. [1] */
    bottom: -0.25em;
  }

  sup {
    /* Enforce 'sup' positioning in all browsers. [1] */
    top: -0.5em;
  }

  body img {
    /* Remove the border on images inside links in IE 10. [1] */
    border-style: none;
    /* Go ahead and make these block-level elements. I'm not sure about this. [4] */
    display: block;
    /* [2] */
    width: 100%;
    max-width: 100%;
  }

  td:not([align]),
  th:not([align]) {
    /* Borrow a rule from [5], modifying a rule from [2] to give table cells
      a default left alignment unless alignment is specified in the element. */
    text-align: left;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    /* Set the font styles to match the rest of the document in
      all browsers. [1],[4] */
    font: inherit;
    line-height: 1.15;
    /* Remove the margin in Firefox and Safari. [1] */
    margin: 0;
  }

  button,
  input {
    /* Show the overflow in Edge. [1] */
    overflow: visible;
  }

  button,
  select {
    /* Remove the inheritance of text transform in Edge, Firefox, and IE. [1] */
    text-transform: none;
  }

  .button,
  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    /* Fix the inability to style clickable types in iOS and Safari. [1] */
    -webkit-appearance: button;
    /* Set the correct cursor for these elements. [2] */
    cursor: pointer;
  }

  .button[disabled],
  button[disabled],
  [type='button'][disabled],
  [type='reset'][disabled],
  [type='submit'][disabled] {
    /* Reset the cursor for disabled button elements. [2] */
    cursor: default;
  }

  button::-moz-focus-inner,
  [type='button']::-moz-focus-inner,
  [type='reset']::-moz-focus-inner,
  [type='submit']::-moz-focus-inner {
    /* Remove the inner border and padding in Firefox. [1] */
    border-style: none;
    padding: 0;
  }
  button:-moz-focusring,
  [type='button']:-moz-focusring,
  [type='reset']:-moz-focusring,
  [type='submit']:-moz-focusring {
    /* Restore the focus styles unset by the previous rule. [1] */
    outline: 1px dotted ButtonText;
  }

  fieldset {
    /* Fix 'fieldset' padding in Firefox. [1] */
    padding: 0.35em 0.75em 0.625em;
  }

  legend {
    /* Fix text wrapping in Edge and IE. [1] */
    box-sizing: border-box;
    display: table;
    max-width: 100%;
    white-space: normal;
    /* Fix color inheritance from 'fieldset' elements in IE. [1] */
    color: inherit;
    /* Remove padding so developer are not surprised when they zero out
      'fieldset' elements in all browsers. [1] */
    padding: 0;
  }

  textarea {
    /* Remove the default vertical scrollbar in IE 10+. [1] */
    overflow: auto;
  }

  [type='checkbox'],
  [type='radio'] {
    /* Add the correct box sizing in IE 10. [1] */
    box-sizing: border-box;
    /* Remove the padding present in IE 10. [1] */
    padding: 0;
  }

  [type='number']::-webkit-inner-spin-button,
  [type='number']::-webkit-outer-spin-button {
    /* Fix the cursor style of increment and decrement buttons in Chrome. [1] */
    height: auto;
  }

  [type='search'] {
    /* Fix appearance in Chrome and Safari. [1] */
    -webkit-appearance: textfield;
    /* Fix the outline style in Safari. [1] */
    outline-offset: -2px;
  }

  [type='search']::-webkit-search-decoration {
    /* Remove the inner padding in Chrome and Safari on MacOS. [1] */
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    /* Fix the inability to sytle clickable types in iOS and Safari. [1] */
    -webkit-appearance: button;
    /* Fix the font properties in Safari. [1] */
    font: inherit;
  }

  progress {
    /* Add the correct vertical alignment in Chrome, Firefox, and Opera. [1] */
    vertical-align: baseline;
  }

  [hidden] {
    /* Add the correct display in IE 10. [1] */
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      /* Prevent animations and transitions for users that want that. [4] */
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /******************************************************************************
   *
   *   FLEXBOX-BASED COLUMNS
   *
   *   These classes provide the flexbox-based row-and-column layout from
   *   milligram.css [2].
   * 
   ******************************************************************************/

  .row {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .row.row-no-padding {
    padding: 0;
  }

  .row.row-no-padding > .column {
    padding: 0;
  }

  .row.row-wrap {
    flex-wrap: wrap;
  }

  .row.row-top {
    align-items: flex-start;
  }

  .row.row-bottom {
    align-items: flex-end;
  }

  .row.row-center {
    align-items: center;
  }

  .row.row-stretch {
    align-items: stretch;
  }

  .row.row-baseline {
    align-items: baseline;
  }

  .row .column {
    display: block;
    flex: 1 1 auto;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }

  .row .column.column-offset-10 {
    margin-left: 10%;
  }

  .row .column.column-offset-20 {
    margin-left: 20%;
  }

  .row .column.column-offset-25 {
    margin-left: 25%;
  }

  .row .column.column-offset-33,
  .row .column.column-offset-34 {
    margin-left: 33.3333%;
  }

  .row .column.column-offset-50 {
    margin-left: 50%;
  }

  .row .column.column-offset-66,
  .row .column.column-offset-67 {
    margin-left: 66.6666%;
  }

  .row .column.column-offset-75 {
    margin-left: 75%;
  }

  .row .column.column-offset-80 {
    margin-left: 80%;
  }

  .row .column.column-offset-90 {
    margin-left: 90%;
  }

  .row .column.column-10 {
    flex: 0 0 10%;
    max-width: 10%;
  }

  .row .column.column-20 {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row .column.column-25 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row .column.column-33,
  .row .column.column-34 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  .row .column.column-40 {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .row .column.column-50 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row .column.column-60 {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .row .column.column-66,
  .row .column.column-67 {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
  }

  .row .column.column-70 {
    flex: 0 0 70%;
    max-width: 70%;
  }

  .row .column.column-75 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .row .column.column-80 {
    flex: 0 0 80%;
    max-width: 80%;
  }

  .row .column.column-90 {
    flex: 0 0 90%;
    max-width: 90%;
  }

  .row .column .column-top {
    align-self: flex-start;
  }

  .row .column .column-bottom {
    align-self: flex-end;
  }

  .row .column .column-center {
    -ms-grid-row-align: center;
    align-self: center;
  }

  @media (min-width: 40rem) {
    .row {
      flex-direction: row;
    }
    .row .column {
      margin-bottom: inherit;
      padding: 0 1rem;
    }
  }

  /******************************************************************************
   *
   *   12 COLUMN GRID
   *
   *   These classes provide the 12-column grid from skeleton.css [6]. skeleton.css
   *   set these columns to only work on displays wider than 550px, so for
   *   compatibility, all of these rules are inside a media query. Instead of 550px,
   *   the media query starts at the same 40rem as milligram's does.
   *
   *   The margin-left values are specific to skeleton.css and conflict with
   *   milligram.css's margin-less columns, so that margin is applied only to
   *   elements that match skeleton's selector style.
   * 
   ******************************************************************************/

  @media (min-width: 40rem) {
    .one.column,
    .one.columns,
    .two.columns,
    .three.columns,
    .four.columns,
    .five.columns,
    .six.columns,
    .seven.columns,
    .eight.columns,
    .nine.columns,
    .ten.columns,
    .eleven.columns,
    .twelve.columns,
    .one-third.column,
    .two-thirds.column,
    .one-half.column {
      margin-left: 4%;
      padding: 0;
    }

    .one.column:first-child,
    .one.columns:first-child,
    .two.columns:first-child,
    .three.columns:first-child,
    .four.columns:first-child,
    .five.columns:first-child,
    .six.columns:first-child,
    .seven.columns:first-child,
    .eight.columns:first-child,
    .nine.columns:first-child,
    .ten.columns:first-child,
    .eleven.columns:first-child,
    .twelve.columns:first-child,
    .one-third.column:first-child,
    .two-thirds.column:first-child,
    .one-half.column:first-child {
      margin-left: 0;
    }

    .one.column,
    .one.columns {
      width: 4.66666666667%;
    }

    .two.columns {
      width: 13.3333333333%;
    }

    .three.columns {
      width: 22%;
    }

    .four.columns {
      width: 30.6666666667%;
    }

    .five.columns {
      width: 39.3333333333%;
    }

    .six.columns {
      width: 48%;
    }

    .seven.columns {
      width: 56.6666666667%;
    }

    .eight.columns {
      width: 65.3333333333%;
    }

    .nine.columns {
      width: 74%;
    }

    .ten.columns {
      width: 82.6666666667%;
    }

    .eleven.columns {
      width: 91.3333333333%;
    }

    .twelve.columns {
      width: 100%;
    }

    .one-third.column {
      width: 30.6666666667%;
    }

    .two-thirds.column {
      width: 65.3333333333%;
    }

    .one-half.column {
      width: 48%;
    }

    .offset-by-one.column,
    .offset-by-one.columns {
      margin-left: 8.66666666667%;
    }

    .offset-by-two.column,
    .offset-by-two.columns {
      margin-left: 17.3333333333%;
    }

    .offset-by-three.column,
    .offset-by-three.columns {
      margin-left: 26%;
    }

    .offset-by-four.column,
    .offset-by-four.columns {
      margin-left: 34.6666666667%;
    }

    .offset-by-five.column,
    .offset-by-five.columns {
      margin-left: 43.3333333333%;
    }

    .offset-by-six.column,
    .offset-by-six.columns {
      margin-left: 52%;
    }

    .offset-by-seven.column,
    .offset-by-seven.columns {
      margin-left: 60.6666666667%;
    }

    .offset-by-eight.column,
    .offset-by-eight.columns {
      margin-left: 69.3333333333%;
    }

    .offset-by-nine.column,
    .offset-by-nine.columns {
      margin-left: 78%;
    }

    .offset-by-ten.column,
    .offset-by-ten.columns {
      margin-left: 86.6666666667%;
    }

    .offset-by-eleven.column,
    .offset-by-eleven.columns {
      margin-left: 95.3333333333%;
    }

    .offset-by-one-third.column,
    .offset-by-one-third.columns {
      margin-left: 34.6666666667%;
    }

    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns {
      margin-left: 69.3333333333%;
    }

    .offset-by-one-half.column,
    .offset-by-one-half.columns {
      margin-left: 52%;
    }
  }

  /******************************************************************************
   *
   *   UTILITY CLASSES
   *
   *   Some helpful utility classes.
   * 
   ******************************************************************************/

  .table-container {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .clearfix:after {
    clear: both;
    content: ' ';
    display: block;
  }

  .float-left {
    float: left;
  }

  .float-right {
    float: right;
  }

  /******************************************************************************
   *
   *   BASE THEME
   *
   *   The rest of these rules set a default look-and-feel based on milligram.css [2].
   *   Override these as needed in your own css to set a custom look-and-feel.
   * 
   ******************************************************************************/

  /**
   * Typography: font, letter-spacing, line-height, text-*, list-style-type.
   */

  main article,
  main section {
    padding: 7.5rem 1rem;
    position: relative;
    width: 100%;
  }

  main section > *,
  main article > * {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
  }

  main section .table-container table {
    width: 100%;
  }

  code {
    font-size: 86%;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Montserrat', Frutiger, 'Frutiger Linotype', Univers, Calibri,
      'Gill Sans', 'Gill Sans MT', 'Myriad Pro', Myriad, 'DejaVu Sans Condensed',
      'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, 'Helvetica Neue',
      Helvetica, Arial, sans-serif;
    font-weight: 500;
  }

  h1 {
    font-size: 3.9rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 3.4rem;
    line-height: 1.25;
  }

  h3 {
    font-size: 2.9rem;
    line-height: 1.3;
  }

  h4 {
    font-size: 2.6rem;
    line-height: 1.35;
  }

  h5 {
    font-size: 2.4rem;
    line-height: 1.5;
  }

  h6 {
    font-size: 2.2rem;
    line-height: 1.4;
  }

  dl {
    list-style: none;
  }

  ol {
    list-style: decimal inside;
  }

  ul {
    list-style: disc inside;
  }

  dl dl,
  dl ol,
  dl ul,
  ol dl,
  ol ol,
  ol ul,
  ul dl,
  ul ol,
  ul ul {
    font-size: 90%;
  }

  .button,
  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    font-family: Verdana;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
    line-height: 3.8rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }

  label,
  legend {
    font-size: 1.6rem;
    font-weight: 700;
  }

  label.inline,
  legend.inline {
    font-weight: normal;
  }

  /**
   * Layout: Display, margin, padding, height, and width.
   */

  .table-container {
    max-width: 80rem;
  }

  blockquote,
  dl,
  figure,
  form,
  ol,
  p,
  pre,
  table,
  ul {
    margin-bottom: 2.5rem;
  }

  blockquote {
    padding: 1rem 1.5rem;
  }

  blockquote *:last-child {
    margin-bottom: 0;
  }

  code {
    margin: 0 0.2rem;
    padding: 0.2rem 0.5rem;
  }

  pre > code {
    padding: 1rem 1.5rem;
  }

  hr {
    margin: 3rem 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 2em;
    margin-bottom: 0.75em;
  }

  dl,
  ol,
  ul {
    margin-top: 0;
    padding-left: 0;
  }

  dl dl,
  dl ol,
  dl ul,
  ol dl,
  ol ol,
  ol ul,
  ul dl,
  ul ol,
  ul ul {
    margin: 1.5rem 0 1.5rem 3rem;
  }

  dd,
  dt,
  li {
    margin-bottom: 1rem;
  }

  table {
    border-spacing: 0;
  }

  td,
  th {
    padding: 1.2rem 1.5rem;
  }

  td:first-child,
  th:first-child {
    padding-left: 0;
  }

  td:last-child,
  th:last-child {
    padding-right: 0;
  }

  input,
  select,
  fieldset,
  textarea {
    margin-bottom: 1.5rem;
  }

  textarea {
    min-height: 6.5rem;
  }

  .button,
  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    display: inline-block;
    height: 3.8rem;
    padding: 0 3rem;
    margin-bottom: 1rem;
  }

  [type='email'],
  [type='number'],
  [type='password'],
  [type='search'],
  [type='tel'],
  [type='text'],
  [type='url'],
  textarea,
  select {
    height: 3.8rem;
    padding: 0.6rem 1rem;
    width: 100%;
  }

  [type='checkbox'],
  [type='radio'] {
    display: inline;
  }

  select {
    padding-right: 3rem;
  }

  label,
  legend {
    display: block;
    margin-bottom: 0.5rem;
  }

  label.inline,
  legend.inline {
    display: inline-block;
    margin-left: 0.5rem;
  }

  fieldset {
    border-width: 0;
    padding: 0;
  }

  /**
   * Colors, borders, outline, box-shadow, appearance, and opacity.
   */

  :host {
    color: var(--primary-text-color);
  }

  a {
    color: var(--primary-text-color);
    text-decoration: none;
  }

  a:focus,
  a:hover {
    color: var(--secondary-color);
  }

  a:focus {
    outline: 0;
  }

  .icon {
    height: 1em;
    fill: var(--primary-text-color);
    vertical-align: middle;
  }

  a:hover .icon,
  a:focus .icon {
    fill: var(--secondary-color);
  }

  blockquote {
    border-left: 0.3rem solid #d1d1d1;
  }

  pre,
  code {
    background: #f4f5f6;
  }

  pre {
    border-left: 0.3rem solid #5680cc;
  }

  code {
    border-radius: 0.4rem;
  }

  pre > code {
    border-radius: 0;
  }

  hr {
    border: 0;
    border-top: 0.1rem solid #f4f5f6;
  }

  td,
  th {
    border-bottom: 0.1rem solid #e1e1e1;
  }

  /**
   * Button styling. All buttons start with the "outline" style defined in
   * milligram.css [2]. Buttons with a "submit" type or a "default" attribute
   * or class get the default style defined in milligram.
   */

  .button,
  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    border: 0.1rem solid #5680cc;
    border-radius: 0.4rem;
    white-space: nowrap;
    background-color: transparent;
    color: #5680cc;
    vertical-align: text-bottom;
    -webkit-appearance: none;
  }

  .button:focus,
  .button:hover,
  button:focus,
  button:hover,
  [type='button']:focus,
  [type='button']:hover,
  [type='reset']:focus,
  [type='reset']:hover,
  [type='submit']:focus,
  [type='submit']:hover {
    outline: 0;
    background-color: transparent;
    border-color: #595959;
    color: #595959;
  }

  /**
   * Disabled buttons.
   */

  .button[disabled],
  button[disabled],
  [type='button'][disabled],
  [type='reset'][disabled],
  [type='submit'][disabled] {
    opacity: 0.5;
  }

  .button[disabled]:focus,
  .button[disabled]:hover,
  button[disabled]:focus,
  button[disabled]:hover,
  [type='button'][disabled]:focus,
  [type='button'][disabled]:hover,
  [type='reset'][disabled]:focus,
  [type='reset'][disabled]:hover,
  [type='submit'][disabled]:focus,
  [type='submit'][disabled]:hover {
    border-color: inherit;
    color: #5680cc;
  }

  /**
   * Submit buttons and buttons with a "default" class or attribute.
   */

  .button.default,
  button.default,
  [type='button'][default],
  [type='button'].default,
  [type='reset'].default,
  [type='submit'] {
    background-color: #5680cc;
    color: #fff;
  }

  .button.default:focus,
  .button.default:hover,
  button.default:focus,
  button.default:hover,
  [type='button'][default]:focus,
  [type='button'][default]:hover,
  [type='button'].default:focus,
  [type='button'].default:hover,
  [type='reset'].default:focus,
  [type='reset'].default:hover,
  [type='submit']:focus,
  [type='submit']:hover {
    background-color: #595959;
    border-color: #595959;
    color: #fff;
  }

  .button.default[disabled]:focus,
  .button.default[disabled]:hover,
  button.default[disabled]:focus,
  button.default[disabled]:hover,
  [type='button'][default][disabled]:focus,
  [type='button'][default][disabled]:hover,
  [type='button'].default[disabled]:focus,
  [type='button'].default[disabled]:hover,
  [type='reset'].default[disabled]:focus,
  [type='reset'].default[disabled]:hover,
  [type='submit'].default[disabled]:focus,
  [type='submit'].default[disabled]:hover {
    background-color: #5680cc;
    border-color: #5680cc;
  }

  /**
   * Other form elements.
   */

  [type='email'],
  [type='number'],
  [type='password'],
  [type='search'],
  [type='tel'],
  [type='text'],
  [type='url'],
  textarea,
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0.1rem solid #d1d1d1;
    border-radius: 0.4rem;
    box-shadow: none;
  }

  [type='email']:focus,
  [type='number']:focus,
  [type='password']:focus,
  [type='search']:focus,
  [type='tel']:focus,
  [type='text']:focus,
  [type='url']:focus,
  textarea:focus,
  select:focus {
    border-color: #5680cc;
    outline: 0;
  }

  select {
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDI5IDE0IiB3aWR0aD0iMjkiPjxwYXRoIGZpbGw9IiNkMWQxZDEiIGQ9Ik05LjM3NzI3IDMuNjI1bDUuMDgxNTQgNi45MzUyM0wxOS41NDAzNiAzLjYyNSIvPjwvc3ZnPgo=')
      center right no-repeat;
  }

  /* select:focus {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjOWI0ZGNhIiBkPSJNOS4zNzcyNyAzLjYyNWw1LjA4MTU0IDYuOTM1MjNMMTkuNTQwMzYgMy42MjUiLz48L3N2Zz4K');
  } */

  /* @media (min-width: 40rem) {
    body {
      font-size: 2em;
    }
  } */

  /******************************************************************************
   *
   *   CREDITS
   * 
   *   [1] normalize.css, https://github.com/necolas/normalize.css/
   *   [2] milligram.css, https://github.com/milligram/milligram/
   *   [3] https://css-tricks.com/box-sizing/
   *   [4] https://hankchizljaw.com/wrote/a-modern-css-reset/
   *   [5] https://github.com/jgthms/minireset.css/
   *   [6] skeleton.css, https://github.com/dhg/Skeleton
   * 
   ******************************************************************************/
`;