/* Entry point for your PostCSS build */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit; vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }

body { line-height: 1;
}

ol, ul { list-style: none;
}

blockquote, q {
quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none; }

table {
border-collapse: collapse; border-spacing: 0;
}

strong, b {
font-weight: bold; }

em, i {
font-style: italic;
}

a img {
border: none; }

:root {
  /* Spaces modular scale */
  --space-x-small: 0.25em;
  --space-small: 0.5em;
  --space-medium: 1em;
  --space-large: 2em;
  --space-x-large: 3em;
  --space-xx-large: 4em;
  --space-xxx-large: 6em;

  /* Font size modular scale */
  --type-base: calc(1.4em + 0.5vw);
  --type-xxx-small: 55%;
  --type-xx-small: 65%;
  --type-x-small: 75%;
  --type-small: 85%;
  --type-medium: 100%;
  --type-large: 125%;
  --type-x-large: 150%;
  --type-xx-large: 200%;
  --type-xxx-large: 300%;

  --header-height: 6.5em;
  --footer-height: 5.5em
}

@media(max-width: 40em) {

:root {
    --type-base: calc(1em + 0.5vw)
}
  }

html {
  font-size: 10px;
}

body {
  font-size: calc(1.4em + 0.5vw);
  font-size: var(--type-base);
}

:root {
  --indigo-50:  hsl(216, 100%, 93%);
  --indigo-100: hsl(216, 100%, 85%);
  --indigo-200: hsl(219, 95%, 76%);
  --indigo-300: hsl(222, 81%, 65%);
  --indigo-400: hsl(224, 69%, 54%);
  --indigo-500: hsl(223, 71%, 47%);
  --indigo-600: hsl(228, 74%, 43%);
  --indigo-700: hsl(230, 80%, 38%);
  --indigo-800: hsl(232, 86%, 32%);
  --indigo-900: hsl(234, 90%, 25%);

  --orange-50:  hsl(24, 100%, 93%);
  --orange-100: hsl(22, 100%, 85%);
  --orange-200: hsl(20, 100%, 77%);
  --orange-300: hsl(18, 100%, 70%);
  --orange-400: hsl(16, 94%, 61%);
  --orange-500: hsl(14, 89%, 55%);
  --orange-600: hsl(12, 86%, 47%);
  --orange-700: hsl(10, 93%, 40%);
  --orange-800: hsl(8, 92%, 35%);
  --orange-900: hsl(6, 96%, 26%);

  --grey-50:  hsl(216, 33%, 97%);
  --grey-100: hsl(214, 15%, 91%);
  --grey-200: hsl(210, 16%, 82%);
  --grey-300: hsl(211, 13%, 65%);
  --grey-400: hsl(211, 10%, 53%);
  --grey-500: hsl(211, 12%, 43%);
  --grey-600: hsl(209, 14%, 37%);
  --grey-700: hsl(209, 18%, 30%);
  --grey-800: hsl(209, 20%, 25%);
  --grey-900: hsl(210, 24%, 16%);

  --magenta-50:  hsl(294, 100%, 96%);
  --magenta-100: hsl(294, 97%, 88%);
  --magenta-200: hsl(294, 100%, 78%);
  --magenta-300: hsl(296, 96%, 70%);
  --magenta-400: hsl(300, 82%, 60%);
  --magenta-500: hsl(305, 80%, 49%);
  --magenta-600: hsl(306, 85%, 43%);
  --magenta-700: hsl(306, 88%, 37%);
  --magenta-800: hsl(306, 90%, 31%);
  --magenta-900: hsl(308, 91%, 23%);

  --red-50:  hsl(360, 100%, 95%);
  --red-100: hsl(360, 100%, 87%);
  --red-200: hsl(360, 100%, 80%);
  --red-300: hsl(360, 91%, 69%);
  --red-400: hsl(360, 83%, 62%);
  --red-500: hsl(356, 75%, 53%);
  --red-600: hsl(354, 85%, 44%);
  --red-700: hsl(352, 90%, 35%);
  --red-800: hsl(350, 94%, 28%);
  --red-900: hsl(348, 94%, 20%);

  --yellow-50:  hsl(49, 100%, 96%);
  --yellow-100: hsl(48, 100%, 88%);
  --yellow-200: hsl(48, 95%, 76%);
  --yellow-300: hsl(48, 94%, 68%);
  --yellow-400: hsl(44, 92%, 63%);
  --yellow-500: hsl(42, 87%, 55%);
  --yellow-600: hsl(36, 77%, 49%);
  --yellow-700: hsl(29, 80%, 44%);
  --yellow-800: hsl(22, 82%, 39%);
  --yellow-900: hsl(15, 86%, 30%);

  --green-50:  hsl(125, 65%, 93%);
  --green-100: hsl(127, 65%, 85%);
  --green-200: hsl(124, 63%, 74%);
  --green-300: hsl(123, 53%, 55%);
  --green-400: hsl(123, 57%, 45%);
  --green-500: hsl(122, 73%, 35%);
  --green-600: hsl(122, 80%, 29%);
  --green-700: hsl(125, 79%, 26%);
  --green-800: hsl(125, 86%, 20%);
  --green-900: hsl(125, 97%, 14%);

  --color-text: var(--grey-900);
  --color-text-light: var(--grey-50);
}

:root {
  --font-logo: 'Hind Guntur', sans-serif;
  --font-sans: 'Work Sans', sans-serif;
  --font-sans-secondary: 'Lato', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
}

body {
  font-family: 'Work Sans', sans-serif;
  font-family: var(--font-sans);
  font-weight: 300;
  color: hsl(210, 24%, 16%);
  color: var(--color-text);
  line-height: 1.6;
}

h1 {
  font-size: 200%;
  font-size: var(--type-xx-large);
  font-weight: 500;
  line-height: 1.1;
  max-width: 25em;
  margin: auto;
}

h2 {
  font-size: 150%;
  font-size: var(--type-x-large);
  line-height: 1.1;
}

h3 {
  font-size: 125%;
  font-size: var(--type-large);
  line-height: 1.1;
  text-decoration: underline;
}

h4 {
  font-size: 125%;
  font-size: var(--type-large);
  line-height: 1.3;
}

h5 {
  font-size: 100%;
  font-size: var(--type-medium);
}

h6 {
  font-size: 85%;
  font-size: var(--type-small);
}

p {
  display: block;
  max-width: 35em;
  margin: 1em auto;
  margin: var(--space-medium) auto;
  line-height: 1.6;
}

em {
  font-style: normal;
  color: hsl(125, 86%, 20%);
  color: var(--green-800)
}

strong {
  font-weight: 500;
}

pre, code {
  font-family: 'Roboto Mono', monospace;
  font-family: var(--font-mono);
}

code {
  font-size: 80%;
  font-weight: 500;
  background: hsl(216, 33%, 97%);
  background: var(--grey-50);
  padding: 0.1em 0.25em;
  padding: 0.1em var(--space-x-small);
  border-radius: 0.5em;
}

pre {
  max-width: 35em;
  margin: auto;
  font-weight: 400;
  overflow-x: scroll;
  background: hsl(216, 33%, 97%);
  background: var(--grey-50);
  padding: 0.25em 0.5em;
  padding: var(--space-x-small) var(--space-small);
}

mark {
  border-radius: 1.4em 0 2em 0;
  background: transparent;
  background-image: linear-gradient(-100deg, hsla(48, 94%, 68%, 0.3), hsla(48, 94%, 68%, 0.7) 95%, hsla(48, 94%, 68%, 0.1));
}

[am-text~="center"] {
  text-align: center;
}

[am-text~="right"] {
  text-align: right;
  align-self: flex-end;
}

[am-text~="xxx-small"] {
  font-size: 55% !important;
  font-size: var(--type-xxx-small) !important;
}

[am-text~="xx-small"] {
  font-size: 65% !important;
  font-size: var(--type-xx-small) !important;
}

[am-text~="x-small"] {
  font-size: 75% !important;
  font-size: var(--type-x-small) !important;
}

[am-text~="small"] {
  font-size: 85% !important;
  font-size: var(--type-small) !important;
}

[am-text~="medium"] {
  font-size: 100% !important;
  font-size: var(--type-medium) !important;
}

[am-text~="large"] {
  font-size: 125% !important;
  font-size: var(--type-large) !important;
}

[am-text~="x-large"] {
  font-size: 150% !important;
  font-size: var(--type-x-large) !important;
}

[am-text~="xx-large"] {
  font-size: 200% !important;
  font-size: var(--type-xx-large) !important;
}

[am-text~="xxx-large"] {
  font-size: 300% !important;
  font-size: var(--type-xxx-large) !important;
}

[am-text~="underline"] {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
}

[am-text~="mono"] {
  font-family: 'Roboto Mono', monospace;
  font-family: var(--font-mono);
}

[am-text~="error"] {
  color: hsl(350, 94%, 28%);
  color: var(--red-800);
}

[am-text~="indigo"] {
  color: hsl(232, 86%, 32%);
  color: var(--indigo-800);
}

[am-text~="magenta"] {
  color: hsl(306, 90%, 31%);
  color: var(--magenta-800);
}

[am-text~="fade"] {
  color: hsl(211, 12%, 43%);
  color: var(--grey-500);
}

/* Top */

[am-margin~='top:none'] {
  margin-top: 0 !important;
}

[am-margin~='top:xs'] {
  margin-top: 0.25em !important;
  margin-top: var(--space-x-small) !important;
}

[am-margin~='top:s'] {
  margin-top: 0.5em !important;
  margin-top: var(--space-small) !important;
}

[am-margin~='top:m'] {
  margin-top: 1em !important;
  margin-top: var(--space-medium) !important;
}

[am-margin~='top:l'] {
  margin-top: 2em !important;
  margin-top: var(--space-large) !important;
}

[am-margin~='top:xl'] {
  margin-top: 3em !important;
  margin-top: var(--space-x-large) !important;
}

/* Bottom */

[am-margin~='bottom:none'] {
  margin-bottom: 0 !important;
}

[am-margin~='bottom:xs'] {
  margin-bottom: 0.25em !important;
  margin-bottom: var(--space-x-small) !important;
}

[am-margin~='bottom:s'] {
  margin-bottom: 0.5em !important;
  margin-bottom: var(--space-small) !important;
}

[am-margin~='bottom:m'] {
  margin-bottom: 1em !important;
  margin-bottom: var(--space-medium) !important;
}

[am-margin~='bottom:l'] {
  margin-bottom: 2em !important;
  margin-bottom: var(--space-large) !important;
}

[am-margin~='bottom:xl'] {
  margin-bottom: 3em !important;
  margin-bottom: var(--space-x-large) !important;
}

/* Left */

[am-margin~='left:none'] {
  margin-left: 0 !important;
}

[am-margin~='left:xs'] {
  margin-left: 0.25em !important;
  margin-left: var(--space-x-small) !important;
}

[am-margin~='left:s'] {
  margin-left: 0.5em !important;
  margin-left: var(--space-small) !important;
}

[am-margin~='left:m'] {
  margin-left: 1em !important;
  margin-left: var(--space-medium) !important;
}

[am-margin~='left:l'] {
  margin-left: 2em !important;
  margin-left: var(--space-large) !important;
}

[am-margin~='left:xl'] {
  margin-left: 3em !important;
  margin-left: var(--space-x-large) !important;
}

/* Right */

[am-margin~='right:none'] {
  margin-right: 0 !important;
}

[am-margin~='right:xs'] {
  margin-right: 0.25em !important;
  margin-right: var(--space-x-small) !important;
}

[am-margin~='right:s'] {
  margin-right: 0.5em !important;
  margin-right: var(--space-small) !important;
}

[am-margin~='right:m'] {
  margin-right: 1em !important;
  margin-right: var(--space-medium) !important;
}

[am-margin~='right:l'] {
  margin-right: 2em !important;
  margin-right: var(--space-large) !important;
}

[am-margin~='right:xl'] {
  margin-right: 3em !important;
  margin-right: var(--space-x-large) !important;
}

[am-padding~='small'] {
  padding: 0.5em !important;
  padding: var(--space-small) !important;
}

[am-padding~='medium'] {
  padding: 1em !important;
  padding: var(--space-medium) !important;
}

[am-padding~='large'] {
  padding: 2em !important;
  padding: var(--space-large) !important;
}

[am-padding~='x:small'] {
  padding-left: 0.5em !important;
  padding-left: var(--space-small) !important;
  padding-right: 0.5em !important;
  padding-right: var(--space-small) !important;
}

[am-padding~='x:medium'] {
  padding-left: 1em !important;
  padding-left: var(--space-medium) !important;
  padding-right: 1em !important;
  padding-right: var(--space-medium) !important;
}

[am-padding~='x:large'] {
  padding-left: 2em !important;
  padding-left: var(--space-large) !important;
  padding-right: 2em !important;
  padding-right: var(--space-large) !important;
}

[am-rotate~='cw'] {
  transform: rotate(0.5deg);
}

[am-rotate~='acw'] {
  transform: rotate(-0.5deg);
}

@media(max-width: 60em) {
  [am-rotate~='cw'] {
    transform: rotate(0deg);
  }

  [am-rotate~='acw'] {
    transform: rotate(0deg);
  }
}

ui-badge {
  display: flex;
  align-items: center;
  color: hsl(216, 33%, 97%);
  color: var(--color-text-light);
  border-radius: 0.3em;
  height: 1em;
  padding: 0.25em 0.5em;
  padding: var(--space-x-small) var(--space-small);
  margin: 0.5em;
  margin: var(--space-small);
  background: hsl(306, 90%, 31%);
  background: var(--magenta-800);
}

breadcrumbs-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  border-radius: 1em;
  border: 1px solid hsl(210, 16%, 82%);
  border: 1px solid var(--grey-200);
  background: hsl(216, 33%, 97%);
  background: var(--grey-50);
  height: 1.5em;
  padding: 0.25em 1em;
  padding: var(--space-x-small) var(--space-medium);
  font-size: 85%;
  font-size: var(--type-small);
  font-family: 'Lato', sans-serif;
  font-family: var(--font-sans-secondary)
}

breadcrumbs-container svg {
    display: block;
    height: 0.8em;
    width: auto;
    fill: hsl(234, 90%, 25%);
    fill: var(--indigo-900);
  }

breadcrumbs-container > ul {
    display: flex;
    align-items: center;
    justify-content: center
  }

breadcrumbs-container > ul > svg {
      padding-right: 0.5em;
      padding-right: var(--space-small);
    }

breadcrumbs-container li {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-right: 0.5em;
    padding-right: var(--space-small);
    max-width: 12em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500
  }

breadcrumbs-container li:first-child a > svg {
      height: 1.3em
    }

breadcrumbs-container li:first-child a > svg .primary {
        fill: hsl(306, 90%, 31%);
        fill: var(--magenta-800);
      }

breadcrumbs-container li:first-child a > svg .secondary {
        fill: hsl(232, 86%, 32%);
        fill: var(--indigo-800);
      }

breadcrumbs-container li a {
      color: hsl(306, 90%, 31%);
      color: var(--magenta-800)
    }

breadcrumbs-container li a:hover {
        color: hsl(306, 90%, 31%);
        color: var(--magenta-800);
      }

body > breadcrumbs-container {
  display: none;
}

@media(max-width: 75em) {
  body > breadcrumbs-container {
    display: inherit;
  }

  header > breadcrumbs-container {
    display: none;
  }
}

button {
  cursor: pointer;
}

[am-Button], button:not([am-Link]) {
  --color: var(--orange-700);
  --hover-color: var(--orange-900);
  --text-color: var(--grey-50);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5em;
  background: var(--color);
  color: var(--text-color);
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-family: var(--font-sans-secondary);
  line-height: 1;
  padding: 0.5em;
  padding: var(--space-small);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: solid 0.12em var(--color);
  font-weight: 400;
  box-sizing: border-box
}

[am-Button]:hover, button:not([am-Link]):hover {
    color: var(--text-color);
    border-color: var(--hover-color);
  }

[am-Button]:disabled, button:not([am-Link]):disabled {
    opacity: 0.7;
    pointer-events: none;
  }

[am-Button]:active, button:not([am-Link]):active {
    transform: translate(2px, 2px);
  }

[am-Button~="icon"], button[am-type~="icon"] {
  padding-top: 0.25em
}

[am-Button~="icon"] > svg, button[am-type~="icon"] > svg {
    height: 0.8em;
    width: auto;
    fill: var(--text-color);
    margin-right: 0.5em;
    margin-right: var(--space-small)
  }

[am-Button~="icon"] > svg .secondary, button[am-type~="icon"] > svg .secondary {
      fill: var(--color);
    }

[am-Button~="secondary"], button[am-type~="secondary"] {
  background: hsl(216, 33%, 97%);
  background: var(--grey-50);
  --text-color: var(--color)
}

[am-Button~="secondary"]:hover, button[am-type~="secondary"]:hover {
    --text-color: var(--hover-color);
  }

[am-Button~="tertiary"], button[am-type~="tertiary"] {
  --text-color: var(--color);
  background: transparent;
  border: none;
  border-bottom: solid 0.1em var(--color);
  border-radius: 0
}

[am-Button~="tertiary"] svg, button[am-type~="tertiary"] svg {
    height: 1em;
    fill: var(--color);
  }

[am-Button~="tertiary"]:hover, button[am-type~="tertiary"]:hover {
    --text-color: var(--hover-color)
  }

[am-Button~="tertiary"]:hover svg, button[am-type~="tertiary"]:hover svg {
      fill: var(--text-color);
    }

details.dropdown {
  position: relative
}

details.dropdown > summary::-webkit-details-marker {
    display: none;
  }

details.dropdown > summary {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    list-style: none;
    cursor: pointer;
  }

details.dropdown ul {
    position: absolute;
    display: block;
    list-style: none;
    z-index: 100;
  }

a, [am-Link] {
  font-weight: 400;
  color: hsl(8, 92%, 35%);
  color: var(--orange-800);
  text-decoration: underline
}

a:hover, [am-Link]:hover {
    color: hsl(6, 96%, 26%);
    color: var(--orange-900);
    text-decoration-thickness: 2px;
  }

button[am-Link] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  font-family: 'Work Sans', sans-serif;
  font-family: var(--font-sans);
  padding: 0;
}

a[am-type~="secondary"], [am-Link~="secondary"] {
  text-decoration: none
}

a[am-type~="secondary"]:hover, [am-Link~="secondary"]:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

a[am-type~="none"] {
  text-decoration: none;
  font-weight: inherit;
  color: inherit;
}

ul[am-List] {
  max-width: 35em;
  margin: auto
}

ul[am-List] li {
    position: relative
  }

ul[am-List] li:before {
      position: absolute;
      top: 0;
      left: -1em;
      content: "・";
      color: hsl(306, 90%, 31%);
      color: var(--magenta-800);
    }

mailing-list-card {
  display: flex;
  flex-direction: column;
  border: solid 2px hsl(234, 90%, 25%);
  border: solid 2px var(--indigo-900);
  border-radius: 2em;
  max-width: 40em;
  margin: auto;
  margin-bottom: 4em;
  margin-bottom: var(--space-xx-large);
  overflow: hidden
}

mailing-list-card header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: hsl(216, 100%, 93%);
    background: var(--indigo-50);
    padding: 0.5em 1em;
    padding: var(--space-small) var(--space-medium);
    box-shadow: 0 0 2px 2px hsl(216, 100%, 93%);
    box-shadow: 0 0 2px 2px var(--indigo-50)
  }

mailing-list-card header > svg {
      height: 3em;
      width: auto;
    }

mailing-list-card header h1 {
      text-align: center;
    }

mailing-list-card header > * {
      margin-bottom: 0.5em;
      margin-bottom: var(--space-small);
    }

mailing-list-card header actions-container {
      margin-top: 0.5em;
      margin-top: var(--space-small);
    }

mailing-list-card dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    grid-gap: 1em 3em;
    grid-gap: var(--space-medium) var(--space-x-large);
    padding: 1em;
    padding: var(--space-medium)
  }

mailing-list-card dl dt {
      font-weight: 600;
      font-size: 75%;
      font-size: var(--type-x-small);
      line-height: 1.3;
    }

mailing-list-card dl dd a {
      font-size: 75%;
      font-size: var(--type-x-small)
    }

mailing-list-card dl dd a[href^="mailto:"] {
        font-size: 100%;
        font-size: var(--type-medium);
        text-decoration: none;
        color: hsl(210, 24%, 16%);
        color: var(--grey-900);
        font-weight: 300;
        font-family: 'Roboto Mono', monospace;
        font-family: var(--font-mono)
      }

mailing-list-card dl dd a[href^="mailto:"]:hover {
          color: hsl(6, 96%, 26%);
          color: var(--orange-900);
        }

mailing-list-card footer {
    background: hsl(49, 100%, 96%);
    background: var(--yellow-50);
    padding: 0.5em;
    padding: var(--space-small);
    display: flex;
    align-items: center;
    justify-content: center
  }

mailing-list-card footer a {
      text-decoration: none;
      font-weight: 600;
      color: hsl(232, 86%, 32%);
      color: var(--indigo-800)
    }

mailing-list-card footer a:hover {
        color: hsl(232, 86%, 32%);
        color: var(--indigo-800);
        text-decoration: underline;
        text-decoration-thickness: 2px;
      }

mailing-list-card footer svg {
      height: 1.6em;
      width: auto;
      margin-right: 1em;
      margin-right: var(--space-medium);
    }

message-notification {
  display: block;
  max-width: 35em;
  margin: auto;
  font-family: 'Lato', sans-serif;
  font-family: var(--font-sans-secondary);
  font-weight: 500;
  border: solid 2px;
  border-radius: 0.7em;
  padding: 0.5em;
  padding: var(--space-small);
  font-size: 85%;
  font-size: var(--type-small);
  text-align: center
}

message-notification[am-type='notice'] {
    color: hsl(234, 90%, 25%);
    color: var(--indigo-900);
    border-color: hsl(232, 86%, 32%);
    border-color: var(--indigo-800);
    background: hsl(216, 100%, 93%);
    background: var(--indigo-50);
  }

message-notification[am-type='success'] {
    color: hsl(125, 97%, 14%);
    color: var(--green-900);
    border-color: hsl(125, 86%, 20%);
    border-color: var(--green-800);
    background: hsl(125, 65%, 93%);
    background: var(--green-50);
  }

message-notification[am-type='error'] {
    color: hsl(348, 94%, 20%);
    color: var(--red-900);
    border-color: hsl(350, 94%, 28%);
    border-color: var(--red-800);
    background: hsl(360, 100%, 95%);
    background: var(--red-50);
  }

nav.pagination {
  display: flex;
  justify-content: center
}

nav.pagination ul {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1em;
    border: 1px solid hsl(210, 16%, 82%);
    border: 1px solid var(--grey-200);
    background: hsl(216, 33%, 97%);
    background: var(--grey-50);
    padding: 0.25em 0.5em;
    padding: var(--space-x-small) var(--space-small);
  }

nav.pagination li {
    font-family: 'Lato', sans-serif;
    font-family: var(--font-sans-secondary)
  }

nav.pagination li a {
      text-decoration: none;
      color: hsl(306, 90%, 31%);
      color: var(--magenta-800)
    }

nav.pagination li a:hover {
        text-decoration: underline;
        text-decoration-thickness: 0.1em;
      }

nav.pagination li ~ li {
      margin-left: 0.5em;
      margin-left: var(--space-small);
    }

[am-Panel] {
  background: hsl(216, 33%, 97%);
  background: var(--grey-50);
  border-radius: 2em;
  padding: 2em;
  padding: var(--space-large);
}

[am-Panel~="border"] {
  background: unset;
  border: 3px solid hsl(230, 80%, 38%);
  border: 3px solid var(--indigo-700);
  border-radius: 2em;
}

[am-Panel~="notice"] {
  background: hsl(216, 100%, 93%);
  background: var(--indigo-50);
  border-radius: 2em;
}

[am-Panel~="danger"] {
  background: hsl(360, 100%, 95%);
  background: var(--red-50);
  border: 2px solid hsl(348, 94%, 20%);
  border: 2px solid var(--red-900);
  border-radius: 2em;
}

toast-notification {
  opacity: 0;
  text-align: center;
  border-radius: 0.5em;
  padding: 0.25em 1em;
  padding: var(--space-x-small) var(--space-medium);
  position: fixed;
  z-index: 100;
  top: 1em;
  top: var(--space-medium);
  transition: opacity 0.25s;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  color: white;
  font-family: 'Lato', sans-serif;
  font-family: var(--font-sans-secondary);
  font-size: 85%;
  font-size: var(--type-small)
}

toast-notification[am-visible~=true] {
    opacity: 1;
  }

toast-notification[am-dismissible] {
    padding-right: 2em;
    padding-right: var(--space-large);
    pointer-events: none
  }

toast-notification[am-dismissible]:after {
      font-weight: 300;
      position: absolute;
      content: '✕';
      text-align: center;
      right: 0.6em;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      pointer-events: all;
    }

toast-notification[am-dismissible] {

    & a, button {
      pointer-events: all;
    }
  }

toast-notification[am-type~='success'] {
    background: hsl(125, 86%, 20%);
    background: var(--green-800);
  }

toast-notification[am-type~='error'] {
    background: hsl(350, 94%, 28%);
    background: var(--red-800);
  }

toast-notification[am-type~='info'] {
    background: hsl(232, 86%, 32%);
    background: var(--indigo-800);
  }

[data-tooltip] {
  position: relative;
  cursor: pointer;
}

[data-tooltip]::after {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  width: 1em;
  content: "?";
  padding: 0.1em;
  bottom: 0.1em;
  margin-left: 0.5em;
  margin-left: var(--space-small);
  border-radius: 1em;
  background: hsl(125, 86%, 20%);
  background: var(--green-800);
  color: hsl(216, 33%, 97%);
  color: var(--color-text-light);
  font-size: 75%;
  font-size: var(--type-x-small);
}

[data-tooltip]::before {
  cursor: auto;
  position: absolute;
  top: 2em;
  left: 1em;
  border-radius: 1em;
  padding: 0.25em 1em;
  padding: var(--space-x-small) var(--space-medium);
  background: hsl(234, 90%, 25%);
  background: var(--indigo-900);
  color: hsl(216, 33%, 97%);
  color: var(--color-text-light);
  font-size: 75%;
  font-size: var(--type-x-small);
  min-width: max(15em, 130%);
  text-align: center;
  z-index: 99;
}

[data-tooltip]:hover::before {
  content: attr(data-tooltip);
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}

.spin {
  animation: rotate 1s linear infinite;
}

@font-face {
    font-family: 'Hind Guntur';
    src: local('Hind Guntur Bold'), local('HindGuntur-Bold'),
        url("/assets/hind-guntur/HindGuntur-Bold-a4c72c4c.woff2") format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Italic'), local('Lato-Italic'),
        url("/assets/lato/Lato-Italic-3ef45fca.woff2") format('woff2'),
        url("/assets/lato/Lato-Italic-01f69896.woff") format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Black'), local('Lato-Black'),
        url("/assets/lato/Lato-Black-130cb186.woff2") format('woff2'),
        url("/assets/lato/Lato-Black-14831422.woff") format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Regular'), local('Lato-Regular'),
        url("/assets/lato/Lato-Regular-cf86ebb9.woff2") format('woff2'),
        url("/assets/lato/Lato-Regular-8543722d.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Bold'), local('Lato-Bold'),
        url("/assets/lato/Lato-Bold-32c4ff3c.woff2") format('woff2'),
        url("/assets/lato/Lato-Bold-c45908d4.woff") format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato-Light'),
        url("/assets/lato/Lato-Light-7309b1f6.woff2") format('woff2'),
        url("/assets/lato/Lato-Light-5d4966f1.woff") format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Lato Hairline';
    src: local('Lato-HairlineItalic'),
        url("/assets/lato/Lato-HairlineItalic-c574efe8.woff2") format('woff2'),
        url("/assets/lato/Lato-HairlineItalic-2bea4a92.woff") format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
        url("/assets/lato/Lato-BoldItalic-a6a295df.woff2") format('woff2'),
        url("/assets/lato/Lato-BoldItalic-4883a369.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Lato Hairline';
    src: local('Lato-Hairline'),
        url("/assets/lato/Lato-Hairline-c305c352.woff2") format('woff2'),
        url("/assets/lato/Lato-Hairline-9cb0925e.woff") format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato-LightItalic'),
        url("/assets/lato/Lato-LightItalic-639cb4bb.woff2") format('woff2'),
        url("/assets/lato/Lato-LightItalic-57d271b5.woff") format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Black Italic'), local('Lato-BlackItalic'),
        url("/assets/lato/Lato-BlackItalic-b3b8fad8.woff2") format('woff2'),
        url("/assets/lato/Lato-BlackItalic-61083135.woff") format('woff');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Bold'), local('RobotoMono-Bold'),
        url("/assets/roboto-mono/RobotoMono-Bold-9562e4a6.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-Bold-5349c407.woff") format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Bold Italic'), local('RobotoMono-BoldItalic'),
        url("/assets/roboto-mono/RobotoMono-BoldItalic-85844290.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-BoldItalic-96c358b6.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono ExtraLight'), local('RobotoMono-ExtraLight'),
        url("/assets/roboto-mono/RobotoMono-ExtraLight-b84207f2.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-ExtraLight-4116806b.woff") format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Thin'), local('RobotoMono-Thin'),
        url("/assets/roboto-mono/RobotoMono-Thin-f8d418ad.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-Thin-63503544.woff") format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Light Italic'), local('RobotoMono-LightItalic'),
        url("/assets/roboto-mono/RobotoMono-LightItalic-2224f64f.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-LightItalic-ef31a603.woff") format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono ExtraLight Italic'), local('RobotoMono-ExtraLightItalic'),
        url("/assets/roboto-mono/RobotoMono-ExtraLightItalic-3deed60e.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-ExtraLightItalic-f8ebdf62.woff") format('woff');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Light'), local('RobotoMono-Light'),
        url("/assets/roboto-mono/RobotoMono-Light-46e9f8a9.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-Light-019f1807.woff") format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono SemiBold Italic'), local('RobotoMono-SemiBoldItalic'),
        url("/assets/roboto-mono/RobotoMono-SemiBoldItalic-61f22d5e.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-SemiBoldItalic-381f3efe.woff") format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Medium Italic'), local('RobotoMono-MediumItalic'),
        url("/assets/roboto-mono/RobotoMono-MediumItalic-e171e1bd.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-MediumItalic-ac0caab0.woff") format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Italic'), local('RobotoMono-Italic'),
        url("/assets/roboto-mono/RobotoMono-Italic-e845096e.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-Italic-e781de6e.woff") format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono SemiBold'), local('RobotoMono-SemiBold'),
        url("/assets/roboto-mono/RobotoMono-SemiBold-5632b57f.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-SemiBold-b2a1bd0d.woff") format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Regular'), local('RobotoMono-Regular'),
        url("/assets/roboto-mono/RobotoMono-Regular-260b86c0.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-Regular-b810c131.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Thin Italic'), local('RobotoMono-ThinItalic'),
        url("/assets/roboto-mono/RobotoMono-ThinItalic-7da4d505.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-ThinItalic-e0be4950.woff") format('woff');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Medium'), local('RobotoMono-Medium'),
        url("/assets/roboto-mono/RobotoMono-Medium-a6e7feca.woff2") format('woff2'),
        url("/assets/roboto-mono/RobotoMono-Medium-21fbd178.woff") format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Black Italic'), local('WorkSans-BlackItalic'),
        url("/assets/work-sans/WorkSans-BlackItalic-df6ab33a.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-BlackItalic-cd5b28bf.woff") format('woff');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Bold'), local('WorkSans-Bold'),
        url("/assets/work-sans/WorkSans-Bold-d6bb4790.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-Bold-95d2c3ec.woff") format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Black'), local('WorkSans-Black'),
        url("/assets/work-sans/WorkSans-Black-fa40f777.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-Black-12fe555d.woff") format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Bold Italic'), local('WorkSans-BoldItalic'),
        url("/assets/work-sans/WorkSans-BoldItalic-2ad30212.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-BoldItalic-75146079.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans ExtraBold'), local('WorkSans-ExtraBold'),
        url("/assets/work-sans/WorkSans-ExtraBold-dc77c87f.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-ExtraBold-8fdf169b.woff") format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans ExtraLight'), local('WorkSans-ExtraLight'),
        url("/assets/work-sans/WorkSans-ExtraLight-adedd998.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-ExtraLight-159fcd27.woff") format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Italic'), local('WorkSans-Italic'),
        url("/assets/work-sans/WorkSans-Italic-d855cb24.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-Italic-c0faf818.woff") format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans ExtraLight Italic'), local('WorkSans-ExtraLightItalic'),
        url("/assets/work-sans/WorkSans-ExtraLightItalic-e29f25b3.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-ExtraLightItalic-7f62a9f1.woff") format('woff');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans ExtraBold Italic'), local('WorkSans-ExtraBoldItalic'),
        url("/assets/work-sans/WorkSans-ExtraBoldItalic-dd97d655.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-ExtraBoldItalic-dbc241c2.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Light Italic'), local('WorkSans-LightItalic'),
        url("/assets/work-sans/WorkSans-LightItalic-acf3499f.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-LightItalic-6e3bbcbd.woff") format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Medium Italic'), local('WorkSans-MediumItalic'),
        url("/assets/work-sans/WorkSans-MediumItalic-4405cedb.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-MediumItalic-7c1b38f3.woff") format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Light'), local('WorkSans-Light'),
        url("/assets/work-sans/WorkSans-Light-fe483d19.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-Light-8032c646.woff") format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Medium'), local('WorkSans-Medium'),
        url("/assets/work-sans/WorkSans-Medium-69b66ec8.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-Medium-f9611d6a.woff") format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans SemiBold'), local('WorkSans-SemiBold'),
        url("/assets/work-sans/WorkSans-SemiBold-ce612fd6.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-SemiBold-d159f6b3.woff") format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Thin'), local('WorkSans-Thin'),
        url("/assets/work-sans/WorkSans-Thin-57451b4f.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-Thin-26a54bfd.woff") format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Regular'), local('WorkSans-Regular'),
        url("/assets/work-sans/WorkSans-Regular-24a8e205.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-Regular-a400b56c.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans SemiBold Italic'), local('WorkSans-SemiBoldItalic'),
        url("/assets/work-sans/WorkSans-SemiBoldItalic-a1f38089.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-SemiBoldItalic-f8b58739.woff") format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Work Sans';
    src: local('Work Sans Thin Italic'), local('WorkSans-ThinItalic'),
        url("/assets/work-sans/WorkSans-ThinItalic-cdfa765c.woff2") format('woff2'),
        url("/assets/work-sans/WorkSans-ThinItalic-314ea22f.woff") format('woff');
    font-weight: 100;
    font-style: italic;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
  padding: 1em;
  padding: var(--space-medium);
}

hr {
  border: none;
  height: 2px;
  background: hsl(234, 90%, 25%);
  background: var(--indigo-900);
  margin: auto
}

hr[am-size~="medium"] {
    width: 80%;
  }

hr[am-size~="small"] {
    width: 40%;
  }

layout-container {
  display: block;
  margin: auto
}

layout-container[am-size~="large"] {
    max-width: min(50em, 100%);
  }

layout-container[am-size~="medium"] {
    max-width: min(40em, 100%);
  }

layout-container[am-size~="small"] {
    max-width: min(35em, 100%);
  }

layout-rows {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

layout-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

layout-columns.gap-small {
  grid-gap: 0.5em;
  gap: 0.5em;
  grid-gap: var(--space-small);
  gap: var(--space-small);
}

layout-columns[am-position~='center'] {
  justify-content: center;
}

layout-columns[am-position~='right'] {
  justify-content: flex-end;
}

.hidden {
  display: none;
}

logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Hind Guntur', sans-serif;
  font-family: var(--font-logo);
  font-size: 125%;
  font-size: var(--type-large);
  font-weight: bold;
  letter-spacing: 1px
}

logo-container span.indigo {
    color: hsl(232, 86%, 32%);
    color: var(--indigo-800);
  }

logo-container span.magenta {
    color: hsl(306, 90%, 31%);
    color: var(--magenta-800);
  }

logo-container .logo {
    height: auto;
    -o-object-fit: scale-down;
       object-fit: scale-down;
    padding: 0.25em;
    padding: var(--space-x-small);
  }

.block {
  display: block;
}

body.landing h1 {
    color: hsl(234, 90%, 25%);
    color: var(--indigo-900);
  }

body.login > header nav {
    display: none !important;
  }

layout-container.create-mailing-list {
  text-align: center
}

layout-container.create-mailing-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lato', sans-serif;
    font-family: var(--font-sans-secondary);
    font-size: 125%;
    font-size: var(--type-large);
    margin: auto;
    border: solid 2px hsl(6, 96%, 26%);
    border: solid 2px var(--orange-900);
    border-radius: 1em;
    padding: 1em 2em;
    padding: var(--space-medium) var(--space-large);
    color: hsl(8, 92%, 35%);
    color: var(--orange-800);
  }

layout-container.create-mailing-list svg {
    width: 2em;
    height: auto;
    margin-right: 0.5em;
    margin-right: var(--space-small)
  }

layout-container.create-mailing-list svg .primary {
      fill: hsl(8, 92%, 35%);
      fill: var(--orange-800);
    }

layout-container.create-mailing-list svg .secondary {
      fill: white;
    }

body > footer:not(.public) {
  --color: var(--indigo-900);

  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.25em;
  padding: var(--space-x-small);
  background: hsl(216, 33%, 97%);
  background: var(--grey-50);
  max-width: 100vw;
  box-sizing: border-box;
  margin-top: 2em;
  margin-top: var(--space-large)
}

body > footer:not(.public) a {
    text-decoration: none;
    color: var(--color)
  }

body > footer:not(.public) a:hover {
      color: var(--color);
      text-decoration: underline;
      text-decoration-thickness: 2px;
    }

body > footer:not(.public) > div {
    display: flex;
    flex-direction: column;
    flex: 2 0 auto;
  }

body > footer:not(.public) copyright-notice {
    font-size: 75%;
    font-size: var(--type-x-small)
  }

body > footer:not(.public) p {
    font-size: 65%;
    font-size: var(--type-xx-small);
    max-width: 100vw;
    margin: 0;
  }

body > footer:not(.public) ul.socials {
    display: flex;
    flex: 1 0 auto;
    justify-content: flex-end;
    align-items: center;
    grid-gap: 0.5em;
    gap: 0.5em;
    grid-gap: var(--space-small);
    gap: var(--space-small);
  }

body > footer:not(.public) ul.documents {
    display: flex;
    flex: 1 0 auto;
    justify-content: flex-end;
    align-items: center;
    font-size: 85%;
    font-size: var(--type-small);
    font-weight: 400
  }

body > footer:not(.public) ul.documents > li ~ li {
      margin-left: 0.5em;
      margin-left: var(--space-small)
    }

body > footer:not(.public) ul.documents > li ~ li:before {
        color: var(--color);
        content: "| ";
      }

body > footer:not(.public) ul.documents svg {
      display: block;
      fill: var(--color);
    }

form:not(.button_to):not(.vanilla) {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: auto;
  align-items: center;
  justify-content: center;
  width: unset;
  max-width: 25em
}

form:not(.button_to):not(.vanilla) text-field-container {
    width: auto;
    min-width: 15em;
  }

form:not(.button_to):not(.vanilla) > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p) {
    justify-content: center;
    margin-top: 1em;
    margin-top: var(--space-medium);
  }

form:not(.button_to):not(.vanilla) label {
    display: inline-block;
    font-size: 75%;
    font-size: var(--type-x-small);
    font-weight: 400;
  }

form:not(.button_to):not(.vanilla) {

  textarea {
    width: 100%;
    box-sizing: border-box;
  }
}

form:not(.button_to):not(.vanilla) button[type="submit"] {
    width: 20em;
    font-size: 125%;
    font-size: var(--type-large);
    margin: 1em;
    margin: var(--space-medium);
    margin-top: 2em;
    margin-top: var(--space-large);
  }

form:not(.button_to):not(.vanilla) nested-field-container {
    position: relative
  }

form:not(.button_to):not(.vanilla) nested-field-container button {
      position: absolute;
      top: 50%;
      left: 100%;
      border: none;
      transform: translateY(-50%);
      background: transparent
    }

form:not(.button_to):not(.vanilla) nested-field-container button:active {
        transform: translateY(-50%);
      }

form:not(.button_to):not(.vanilla) nested-field-container button svg {
        width: 4em;
        fill: hsl(8, 92%, 35%);
        fill: var(--orange-800);
        height: auto;
      }

form:not(.button_to):not(.vanilla) nested-field-container:first-of-type button {
      display: none;
    }

form:not(.button_to):not(.vanilla) {

  span[am-text~='error'] {
    max-width: 30ch;
  }
}

input[type='text'],
input[type='email'],
input[type='password'],
textarea {
  font-size: 100%;
  font-size: var(--type-medium);
  border-radius: 0.6em;
  border: solid 2px hsl(209, 20%, 25%);
  border: solid 2px var(--grey-800);
  padding: 0.5em;
  padding: var(--space-small);
  outline: none
}

input[type='text']::-moz-placeholder, input[type='email']::-moz-placeholder, input[type='password']::-moz-placeholder, textarea::-moz-placeholder {
    font-family: 'Lato', sans-serif;
    font-family: var(--font-sans-secondary);
  }

input[type='text']::placeholder, input[type='email']::placeholder, input[type='password']::placeholder, textarea::placeholder {
    font-family: 'Lato', sans-serif;
    font-family: var(--font-sans-secondary);
  }

input[type='text']:focus, input[type='email']:focus, input[type='password']:focus, textarea:focus {
    border-color: hsl(306, 85%, 43%);
    border-color: var(--magenta-600)
  }

input[type='text']:focus::-moz-placeholder, input[type='email']:focus::-moz-placeholder, input[type='password']:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
      color: hsl(306, 88%, 37%);
      color: var(--magenta-700);
    }

input[type='text']:focus::placeholder, input[type='email']:focus::placeholder, input[type='password']:focus::placeholder, textarea:focus::placeholder {
      color: hsl(306, 88%, 37%);
      color: var(--magenta-700);
    }

input[type='text'][am-type~='large'], input[type='email'][am-type~='large'], input[type='password'][am-type~='large'], textarea[am-type~='large'] {
    font-size: 125%;
    font-size: var(--type-large);
  }

input[type='text'][am-state~='error'], input[type='email'][am-state~='error'], input[type='password'][am-state~='error'], textarea[am-state~='error'] {
    border-color: hsl(354, 85%, 44%);
    border-color: var(--red-600)
  }

input[type='text'][am-state~='error'] ~ label, input[type='email'][am-state~='error'] ~ label, input[type='password'][am-state~='error'] ~ label, textarea[am-state~='error'] ~ label {
      color: hsl(352, 90%, 35%);
      color: var(--red-700);
    }

text-field-container {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start
}

text-field-container label {
    line-height: 1.8;
    margin-left: 0.6em
  }

text-field-container label[am-type~='large'] {
      font-size: 100%;
      font-size: var(--type-medium);
      margin-left: unset;
      align-self: center;
    }

text-field-container[am-type~="icon"] {
    flex-direction: row;
    position: relative
  }

text-field-container[am-type~="icon"] input {
      padding-left: 2.5em;
    }

text-field-container[am-type~="icon"] svg {
      position: absolute;
      width: 1.5em;
      height: auto;
      left: 0.5em;
      left: var(--space-small);
      top: 50%;
      transform: translateY(-50%)
    }

text-field-container[am-type~="icon"] svg .primary {
        fill: hsl(216, 33%, 97%);
        fill: var(--grey-50);
      }

text-field-container[am-type~="icon"] svg .secondary {
        fill: hsl(209, 20%, 25%);
        fill: var(--grey-800);
      }

checkbox-container {
  display: flex;
  justify-content: flex-start
}

checkbox-container input[type='checkbox'] {
    width: 3em !important;
  }

checkbox-container label {
    font-size: 85%;
    font-size: var(--type-small);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

form.button_to {
  width: 100%
}

form.button_to button {
    width: 100%;
  }

textarea {
  height: 8em;
  font-size: 85%;
  font-size: var(--type-small);
  resize: none
}

textarea::-moz-placeholder {
    font-size: 75%;
    font-size: var(--type-x-small);
    font-family: 'Roboto Mono', monospace;
    font-family: var(--font-mono);
  }

textarea::placeholder {
    font-size: 75%;
    font-size: var(--type-x-small);
    font-family: 'Roboto Mono', monospace;
    font-family: var(--font-mono);
  }

button.submit {
  width: 20em;
  font-size: 125%;
  font-size: var(--type-large);
  margin: 0.5em;
  margin: var(--space-small);
}

form {
  label.file {
    cursor: pointer;
    display: flex !important;
    align-items: center;
    grid-gap: 1em;
    gap: 1em;
    grid-gap: var(--space-medium);
    gap: var(--space-medium);

    svg {
      height: 1.5em;
      fill:  hsl(210, 24%, 16%);
      fill:  var(--grey-900);
    }
  }

  span.filename {
    font-family: 'Roboto Mono', monospace;
    font-family: var(--font-mono);
  }
}

body > header:not(.public) {
  padding: 0.5em 1em 0.25em;
  padding: var(--space-small) var(--space-medium) var(--space-x-small);
  display: flex;
  width: 100vw;
  box-sizing: border-box;
  border-bottom: solid 2px hsl(127, 65%, 85%);
  border-bottom: solid 2px var(--green-100);
  align-items: center;
  margin-bottom: 1em;
  margin-bottom: var(--space-medium)
}

body > header:not(.public) logo-container .logo {
    width: 5rem;
  }

body > header:not(.public) div {
    flex: 1 0 auto;
  }

body > header:not(.public) .dropdown summary {
      border: solid 2px hsl(294, 97%, 88%);
      border: solid 2px var(--magenta-100);
      border-radius: 1em;
      padding: 0.25em 0.5em;
      padding: var(--space-x-small) var(--space-small);
      display: flex;
      align-items: center;
      line-height: 1;
    }

body > header:not(.public) .dropdown user-name {
      font-family: 'Lato', sans-serif;
      font-family: var(--font-sans-secondary);
      font-weight: 500;
      color: hsl(234, 90%, 25%);
      color: var(--indigo-900);
      margin-top: 0.2em
    }

body > header:not(.public) .dropdown user-name:after {
        --size: 3rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        content: attr(initials);
        font-size: 65%;
        font-size: var(--type-xx-small);
        background: hsl(216, 100%, 93%);
        background: var(--indigo-50);
        color: hsl(125, 97%, 14%);
        color: var(--green-900);
        border-radius: 10em;
        height: var(--size);
        width: var(--size);
        line-height: var(--size);
        margin-left: 10px;
        box-sizing: border-box;
        text-align: center;
        transform: translateY(-0.2em);
      }

body > header:not(.public) .dropdown[open] summary {
      background: hsl(306, 90%, 31%);
      background: var(--magenta-800);
      border: solid 2px hsl(308, 91%, 23%);
      border: solid 2px var(--magenta-900)
    }

body > header:not(.public) .dropdown[open] summary user-name {
        color: hsl(216, 33%, 97%);
        color: var(--color-text-light);
      }

body > header:not(.public) .dropdown ul {
      width: 8em;
      right: 2em;
      right: var(--space-large);
      margin-top: 0.25em;
      margin-top: var(--space-x-small);
      border: solid 2px hsl(306, 90%, 31%);
      border: solid 2px var(--magenta-800);
      border-radius: 0.8em;
      background: hsl(294, 100%, 96%);
      background: var(--magenta-50);
      padding: 0.5em;
      padding: var(--space-small)
    }

body > header:not(.public) .dropdown ul hr {
        background: hsl(306, 90%, 31%);
        background: var(--magenta-800);
        border: none;
        height: 2px;
        opacity: 0.8;
      }

body > header:not(.public) .dropdown ul li > * {
          padding: 0.5em 0;
          padding: var(--space-small) 0;
        }

body > header:not(.public) .dropdown ul li [am-Link] {
          font-size: 85%;
          font-size: var(--type-small);
          font-weight: 500;
          display: flex;
          align-items: center;
          color: hsl(210, 24%, 16%);
          color: var(--color-text)
        }

body > header:not(.public) .dropdown ul li [am-Link]:hover {
            color: hsl(232, 86%, 32%);
            color: var(--indigo-800);
          }

body > header:not(.public) .dropdown ul li .icon {
          margin-right: 0.5em;
          margin-right: var(--space-small)
        }

body > header:not(.public) .dropdown ul li .icon .primary {
            fill: hsl(308, 91%, 23%);
            fill: var(--magenta-900)
          }

body > header:not(.public) .dropdown ul li .icon .secondary {
            fill: hsl(306, 90%, 31%);
            fill: var(--magenta-800);
          }

body > header.public {
  border-top: 4px solid hsl(306, 88%, 37%);
  border-top: 4px solid var(--magenta-700)
}

body > header.public logo-container .logo {
      width: 3.5em;
      margin-right: 0.5em;
      margin-right: var(--space-small);
    }

body > header.public logo-container > span {
      font-size: 200%;
      font-size: var(--type-xx-large);
    }

body > header.public nav {
    background: hsl(216, 100%, 93%);
    background: var(--indigo-50);
    display: flex;
    justify-content: center;
    padding: 0.25em 0;
    padding: var(--space-x-small) 0;
    position: relative
  }

body > header.public nav ul {
      display: flex
    }

body > header.public nav ul a {
        text-decoration: none;
      }

body > header.public nav ul li ~ li {
        margin-left: 1em;
        margin-left: var(--space-medium);
      }

body > header.public nav > span {
      position: absolute;
      justify-self: flex-end;
      right: 2em;
      right: var(--space-large);
      top: 50%;
      transform: translateY(-50%);
    }

body.landing .dashboard-demo {
    margin: auto;
    width: 98%;
  }

nav {

}

body.public messages-notifications-container {
    margin-top: 2em;
    margin-top: var(--space-large);
  }

body.public h1 {
    max-width: 20em;
    margin-left: auto;
    margin-right: auto;
  }

body.public logo-container .logo {
    width: 8rem;
  }

.subscribers__search_bar {
  max-width: unset !important;

  > text-field-container {
    width: 100% !important;
  }

  input {
    width: 100%;
  }
}

subscribers-container {
  display: block
}

subscribers-container ul.subscribers-list[am-Panel] {
      padding: 0.5em 2em;
      padding: var(--space-small) var(--space-large);
    }

subscribers-container ul.subscribers-list > li {
      display: flex;
      align-items: center
    }

subscribers-container ul.subscribers-list > li layout-columns {
        flex: 1 1 auto;
        overflow: hidden;
      }

subscribers-container ul.subscribers-list > li:not(:last-child) {
        border-bottom: 1px solid hsl(210, 16%, 82%);
        border-bottom: 1px solid var(--grey-200);
      }

subscribers-container ul.subscribers-list subscriber-name {
      flex: 0 0 10em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

subscribers-container ul.subscribers-list subscriber-email {
      flex: 1 1 15em;
      min-width: 10em;
      font-family: 'Roboto Mono', monospace;
      font-family: var(--font-mono);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

subscribers-container ul.subscribers-list form {
      flex: 0 0 8em;
      margin: unset;
    }

subscribers-container ul.subscribers-list button {
      font-size: 85% !important;
      font-size: var(--type-small) !important;
      width: 8em !important;
    }

article.support details {
    background: hsl(216, 33%, 97%);
    background: var(--grey-50);
    margin: 0.5em;
    margin: var(--space-small);
    padding: 0.5em 1em;
    padding: var(--space-small) var(--space-medium);
    border-radius: 1em;
    font-size: 85%;
    font-size: var(--type-small)
  }

article.support details[open] {
      margin-bottom: 2em;
      margin-bottom: var(--space-large);
    }

article.support details > summary {
      cursor: pointer;
      font-weight: 500;
      font-size: 100%;
      font-size: var(--type-medium);
    }

svg.icon {
  height: 1em;
  width: auto;
}

svg.icon--medium {
  height: 2em;
}

svg.icon--large {
  height: 3em;
}

svg.illustration {
  height: 60vh;
  max-width: 80vw;
}

article.legalese {
  ul {
    list-style: disc;
    margin-left: 2em;
    margin-left: var(--space-large);

    li ~ li {
      margin-top:  0.5em;
      margin-top:  var(--space-small);
    }
  }
}