[data-theme="dark"] {
    --brand-color: color(display-p3 0.85 0.1 0.2);
    --pico-primary: var(--brand-color);
    --pico-primary-background: var(--brand-color);
    --pico-primary-underline: color-mix(in srgb, var(--brand-color), transparent 50%);
    --pico-primary-hover: color-mix(in srgb, var(--brand-color), white 35%);
    --pico-primary-hover-background: color-mix(in srgb, var(--brand-color), black 12%);
    --pico-primary-focus: color-mix(in srgb, var(--brand-color), white 60%);
    --pico-primary-inverse: #fff;

    /* background surfaces */
    /*--pico-background-color: #000;*/
    /*--pico-card-background-color: #000;*/

    /* text colors */
    --pico-color: #cfd3dc;
    --pico-muted-color: #8a91a1;
}


/* fallback for browsers that don't support display-p3 */
@supports not (color: color(display-p3 1 0 0)) {
  [data-theme="dark"] {
    --brand-color: #e63946; /* sRGB fallback */
  }
}

html, body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300; /* Light */
  height: 100%;
  margin: 0;
}

html {
    font-size: 14px; /* default ~16px */
    background-color: #000;
}

body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("/assets/bg.jpeg") no-repeat center center;
  transform: scale(1.5);
  background-size: cover;
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: -1;
}

body > * {
  position: relative; /* make sure text stays above overlay */
  z-index: 1;
}


.logo {
  display: block;
  margin: 2rem auto 1rem; /* center horizontally */
  max-width: 200px;
  height: auto;
}