body {
    background-color: #F8F2E3;
    /* The paper grain: the same noise as the app's body (scss/index.scss,
       $background-base-frequency / $background-pattern-opacity). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
    font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1A1A18;
}

#root {
    display: block;
    min-height: 100vh;
}

/* The server-rendered "loading" screen, on a device set to dark mode, until
   the bundle mounts (:has() stops matching once React replaces the text).
   Inside the app: Chalk on Chalkboard. Outside it -- the logged-out landing
   page and the public pages (body.public-page) -- Hope Blue 3 on Hope Blue 1,
   the public pages' own dark mode. Light mode keeps paper cream throughout. */
@media (prefers-color-scheme: dark) {
    body:has(> #root > pre.loading) {
        background-color: #201F1B;
        color: #F1EADA;
    }
    body:has(> #root > pre.loading) .footer p,
    body:has(> #root > pre.loading) .footer a {
        color: #C9C2AE;
    }
    body.public-page:has(> #root > pre.loading) {
        background-color: #2E4756;
        color: #B8D2DC;
    }
    body.public-page:has(> #root > pre.loading) .footer p,
    body.public-page:has(> #root > pre.loading) .footer a {
        color: #B8D2DC;
    }
}

.loading {
    width: 100px;
    height: 20px;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
    overflow: hidden;
}

.loading-dot-dot::after {
    display: inline-block;
    animation: dotty steps(1,end) 1.5s infinite;
    content: '';
}
  
@keyframes dotty {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}
  
@-webkit-keyframes dotty {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

.footer {
    min-height: 50px;
    width: 100%;
    display: flex;
    flex-direction: row;
    /* On a narrow screen whole items move to the next line (centered) rather
       than every item squeezing and breaking mid-phrase. */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 4px;
    padding: 8px 12px;
    box-sizing: border-box;
}

.footer p {
    /* neutral-2 */
    color: #2E313B;
    padding: 10px;
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .footer p {
        padding: 6px 10px;
    }
}

.footer a {
    /* neutral-2 */
    color: #2E313B
; 
}