/* --- Fonts --- */

@font-face {
  font-family:    "Atkinson Hyperlegible Next";
  src:
    url("fonts/atkinson/AtkinsonHyperlegibleNext-VariableFont_wght-Latin.woff2")
    format("woff2");
  font-weight:    200 700;
  font-style:     normal;
  font-display:   swap;
  unicode-range:  U+0000-00FF;
}

@font-face {
  font-family:    "Atkinson Hyperlegible Next";
  src:
    url("fonts/atkinson/AtkinsonHyperlegibleNext-Italic-VariableFont_wght-Latin.woff2")
    format("woff2");
  font-weight:    200 700;
  font-style:     italic;
  font-display:   swap;
  unicode-range:  U+0000-00FF;
}

@font-face {
  font-family:    "Lora";
  src:            url("fonts/lora/Lora-VariableFont_wght.woff2") format("woff2");
  font-weight:    200 700;
  font-style:     normal;
  font-display:   swap;
  unicode-range:  U+0000-00FF;
}

@font-face {
  font-family:    "Lora";
  src:            url("fonts/lora/Lora-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight:    200 700;
  font-style:     italic;
  font-display:   swap;
  unicode-range:  U+0000-00FF;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/dmsans/DMSans-Latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/dmsans/DMSans-Italic-Latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "mso";
  src: url("fonts/mso/MaterialSymbolsOutlined-static.woff2")
      format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
    font-family: "Ubuntu Min";
    src: url("fonts/ubuntu-min/ubuntu-min.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
}


/* --- Keyframes --- */

@keyframes ctaWallShake {
    0%, 100% { transform: translateX(5%) rotate(0); }
    25%      { transform: translateX(5%) rotate(-1.5deg); }
    50%      { transform: translateX(5%) rotate(1.5deg); }
    75%      { transform: translateX(5%) rotate(-1deg); }
}


/* --- Variables ---  */

:root.color-light {

  --baseBG:           #fffafa;
  --baseText:         #303030;
  --baseDecoration:   #ffb300;
  --baseOverDecor:    #303030;
  --baseShadow:       #707070;

  --linkLink:         #3366CC;
  --linkVisited:      #3366CC;
  --linkHover:        #ffb300;
  --linkActive:       #ba0000; /* Firebrick */

  --btnPrimaryBG:     #0d6efd;
  --btnPrimaryBorder: #0d6efd;
  --btnPrimaryText:   #ffffff;

  --btnSuccessBG:     #198754;
  --btnSuccessBorder: #198754;
  --btnSuccessText:   #ffffff;

  --btnDangerBG:      #dc3545;
  --btnDangerBorder:  #dc3545;
  --btnDangerText:    #ffffff;

  --btnWarningBG:     #ffc107;
  --btnWarningBorder: #303030;
  --btnWarningText:   #303030;

  --imgBright:        100%;
  --imgContrast:      100%;

  --footerBG:         #232629;
  --footerBorder:     #ffb300;
  --footerText:       #babfc4;

  --footerLink:       #ffb300;
  --footerVisited:    #ffb300;
  --footerHover:      #f0f0f0;
  --footerActive:     #ffb300;

  --gdprBG:           #000000;
  --gdprText:         #fffffa;

  --gdprLink:         #008080;
  --gdprVisited:      #007070;
  --gdprHover:        #a00000;
  --gdprActive:       #ffb300;

  --signalAlert:      #ff9900; /* DarkOrange */
  --signalDanger:     #f00;

}

:root.color-paper {

  --baseBG:           #ffefd5;     /* PapayaWhip */
  --baseText:         #3a332a;   /* warm charcoal, ink-like */
  --baseDecoration:   #b08d3a;   /* muted ochre, aged gold */
  --baseOverDecor:    #303030;
  --baseShadow:       #6a6257;

  --linkLink:         #425a75;  /* iron-blue ink */
  --linkVisited:      #4a4a5f;
  --linkHover:        #7a3f1d;  /* warm rust */
  --linkActive:       #5a1f1f;

  --btnPrimaryBG:     #2f5fa5;
  --btnPrimaryBorder: #2f5fa5;
  --btnPrimaryText:   #fdfcf7;

  --btnSuccessBG:     #4e7f5b;
  --btnSuccessBorder: #4e7f5b;
  --btnSuccessText:   #fdfcf7;

  --btnDangerBG:      #9a3b3b;
  --btnDangerBorder:  #9a3b3b;
  --btnDangerText:    #fdfcf7;

  --btnWarningBG:     #c9a24d;
  --btnWarningBorder: #3a332a;
  --btnWarningText:   #3a332a;

  --imgBright:        0.95;
  --imgContrast:      0.95;

  --footerBG:         #2a2a2a;
  --footerBorder:     #b08d3a;
  --footerText:       #c9c4ba;

  --footerLink:       #b08d3a;
  --footerVisited:    #b08d3a;
  --footerHover:      #f0e6c8;
  --footerActive:     #b08d3a;

  --gdprBG:           #000000d7;
  --gdprText:         #fffffa;

  --gdprLink:         #2f7f7a;
  --gdprVisited:      #2a6f6a;
  --gdprHover:        #7a1f1f;
  --gdprActive:       #b08d3a;

  --signalAlert:      #b35c1e;
  --signalDanger:     #8b2c2c;

}

:root.color-dark {

  --baseBG:           #151515;
  --baseText:         #bcc9d6;
  --baseDecoration:   #c0901e;
  --baseOverDecor:    #151515;
  --baseShadow:       #707070;

  --linkLink:         #87cefa; /* LightSkyBlue */
  --linkVisited:      #87cefa; /* LightBlue */
  --linkHover:        #ffb300; /* DarkOrange */
  --linkActive:       #fa8072; /* Salmon */

  --btnPrimaryBG:     #0553bd;
  --btnPrimaryBorder: #0553bd;
  --btnPrimaryText:   #ffffff;

  --btnSuccessBG:     #146640;
  --btnSuccessBorder: #146640;
  --btnSuccessText:   #ffffff;

  --btnDangerBG:      #a22d38;
  --btnDangerBorder:  #a22d38;
  --btnDangerText:    #ffffff;

  --btnWarningBG:     #b9921e;
  --btnWarningBorder: #ffffff;
  --btnWarningText:   #ffffff;

  --imgBright:        0.8;
  --imgContrast:      1.2;

  --footerBG:         #232629;
  --footerBorder:     #ffb300;
  --footerText:       #babfc4;

  --footerLink:       #ffb300;
  --footerVisited:    #ffb300;
  --footerHover:      #f0f0f0;
  --footerActive:     #ffb300;

  --gdprBG:           #000000d7;
  --gdprText:         #f2f2f2;

  --gdprLink:         #008080;
  --gdprVisited:      #007070;
  --gdprHover:        #a00000;
  --gdprActive:       #ffb300;

  --signalAlert:      #ff8c00; /* DarkOrange */
  --signalDanger:     #cd5c5c; /* IndianRed */

}


/* --- Initial system colour scheme before JavaScript sets the theme class. --- */

@media (prefers-color-scheme: light) {

  :root:not(.color-light):not(.color-dark):not(.color-paper) {
    --baseBG:   #fffafa;
    --baseText: #303030;
  }

}

@media (prefers-color-scheme: dark) {

  :root:not(.color-light):not(.color-dark):not(.color-paper) {
    --baseBG:   #151515;
    --baseText: #bcc9d6;
  }

}


/* --- Viewport-adaptive base font size and default scale --- */
:root {
  --font-root-base:   clamp(16px, 0.6vw + 13.75px, 22px);
  --font-root-scale:  1;
}

/* --- User-selectable font-size multiplier --- */

:root.font-xsmall { --font-root-scale: 0.90; }
:root.font-small  { --font-root-scale: 0.95; }
:root.font-medium { --font-root-scale: 1.00; }
:root.font-large  { --font-root-scale: 1.10; }
:root.font-xlarge { --font-root-scale: 1.20; }

/* --- Final root font size --- */
:root { --font-root-size: calc(var(--font-root-base) * var(--font-root-scale)); }

/* --- Font families per purpose: --- */
:root {

  --font-modern:  "DM Sans", system-ui, sans-serif;
  --font-comfort: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-classic: "Lora", Georgia, serif;

  --font-ui:      var(--font-modern);

}


/* --- Resets --- */

* {
  margin: 0;
  padding: 0;
}

*:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

*, *::before, *::after { box-sizing: border-box; }


/* --- Fundamental elements --- */

html {

  height:           100%;
  margin:           0;
  padding:          0;
  scroll-behavior:  smooth;

  font-size:        var(--font-root-size);

  background-color: var(--baseBG);

  /* Triggers for background-specific elements (MAY BE OBSOLETE) */
  &.color-dark   .show-on-dark   { display: block; }
  &.color-light  .show-on-light  { display: block; }
  &.color-paper  .show-on-paper  { display: block; }

}


body {

  height:   100%;
  margin:   0;
  padding:  0;

  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;

  font-family:      var(--font-ui);
  font-size:        1rem;

  background-color: var(--baseBG);
  color:            var(--baseText);

  transition:       filter 0.5s ease-out;

  &.blurred         { filter: blur(3rem);  }
  &.unblur          { animation: unblur 1s; }

  .font-logo {
    font-family: "Ubuntu Min", sans-serif;
    font-weight: 300;
  }

  .font-slogan {
      font-family: "Ubuntu Min", sans-serif;
      font-weight: 500;
  }


}

input, button, textarea, select { font: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

button { cursor: pointer; }

.show-on-dark, .show-on-light, .show-on-paper {display: none;}


/* --- Top-level elements --- */

header {

  border-style: solid;
  border-width: 0 0 0.125rem 0;
  padding:      0.75rem 4vw;
  display:      grid;
    align-items:            center;
    grid-template-columns:  auto auto 1fr auto;
    grid-template-areas:
     "menu logo nav avatar";

    @media only screen and (max-width: 711px) {
      grid-template-columns:  1fr auto 1fr;
      grid-template-areas:
        "menu logo avatar"
        "nav nav nav";
    }

  background-color: var(--baseBG);
  border-color:     var(--baseShadow);

  button {
    grid-area:    menu;
    justify-self: start;

    display:          none;
      align-items:      center;
      justify-content:  center;
    line-height:      1;

    font-size: 1.8rem;

    @media only screen and (max-width: 711px) {
      display: inline-flex;
    }

  }

  .domain-logo {

    grid-area: logo;

    text-decoration: none;

    color: var(--baseText);

    .domain-logo-name {

      border-bottom-style:  solid;
      border-bottom-width:  0.12rem;
      display:              block;
      padding-bottom:       0.08rem;

      font-family:  "Ubuntu Min", sans-serif;
      font-size:    1.2rem;
      font-weight:  400;
      line-height:  1;
      white-space:  nowrap;

      border-bottom-color: var(--baseDecoration);

    }

    &:visited,
    &:hover,
    &:focus,
    &:active {
      text-decoration:  none;
      color:            var(--baseText);
    }

  }

  nav {

    grid-area:    nav;
    justify-self: end;

    ol {

      display:          flex;
        flex-direction:   row;
        flex-grow:        1;
        flex-wrap:        nowrap;
        justify-content:  end;
      margin-right:     1rem;

      li {

        border-style:   solid;
        border-width:   0 0 0 3px;
        margin-right:   0.5em;
        padding:        0 0 0 0.5em;
        line-height:    1;
        list-style:     none;

        font-size:      0.7em;
        letter-spacing: 0.05em;
        font-weight:    bold;

        border-color:   var(--baseDecoration);

      }

    }

    @media only screen and (max-width: 711px) {

      justify-self: start;

      display:          flex;
        flex-direction:   column;
        justify-content:  start;

      margin-top: 0;

      max-height: 0;
      overflow:   hidden;

      opacity:        0;
      pointer-events: none;
      transform:      translateY(-0.5rem);

      transition:
        max-height 1.35s ease,
        opacity    1.25s ease,
        margin-top 1.25s ease;

      ol {
        border:           none;
          flex-direction:   column;
          justify-content:  start;
        padding:          0;

        li {
          font-size:  0.9em;
          margin:     0.7em 0 0.7em 0.5em;
        }

      }

    }

  }

  > #aAvatar {
    grid-area: avatar;
    justify-self: end;

    display: none;

    img {
      border-radius:  50%;
      border-color:   var(--baseBG);
      border-style:   solid;
      border-width:   0.05rem;
      height:         1.6rem;
      width:          auto;

      &:hover { border-color: var(--baseDecoration); }
    }

    span.mso {
      color:            var(--baseText);
      background-color: var(--baseOverDecor);
      border-color:     var(--baseDecoration);

      &:hover { color: var(--baseDecoration); }
    }

  }

  &.menu-open nav {
    margin-top:     1.5rem;
    max-height:     50vh;
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(0);
  }

}


main {

  min-height: 70vh;
  width:      100%;
  hyphens:    auto;

  .link         { color: var(--linkLink); cursor: pointer; }
  .link:hover   { color: var(--linkHover); }

  a             { color: var(--linkLink); text-decoration: none;}
  a:visited     { color: var(--linkVisited); }
  a:hover       { color: var(--linkHover); text-decoration: underline;}
  a:focus       { color: var(--linkFocus); text-decoration: underline; }
  a:active      { color: var(--linkActive); }

  &.text-align-left { text-align: left; }
  &.text-align-both { text-align: justify; }

  &.line-height-large  { line-height: 1.8; }
  &.line-height-medium { line-height: 1.6; }
  &.line-height-small  { line-height: 1.4; }

  &.font-modern,
  &.font-comfort,
  &.font-classic  { font-family: var(--font-ui); }

  &.page-margin-narrow ,
  &.page-margin-wide { padding: 0 0 2rem 0; }

  h2 {
    margin: 4rem auto 2rem auto;
    letter-spacing: 0.1rem;
    text-align: center;
  }


  /* -- (Some good) types -- */

  button {

    border-style:         solid;
    border-width:         1px;
    border-radius:        0.25rem;

    cursor:               pointer;
    display:              inline-block;
    height:               2.5rem;
    width:                5rem;

    font-size:            1rem;
    font-weight:          400;
    line-height:          1;
    text-align:           center;
    text-decoration:      none;


    background-color:     transparent;
    border-top-color:     transparent;
    border-right-color:   transparent;
    border-bottom-color:  transparent;
    border-left-color:    transparent;

    color:                #212529;

    transition:           background-color 0.15s ease-in-out,
                          border-color 0.15s ease-in-out,
                          box-shadow 0.15s ease-in-out,
                          color 0.15s ease-in-out;

    &.primary {

      background-color: var(--btnPrimaryBG);
      border-color:     var(--btnPrimaryBorder);
      color:            var(--btnPrimaryText);

    }

    &.success {

      background-color: var(--btnSuccessBG);
      border-color:     var(--btnSuccessBorder);
      color:            var(--btnSuccessText);

    }

    &.danger {

      background-color: var(--btnDangerBG);
      border-color:     var(--btnDangerBorder);
      color:            var(--btnDangerText);

    }

    &.warning {

      background-color: var(--btnWarningBG);
      border-color:     var(--btnWarningBorder);
      color:            var(--btnWarningText);

    }

    &.narrow  { width: auto; }
    &.wide    { width: 8rem; }

    &:focus, &:hover { border-color: #303030; }

    &:disabled { cursor: not-allowed; background-color: Gray; border-color: Gray; }

    & span.material-symbols-outlined { font-size: 1.2rem; }

  }

  form {

    margin: 2rem auto;
    width: 60vw;
    @media only screen and (max-width: 767px) { width: 76%; }

    div.item {

      display:          flex;
      flex-direction:   column;
      margin-bottom:    1.5rem;

      label { font-size: 0.9rem; font-weight: bold; }

      span.material-symbols-outlined { font-size: 1.1rem; }

      input {

        border-style:     solid;
        border-width:     0.05rem;
        border-radius:    0.25rem;
        box-sizing:       border-box;
        height:           1.6rem;
        hyphens:          none;
        margin:           0.4rem 0 0 0;
        padding:          0.3rem 0.5rem;
        width:            100%;

        font-size:        0.9rem;

        background-color: var(--baseBG);
        border-color:     var(--baseText);
        color:            var(--baseText);

        outline:          none;

        &:focus {
          box-shadow: 0 0 4px 1px var(--baseDecoration);
          border-color: var(--baseDecoration);
        }

        &:invalid { border-color: var(--signalDanger); }

        &[type="date"] { width: 50%; }

        &[type=file] { border: none; padding-left: 0;}

        &.not-unique { background-color: var(--signalDanger); }
        &.malformed  { border-color: var(--signalDanger); }

      }

      select {

        border-style:     solid;
        border-width:     0.05rem;
        border-radius:    0.25rem;
        height:           1.6rem;
        margin:           0.4rem 0 0 0;
        padding:          0.3rem 0.5rem;
        width:            fit-content;

        font-size:        0.9rem;

        background-color: var(--baseBG);
        border-color:     var(--baseText);
        color:            var(--baseText);

        outline:          none;

        &:focus {
          box-shadow: 0 0 4px 1px var(--baseDecoration);
          border-color: var(--baseDecoration);
        }

        &:invalid { border-color: var(--signalDanger); }

      }

      p { margin: 0.25rem 0 0 0; font-size: 0.7rem;

        &.not-unique  { color: var(--signalDanger); font-weight: bold; }
        &.malformed   { color: var(--signalDanger); font-weight: bold; }

      }

      &.checkbox {

        display: flex;
        flex-direction: row;

        label {
          display:        inline;
          padding-left:   0.5rem;
          padding-top:    0.5rem;
          vertical-align: bottom;
        }

        input {
          display:        inline;
          height:         1.6rem;
          width:          2rem;
          vertical-align: bottom;
        }

      }

    }

  } /* /form */

  dialog {

  opacity: 0;
  filter: blur(1rem);
  transition:
    opacity 0.4s ease-in,
    filter 0.4s ease-in;

  &[data-visible="true"] {
    opacity: 1;
    filter: blur(0);
  }

  &.credits, &.footnote {
    border:             none;
    display:            flex;
      flex-direction:     column;
    margin:             0;
    padding:            0;
    width:              80%;

    background-color:   var(--baseBG);
    color:              var(--baseText);

  }

  &.credits {
    h1 { margin: 0 0 1rem 0; font-size: 1.3rem; text-align: left; }
    img { float: right; height: 10rem; width: auto; }
  }

  @media only screen and (max-width: 479px) {

    &.credits {

      img {

        display:      inline-block;
        float:        none;
        height:       auto;
        margin-right: auto;
        margin-left:  auto;
        width:        90%;

      }

    }

  }

  &.floating {

    position:   fixed;
      top:        50%;
      left:       50%;
    transform:  translate(-50%, -50%);
    z-index:            10;

    -webkit-box-shadow: 0 0 0.6rem 0.2rem var(--baseShadow);
    box-shadow:         0 0 0.6rem 0.2rem var(--baseShadow);

  }

  p.dialog-top {
    border-style: none;
    cursor:       pointer;
    margin:       0;
    padding:      0.25rem 2%;
    width:        100%;
    text-align:   right;
    color:        var(--baseText);

    border-color:     var(--baseDecoration);
    background-color: var(--baseDecoration);

    &:hover { color: var(--baseBG); }

    &.mso { font-size: 1.8rem; }

  }

  div {

    max-height: 70vh;
    overflow:   auto;
    padding:    1.2rem 1rem;

    h1  { font-size: 1.4rem; margin: 0 0 1.4rem 0; text-align: left; }
    h2  { font-size: 1.2rem; margin: 1.4rem 0; text-align: left; }
    h3  { font-size: 1.0rem; margin: 1.4rem 0; text-align: left; }
    li  {margin: 0.8rem 0 0.8rem 0.8rem; font-size: 0.9rem; }
    p   { margin: 0.8rem 0; font-size: 0.9rem;}

  }


  } /* /dialog */

  figcaption {

    display:        flex;
      flex-direction: column;
      row-gap:        0.5rem;

    font-size:  0.7rem;

    text-align: center;

  }

  figure {

    border-style:   solid;
    border-width:   0.05rem;
    border-radius:  0.125rem;
    margin-top:     0;
    margin-bottom:  1rem;
    height:         auto;
    padding:        0.25rem;

    background-color: transparent;
    border-color:     var(--baseShadow);

    &.at-center  { float: none;  margin-left: auto; margin-right: auto; }
    &.at-left    { float: left;  margin-left: 0; margin-right: 1rem; }
    &.at-right   { float: right; margin-left: 1rem; margin-right: 0; }

    img { width: 100%; }

    &.banner-module-top {
      border:   none;
      padding:  0;
      position: relative;
      display:  inline-block;
      width:    100%;

      img { display: block; width: 100%; }

      h1 {
        border-style: solid;
        border-width: 1px 0;
        line-height:  2.6;
        position:     absolute;
        margin:       1rem;
        min-width:    30vw;
        padding:      0 2rem;

        font-size:      max(0.8rem, 5vw - 0.8rem);
        letter-spacing: 0.35rem;
        text-align:     center;

        background-color: rgba(0, 0, 0, 0.75);
        border-color:     var(--baseDecoration);
        color:            var(--baseDecoration);
      }

      p.legend {

        margin: 0 auto;
        padding: 0.25rem 0.5rem;

        font-size: 70%;

      }

    }

  } /* /figure */

  h1  {
    margin:   1.5rem 0 2.0rem 0;
    padding:  0 0 0.25rem 0;

    font-size:    1.52rem;
    font-weight:  400;
    text-align:   center;

    &.heading {

      border-style: solid;
      border-width: 0 0 0.1rem 0;
      margin:       2rem 0 3rem 0;

      border-color: var(--baseDecoration);

    }

    &.title {

      border: none;
      margin: 3rem 0 5rem 0;

    }

  }

  h2 {

    margin: 2.0rem 0 1.5rem 0;

    font-size:    1.3rem;
    font-weight:  400;

  }

  h3 {

    margin: 2.0rem 0 1.5rem 0;

    font-size:    1.15rem;
    font-weight:  400;
    text-align:   left;

  }

  h4 {

    margin: 1.5rem 0 1.0rem 0;

    font-size:    1rem;
    font-weight:  400;
    text-align:   left;

  }

  ol, ul {

    margin:  1rem auto;

    li {

      margin: 1rem auto 1rem 1.5rem;

      font-size:  1rem;

      word-wrap:  break-word;

    }

  }

  p {

    margin: 1rem auto;

    font-size: 1em;
    word-wrap: break-word;

    &.dropcap { position: relative; }

    &.dropcap::first-letter {

      float:			  left;
      font-size:	  3rem;
      font-weight:  300;
      line-height:  0.7;
      margin:       0;
      padding:     	0.4rem 0.3rem 0 0;

      color:        var(--baseText);

    }

    &.intro {
      margin: 1rem auto 2rem auto;
      width:  80%;
      font-size:  1em;
    }

    &.verse {
      margin: 0.5rem auto 0.5rem 2rem;
      font-size: 0.86rem;
    }

  }


  /* Types with (a touch of) class */

  div.book-action-link {
    border-radius:    0.25rem;
    margin:           1rem auto;
    padding:          0 0 1em 0;
    width:            fit-content;

    background-color: var(--baseDecoration);
    color:            var(--baseOverDecor);

    h1 {

      border-style: solid;
      border-width: 0 0 2px 0;
      padding:      0.5em 2em;
      margin:       0 auto 1em auto;

      font-size:    1.2em;
      font-weight:  bold;
      border-color: var(--baseOverDecor);

    }

    p { margin: 0.75em 0; text-align: center; }

    p:has(span) {
      border-radius:  9999px;
      border-style:   solid;
      border-width:   2px;

      display:        flex;
        flex-direction:   row;
        justify-content:  space-between;
        align-items:      center;
      margin:         0 auto;
      padding:        0 0.5em;
      width:          fit-content;

      border-color:   var(--baseOverDecor);

    }

    a, p.link {

      display:        flex;
      flex-direction:   row;
      justify-content:  space-between;
      align-items:      center;

      text-align:       center;
      text-decoration:  none;

      color:            var(--baseOverDecor);

    }

    a:visited, a:active       { color: var(--baseOverDecor); }
    a:hover, span.link:hover  { color: var(--baseText); }

    span.mso {
      margin: 0.125rem 0.25rem;
      font-size: 1.7em;
    }

  }

  div.books-recent-grid {
    display:          flex;
      flex-wrap:        nowrap;
      justify-content:  center;
      @media only screen and (max-width: 711px) { justify-content: left; }
      gap:              1rem;
    overflow-x:       scroll;
    scroll-behavior:  smooth;
    padding:          0.5rem;
    margin:           1rem auto;
    max-width:        80%;

    & .grid-cell {

      flex:             0 0 10rem;
      @media only screen and (max-width: 479px) { flex: 0 0 8rem;}
      box-sizing:       border-box;
      padding:          0.5rem;

      text-align:       center;

      & img {
        border-radius:  0 0.5em 0.5em 0;
        height:         auto;
        max-width:      100%;
      }

      & h3 {
        margin:       0.5rem 0 0 0;

        font-size:    0.9rem;
        font-weight:  bold;
        text-align:   center;
      }

      & h4 {
        margin:       0.4rem 0;

        font-size:    0.7rem;
        font-weight:  bold;
        text-align:   center;
      }

      & p {
        margin:     0;
        width:      100%;
        height:     1.5em;
        overflow-y: auto;
        font-size:  0.7rem;
        text-align: end;

          cursor:   pointer;
          &:hover   { color: var(--baseDecoration);}
          a         { color: var(--baseText); text-decoration: none; }
          a:visited { color: var(--baseText); }
          a:hover   { color: var(--baseDecoration); }
          a:focus   { color: var(--baseText); }
          a:active  { color: var(--baseText); }
      }

    }

  }

  div.category-grid {

    display:  flex;
      flex-direction:   row;
      flex-wrap:        wrap;
      justify-content:  space-around;
    margin:   1rem auto;
    padding:  0.25rem 0.5rem;
    width:    80%;

    div {

      cursor:     pointer;
      margin-top: 0.5rem;
      width:      6rem;

      img { width: 100%; }

      .link         { color: var(--baseText); text-decoration: none; font-weight: bold; }
      .link:hover   { color: var(--baseDecoration); }

      a             { color: var(--baseText); text-decoration: none; font-weight: bold; }
      a:visited     { color: var(--baseText); }
      a:hover       { color: var(--baseDecoration); }
      a:focus       { color: var(--baseDecoration); }
      a:active      { color: var(--baseText); }

      p { margin: 0.1rem auto; font-size: 0.7rem; text-align: center; }

    }

  }

  aside.note {display: none; }

  div.selling-cards {

    display:       flex;
      flex-direction:   row;
      flex-wrap:        wrap;
      gap:              2rem 0;
      justify-content:  space-around;
    margin:         2rem auto 2rem auto;
    width:          90%;

    div {

      display: flex;
        flex-direction: column;
      margin: 0 auto;
      width: 380px;
      max-width: 80%;

      img { max-width: 100%; height: auto; }

      h1 {

        margin:         0;
        padding:        0.5em 0;
        width:          100%;

        font-size:      1em;
        font-weight:    700;
        letter-spacing: 0.025rem;
        line-height:    1.3;
        text-align:     center;

        background-color: var(--baseDecoration);
        color:            var(--baseOverDecor);

      }

      p {

        margin:       0 auto;
        padding:      0.5rem 0;
        width:        100%;

        font-size:    0.9em;
        hyphens:      none;
        line-height:  1.3;
        text-align:   center;

      }

    }

    &.card-mini    div { width: 300px; }
    &.card-regular div { width: 400px; }
    &.card-large   div { width: 500px; }

  }

  div.submit-bar  {

    border-top-style: solid;
    border-top-width: 0.1rem;
    display:          flex;
    flex-direction:   row;
    justify-content:  space-between;
    margin-top:       3.5rem;
    padding-top:      1.5rem;

    border-top-color: var(--baseDecoration);

  }

  div.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* for smooth scrolling on iOS */
  }

  div.video-wrapper {
    display: flex;
    justify-content: center;
    padding: 1rem;

    div.video-container {
      width: 100%;
      max-width: 560px;
      aspect-ratio: 16 / 9;
      border-radius: 12px;
      box-shadow: 0 8px 30px var(--baseShadow);
      overflow: hidden; /* clips the iframe to the border-radius */
    }

    div.video-container iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

  }

  p.bubble {

    border-radius:  9999px;
    border-style:   solid;
    border-width:   0.1em;
    display:        flex;
      flex-direction:   row;
      justify-content:  space-between;
      align-items:      center;
      gap:              1rem;
    padding:        0.5rem 0.75rem;
    margin:         1rem auto;
    width:          fit-content;

    span:first-of-type { font-size: 2rem;}

    &.warning {

      background-color: var(--btnWarningBG);
      border-color:     var(--btnWarningBorder);
      color:            var(--btnWarningText);

    }

  }

  p.go-next { display: block; font-size: 3rem; margin: 0 0 1rem auto; width: fit-content; }

  img.member-avatar {
    display:        block;
    border-radius:  50%;
    border-style:   solid;
    border-width:   0.05rem;

    border-color:   var(--baseDecoration);
  }

  span.note-link {
    cursor: pointer;
    text-decoration:  underline;

    &:hover { color: var(--baseDecoration);  }
  }

  table.summary {

    border-style:     solid;
    border-width:     1px;
    border-collapse:  collapse;
    margin:           0 0 1rem 2rem;
    float:            right;
    width:            33vw;
    @media only screen and (max-width: 767px) { width: 50%; }

    font-size:        0.9rem;

    border-color:     var(--baseShadow);

    thead th {
      padding:          0.5rem 0.4rem;
      font-size: 1.1em;

      background-color: var(--baseDecoration);
      color:            var(--baseOverDecor);
    }

    thead tr:last-of-type th { border-bottom: 1px solid var(--baseShadow); }

    tbody td {
      padding:        0.35rem 0.4rem;
      vertical-align: top;
      font-size:      0.9em;
      text-align:     left;

      &:nth-child(2) { width: 60%; }

      &:first-of-type { font-weight: bold; white-space: no-wrap; hyphens: none; }

      &.separator { height: 3em; vertical-align: bottom; }

      img {
        border-radius:  0 0.5em 0.5em 0;
        width:          90%;
        object-fit:     cover;
        margin:         0.66em auto 0 auto;
        display:        block;
      }

    }

  }

  table.wide {

    border-collapse:  collapse;
    border-style:     solid;
    border-width:     0.125rem 0;
    display:          table;
    gap:              0;
    margin:           2rem auto 1rem auto;
    width:            80%;

    font-size:        0.8rem;

    border-color:     var(--baseText);

    thead {

      tr { height: 2rem; background-color: var(--baseDecoration); }

      th {

        border-style: solid;
        border-width: 0.0625rem 0;
        padding:      0.25rem;

        color:            var(--baseText);
        border-color:     var(--baseText);

      }

    }

    tbody {
      & tr { height: 2rem; }
      & tr:nth-child(even) { background-color: #eaeaea; }
      & th { padding: 0.25rem 0; text-align: left; }
      & td { padding: 0.25rem 0; text-align: center; }
    }

  }

} /* /main */


footer {

  border-style:     solid;
  border-width:     0.125rem 0 0 0;
  box-sizing:       border-box;
  display:          grid;
    grid-template-columns:  1fr 1fr 1fr;
    grid-template-rows:     1fr auto;
    gap:                    1rem 1rem;
    grid-template-areas:    "privacy liability contact"
                            "copyright copyright copyright";
  margin-top:       3rem;
  padding:			    0 2vw 3rem 2vw;
  @media only screen and (max-width: 479px) {
      grid-template-columns:  1fr;
      grid-template-rows: auto auto auto auto;
      grid-template-areas:
        "contact"
        "privacy"
        "liability"
        "copyright";
    padding: 0 4vw 3rem 4vw;
  }


  width:            100%;

  font-family:      "Lato", sans-serif;
  font-weight:      300;

  background-color: var(--footerBG);
  border-color:     var(--baseDecoration);

  color:            var(--footerText);

  .privacy      { grid-area: privacy;   }
  .liability    { grid-area: liability; }
  .contact      { grid-area: contact;   }
  .copyright    { grid-area: copyright; }

  a:link        { color: var(--footerLink); text-decoration: none; }
  a:visited     { color: var(--footerVisited); }
  a:hover       { color: var(--footerHover); }
  a:active      { color: var(--footerActive); }

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

  h1 {

    border-style:   solid;
    border-width:   0 0 0.05rem 0;
    margin:         2rem 0 1rem 0;
    padding:		    0;

    font-size:		  1rem;
    letter-spacing: 0.05rem;
    line-height:	  1.4;
    text-align:		  left;

    border-color:   var(--footerBorder);

  }

  p {

    font-size:      0.8rem;
    hyphens:		    auto;
    letter-spacing: 0.05rem;
    line-height:	  1.4;
    text-align:     left;
    word-wrap:	    break-word;

  }

} /*/footer */


/* --- Identified elements --- */

dialog#dlgMemberLeave {

  border:        1px solid var(--baseDecoration);
  border-radius: 0.4rem;
  margin:        auto;
  padding:       1.5rem;
  width:         min(90vw, 32rem);

  font-family: var(--font-ui);

  background-color: var(--baseBG);
  color:            var(--baseText);

  box-shadow: 0 0.5rem 2rem var(--baseShadow);

  &::backdrop {
    background-color: rgb(0 0 0 / 0.55);
  }

  form {

    margin: 0;
    width:  100%;

    p {

      margin-bottom: 1.25rem;

      &:first-child {
        font-size:   1.1rem;
        font-weight: 600;
      }

      &:last-child {

        display:         flex;
        justify-content: flex-end;
        gap:             0.75rem;

        margin-bottom: 0;

      }

    }

    label {

      display:     flex;
      align-items: center;
      gap:         0.6rem;

      cursor: pointer;

    }

    input[type="checkbox"] {

      width:  1.1rem;
      height: 1.1rem;

      accent-color: var(--baseDecoration);

    }

    button {

      border-style:  solid;
      border-width:  1px;
      border-radius: 0.25rem;

      min-width: 6rem;
      padding:   0.55rem 0.9rem;

      font: inherit;

      &[value="cancel"] {

        background-color: transparent;
        border-color:     var(--baseText);
        color:            var(--baseText);

      }

      &[value="confirm"] {

        background-color: var(--btnDangerBG);
        border-color:     var(--btnDangerBorder);
        color:            var(--btnDangerText);

      }

      &:hover,
      &:focus-visible {

        border-color: var(--baseDecoration);
        box-shadow:   0 0 0.2rem var(--baseDecoration);

      }

    }

  }

}

div#barReadersProgress {
  position:         fixed;
    left:             0;
    top:              0;
  height:           clamp(0.2rem, 0.25rem + 0.1vw, 0.35rem);
  opacity:          1;
  pointer-events:   none;
  transform-origin: left center;
  transform:        scaleX(0);
  width:            100%;

  background-color: var(--baseDecoration);

}

div#divCTABottom {

  margin: 2rem auto;
  text-align: center;

  p {
      margin: 0;
  }

  a {

    border: none;
    border-radius: 0.5rem;
    display: inline-flex;
      align-items: center;
      justify-content: center;
    min-width: 20vw;
    padding: 0.7rem 1.5rem;
    outline-offset: -0.25rem;
    outline-style: solid;
    outline-width: 0.0625rem;

    font-weight: 700;
    text-decoration: none;

    background-color: var(--baseDecoration);
    color: var(--baseOverDecor);
    outline-color: var(--baseOverDecor);
    box-shadow: 0 0.15rem 0.5rem var(--baseShadow);

  }

  & a:visited,
  & a:hover,
  & a:active {
    text-decoration: none;
    color: var(--baseOverDecor);
  }

}

div#divCTAWall {

    position: fixed;
    z-index: 20;
    top: 25%;
    right: 0;

    padding: 0.6rem 0;

    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;

    background-color: var(--baseDecoration);
    border: none;
    border-radius: 0.5rem 0 0 0.5rem;

    outline: 1px solid var(--baseOverDecor);
    outline-offset: -0.25rem;

    box-shadow: 0 0.15rem 0.5rem var(--baseShadow);

    transform: translateX(85%);
    transition: transform 0.5s ease;

  .cta-chevron {

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 1.5rem;
    padding: 0 0.15rem 0 0.25rem;

    color: var(--baseOverDecor);
    cursor: pointer;

    transition: transform 0.3s ease;

  }

  a {

    display:          flex;
    flex:             0 0 auto;
      align-items:      center;
      justify-content:  center;
    padding:          0 1rem 0 0.25rem;

    font-weight:      700;
    line-height:      1;
    text-decoration:  none;
    white-space:      nowrap;

    color: var(--baseOverDecor);

  }

  &:hover,
  &:focus-within,
  &.cta-open {
    transform: translateX(5%);
  }

  &.cta-shake {
      animation: ctaWallShake 0.45s ease;
  }

  &:hover .cta-chevron,
  &:focus-within .cta-chevron,
  &.cta-open .cta-chevron {
      transform: rotate(180deg);
  }

  & a:visited,
  & a:hover,
  & a:active {
    text-decoration: none;
    color: var(--baseOverDecor);
  }

}

@media (prefers-reduced-motion: reduce) {
  #divCTAWall {
    transition: none;
  }
}

div#divMembershipNotice {

  padding: 0.25em 0;
  background-color: var(--btnDangerBG);

  p {

    font-size: 70%;
    text-align: center;
    color: var(--btnDangerText);

    a, a:visited, a:hover, a:active { color: var(--btnDangerText); }

  }

}

div#divJoinNow {

  cursor:   pointer;
  position: fixed;
    bottom:   3vh;
    right:    3vh;
  z-index:  50;

  opacity:    0;
  transition: opacity 0.6s;

    img { width: 6rem; height: auto;}

}

div#divJoinNow.opaque { opacity: 1; }

div#divJoinNow.joinNowPulse { animation: joinNowPulse 0.6s ease-in-out; }


/* --- Other elements --- */

button.mso, button.ui-action {

  border:     none;
  margin:     0 0.5rem;
  list-style: none;
  font-size:  1.5rem;

  background-color: var(--baseBG);
  color:            var(--baseText);

  &:hover {color: var(--baseDecoration);}

}

form.member-register-form {

  .password-heading {
    display:          flex;
      align-items:      center;
      justify-content:  space-between;
    width:            100%;
  }

  .password-toggle {
    cursor: pointer;
  }

  .member-register-submit {
    display:      block;
    margin-left:  auto;
    padding:      0.6rem 1.2rem;
    width:        fit-content;

    font-weight:  700;
    white-space:  nowrap;

  }

}


nav.bar {

  border-radius:    1000px;
  border-style:     solid;
  border-width:     0.125rem;

  display: flex;
    flex-direction:   row;
    flex-wrap:        nowrap;
    justify-content:  center;
    align-items:      center;

  padding:    0.25rem;
  width:      fit-content;
  position:   fixed;
  bottom:     0.5rem;
  left:       50%;
  transform:  translateX(-50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index:    20;

  background-color: var(--baseBG);
  border-color:     var(--baseShadow);

  ol {

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin: 0 0.5rem;

    li {

      list-style: none;

      img {

        border-radius: 50%;
        border-style: solid;
        border-width: 0.05rem;
        height: auto;
        margin: 0 0.4rem;
        padding: 0.1rem;
        width: 1.3rem;

        border-color: transparent;

        &.current {
          border-color: var(--baseDecoration);
        }

      }

    }

  }

  &.hidden-on-scroll {
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
  }

  @media only screen and (max-width: 479px) {

    flex-direction: column;
    left: auto;
    right: -5%;
    padding: 0.75rem 0.125rem;

    button {
      margin: 0.5rem 0;
    }

    ol {
      flex-direction: column;

      li {
        margin: 0.4rem 0;

        img {
          height: auto;
          margin: 0.1rem 0;
          width: 1.5rem;
        }

      }

    }

  }

}

nav.near-nav {

  margin: 2rem auto 3rem auto;
  width:  fit-content;

  ol {

    display:          flex;
      flex-direction:   row;
      justify-content:  space-between;

    li {

      margin:     0 2rem;
      list-style: none;

      button.mso { font-size: 2rem; }

    }

  }

}

nav.panel {

  border-style:     solid;
  border-width:     1px;
  position:         fixed;
  top:              2rem;
  max-height:       80vh;
  padding:          0.75rem 1.5rem;
  overflow-y:       auto;

  background-color: inherit;
  box-shadow:       0rem 0rem 0.2rem 0.1rem var(--baseShadow);

  .mso { font-size: calc(1.40 * var(--font-root-size)); }

  li { list-style: none; }

  ol {
    display:          flex;
      flex-direction:   row;
      justify-content:  center;
    padding:          0.75rem 0.5rem;
  }

  .font-xlarge { font-size: calc(1.50 * var(--font-root-size)); }
  .font-large  { font-size: calc(1.20 * var(--font-root-size)); }
  .font-medium { font-size: calc(1.00 * var(--font-root-size)); }
  .font-small  { font-size: calc(0.89 * var(--font-root-size)); }
  .font-xsmall { font-size: calc(0.75 * var(--font-root-size)); }

  .font-modern   { font-family: var(--font-modern); }
  .font-comfort  { font-family: var(--font-comfort); }
  .font-classic  { font-family: var(--font-classic); }

}

nav.toc, nav.history, nav.settings {

  min-width:  25vw;
  max-width:  85vw;
  left:       -100%;
  padding:    2rem;
  transition: left 0.75s cubic-bezier(0.60, -0.35, 0.4, 1.35);

  a       { cursor: pointer; color: var(--linkLink); text-decoration: none; }
  a:hover { color: var(--linkHover); }

  h1  {

    border-width:   0  0 2px 0;
    border-style:   solid;
    margin-bottom:  0.75em;
    padding-bottom: 0.25em;

    font-size:  1.0rem;
    text-align: center;

    border-color: var(--baseDecoration);

  }

  h2  {

    border-width:   0  0 1px 0;
    border-style:   solid;
    margin-bottom:  0.75rem;
    margin-top:     0.5rem;

    font-size: 0.9rem;

    border-color: var(--baseDecoration);

  }

  h1, h2 { font-weight: normal; }

  li  { margin-bottom: 0.75rem; margin-left: 0.5rem; font-size: 0.8rem; }

  li.current::before {

    content: '\25B6';

    display:      inline-block;
    margin-right: 0.4em;
    transform:    scale(0.7);

  }

  &.active { left: 1rem; }

}

nav.settings {

  ol {
    display:          flex;
      flex-direction:   row;
      flex-wrap:        nowrap;
      align-items:      center;
      justify-content:  space-evenly;
    margin:           1.7rem 0;
    padding:          0;
  }

  p.ui-action {

    border-bottom-style: solid;
    border-bottom-width: 2px;

    text-align: right;

    border-bottom-color: var(--baseText);

  }


}

nav.toc       { z-index: 210; }
nav.history   { z-index: 220; }
nav.settings  { z-index: 230; }
nav.bar       { z-index: 240; }


/* For a few classes more */

.mso {

  display:      inline-block;
  font-family:  "mso";
  font-style:   normal;
  font-weight:  400;
  font-size:    1.25rem;
  line-height:  1;

  font-variant-ligatures: contextual;
  font-feature-settings:  "liga";

  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;

}

.disabled             { color: var(--baseShadow) !important; }

.block                { display: block !important; }
.inline               { display: inline-block !important; }
.flex                 { display: flex  !important; }
.grid                 { display: grid  !important; }
.hidden               { display: none  !important; }

.invisible            { opacity: 0; visibility: hidden; }
.visible              { opacity: 1; visibility: visible; }

.scroll               { overflow-x: auto; }
.scroll th, .scroll td
                      { white-space: nowrap; }

.landscape            { display: block; }
.portrait             { display: none; }

.wide                 { display: block; }
.narrow               { display: none; }

.long-note            { display: none; }

.ui-action {
  cursor:   pointer;
  &:hover   { color: var(--baseDecoration);}
  a         { color: var(--baseText); text-decoration: none; }
  a:visited { color: var(--baseText); }
  a:hover   { color: var(--baseDecoration); }
  a:focus   { color: var(--baseText); }
  a:active  { color: var(--baseText); }
}


/* Spacing */

.flipped              { transform: scale(-1, 1); }
.marginless           { margin: 0; }
.borderless           { border: none; }

.i1                   { text-indent:  1em; }
.i2                   { text-indent:  2em; }
.i3                   { text-indent:  3em; }
.i4                   { text-indent:  4em; }
.i5                   { text-indent:  5em; }

.m-0                  { margin:   0    !important; }
.m-1                  { margin:   1rem !important; }
.m-2                  { margin:   2rem !important; }
.m-3                  { margin:   3rem !important; }
.m-4                  { margin:   4rem !important; }
.m-5                  { margin:   5rem !important; }

.m-top0               { margin-top:   0    !important; }
.m-top1               { margin-top:   1rem !important; }
.m-top2               { margin-top:   2rem !important; }
.m-top3               { margin-top:   3rem !important; }
.m-top4               { margin-top:   4rem !important; }
.m-top5               { margin-top:   5rem !important; }

.m-right0             { margin-right:   0    !important; }
.m-right1             { margin-right:   1rem !important; }
.m-right2             { margin-right:   2rem !important; }
.m-right3             { margin-right:   3rem !important; }
.m-right4             { margin-right:   4rem !important; }
.m-right5             { margin-right:   5rem !important; }

.m-bottom0            { margin-bottom:   0    !important; }
.m-bottom1            { margin-bottom:   1rem !important; }
.m-bottom2            { margin-bottom:   2rem !important; }
.m-bottom3            { margin-bottom:   3rem !important; }
.m-bottom4            { margin-bottom:   4rem !important; }
.m-bottom5            { margin-bottom:   5rem !important; }

.m-left0              { margin-left:   0    !important; }
.m-left1              { margin-left:   1rem !important; }
.m-left2              { margin-left:   2rem !important; }
.m-left3              { margin-left:   3rem !important; }
.m-left4              { margin-left:   4rem !important; }
.m-left5              { margin-left:   5rem !important; }

.paddingless          { padding:  0; }

.position-bottom      { bottom: 0; }
.position-left        { left:   0; }
.position-right       { right:  0; }
.position-top         { top:    0; }

.top                  { margin-top: 0 !important; }

.w10                  { width:  10%   !important; }
.w20                  { width:  20%   !important; }
.w25                  { width:  25%   !important; }
.w30                  { width:  30%   !important; }
.w33                  { width:  33%   !important; }
.w40                  { width:  40%   !important; }
.w50                  { width:  50%   !important; }
.w60                  { width:  60%   !important; }
.w66                  { width:  66%   !important; }
.w70                  { width:  70%   !important; }
.w75                  { width:  75%   !important; }
.w80                  { width:  80%   !important; }
.w90                  { width:  90%   !important; }
.w100                 { width:  100%  !important; }

.w10max               { max-width:  10%   !important; }
.w20max               { max-width:  20%   !important; }
.w25max               { max-width:  25%   !important; }
.w30max               { max-width:  30%   !important; }
.w33max               { max-width:  33%   !important; }
.w40max               { max-width:  40%   !important; }
.w50max               { max-width:  50%   !important; }
.w60max               { max-width:  60%   !important; }
.w66max               { max-width:  66%   !important; }
.w70max               { max-width:  70%   !important; }
.w75max               { max-width:  75%   !important; }
.w80max               { max-width:  80%   !important; }
.w90max               { max-width:  90%   !important; }
.w100max              { max-width:  100%  !important; }

.w10min               { min-width:  10%   !important; }
.w20min               { min-width:  20%   !important; }
.w25min               { min-width:  25%   !important; }
.w30min               { min-width:  30%   !important; }
.w33min               { min-width:  33%   !important; }
.w40min               { min-width:  40%   !important; }
.w50min               { min-width:  50%   !important; }
.w60min               { min-width:  60%   !important; }
.w66min               { min-width:  66%   !important; }
.w70min               { min-width:  70%   !important; }
.w75min               { min-width:  75%   !important; }
.w80min               { min-width:  80%   !important; }
.w90min               { min-width:  90%   !important; }
.w100min              { min-width:  100%  !important; }

/* Positioning */

.basis-10             { flex-basis: 10%; }
.basis-20             { flex-basis: 20%; }
.basis-25             { flex-basis: 25%; }
.basis-30             { flex-basis: 30%; }
.basis-33             { flex-basis: calc(100%/3); }
.basis-50             { flex-basis: 50%; }

.display-block        { display: block; }

.to-center            { margin-left: auto; margin-right: auto; }
.to-right             { float: right; }
.to-left              { float: left; }
.to-middle            { display: flex; flex-direction: row; align-items: center; }

.inline-middle        { vertical-align: middle; }

/* Flex */

.row                  { flex-direction: row; }
.row-reverse          { flex-direction: row-reverse; }
.column               { flex-direction: column;}
.column-reverse       { flex-direction: column-reverse;}

.wrap                 { flex-wrap: wrap; }
.wrap-reverse         { flex-wrap: wrap-reverse; }
.wrap-no              { flex-wrap: nowrap; }

.justify-center       { justify-content: center; }
.justify-start        { justify-content: flex-start; }
.justify-end          { justify-content: flex-start; }
.justify-left         { justify-content: left; }
.justify-right        { justify-content: right; }

.spaced-around        { justify-content: space-around; }
.spaced-between       { justify-content: space-between; }
.spaced-to-center     { justify-content: center; }


/* Typography */

.bold			            { font-weight:     bold         !important; }
.italic, .foreign     { font-style:      italic       !important; }
.strike			          { text-decoration: line-through !important; }
.underline		        { text-decoration: underline    !important; }

.smaller              { font-size: 0.6rem  !important;  }
.small                { font-size: 0.8rem  !important;  }
.original, .normal    { font-size: 1.0rem  !important;  }
.large                { font-size: 1.2rem  !important; }
.larger               { font-size: 1.4rem  !important; }
.big                  { font-size: 2.0rem  !important; }
.giant                { font-size: 4.0rem  !important; }

.grab                 { cursor: grab; }
.pointer              { cursor: pointer; }
.help                 { cursor: help; }

.smallcaps            { font-variant: small-caps; }

.text-left		        {	text-align: left		  !important;	}
.text-center	        {	text-align: center		!important;	}
.text-right		        {	text-align: right		  !important;	}
.text-justified	      {	text-align: justify   !important;	}

.spacing-00           { letter-spacing: 0; }
.spacing-01           { letter-spacing: 0.1rem; }
.spacing-05           { letter-spacing: 0.5rem; }
.spacing-10           { letter-spacing: 1.0rem; }


/* Named colors */

.black			          { color: #505050      !important; }
.blue			            { color: #000080      !important; }
.green			          { color: #00a000      !important; }
.gray                 { color: #808080      !important; }
.orange			          { color: #ffb300      !important; }
.red			            { color: #a00000      !important; }
.maroon		            { color: #a00000      !important; }
.snow			            { color: Snow         !important; }
.teal			            { color: Teal         !important; }
.yellow               { color: #ffb300      !important; }
.transparent          { color: transparent    !important; }

.accept               { background-color: #008000; }

.right                { color: green; }
.wrong                { color: red; }

.off                  { color: gray; }
.on                   { color: red; }

.settings-selected    { color: gray  !important; cursor: default !important; }