/**
     * Minimum styles required to render splash.
     *
     * ALL OTHER STYLES BELONG IN `src/style.css`
     *
     * THIS NEEDS TO BE DUPLICATED IN `bskyweb/templates/base.html`
     */
    @font-face {
      font-family: 'InterVariable';
      src: url("static/font/InterVariable.c504db5c06caaf7cdfba.woff2") format('woff2');
      font-weight: 300 1000;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'InterVariableItalic';
      src: url("static/font/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2") format('woff2');
      font-weight: 300 1000;
      font-style: italic;
      font-display: swap;
    }
    html,
    body {
      margin: 0px;
      padding: 0px;
      font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
      text-rendering: optimizeLegibility;
      /* Platform-specific reset */
      -webkit-overflow-scrolling: touch;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -ms-overflow-style: scrollbar;
      font-synthesis-weight: none;
    }
    :root {
      --text: black;
      --background: white;
      --backgroundLight: #e2e7ee;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        color-scheme: dark;
        --text: white;
        --background: black;
        --backgroundLight: #232e3e;
      }
    }
    html,
    body,
    #root {
      display: flex;
      flex: 1 0 auto;
      min-height: 100%;
      width: 100%;
    }
    html.theme--light,
    html.theme--light body,
    html.theme--light #root {
      background-color: white;
      --text: black;
      --background: white;
      --backgroundLight: #DCE2EA;
    }
    html.theme--dark,
    html.theme--dark body,
    html.theme--dark #root {
      color-scheme: dark;
      background-color: black;
      --text: white;
      --background: black;
      --backgroundLight: #232E3E;
    }
    html.theme--dim,
    html.theme--dim body,
    html.theme--dim #root {
      color-scheme: dark;
      background-color: #151D28;
      --text: white;
      --background: #151D28;
      --backgroundLight: #2C3A4E;
    }
    #splash {
      display: flex;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      align-items: center;
      justify-content: center;
    }
    #splash svg {
      position: relative;
      top: -50px;
      width: 100px;
    }
    /**
     * We need these styles to prevent shifting due to scrollbar show/hide on
     * OSs that have them enabled by default. This also handles cases where the
     * screen wouldn't otherwise scroll, and therefore hide the scrollbar and
     * shift the content, by forcing the page to show a scrollbar.
     */
    body {
      width: 100%;
      overflow-y: scroll;
    }