:root {
  --brand-h: 0;
  --brand-s: 100%;
  --brand-l: 0%;
}
:root[data-theme="dark"] {
  --brand-l: 100%;
  
  --red-h: 0;
  --red-s: 71%;
  --red-l: 78%;
  --color-red: hsl(var(--red-h) var(--red-s) var(--red-l));
  --color-red-text: hsl(var(--red-h) var(--red-s) var(--red-l) / 1);
  --color-red-stroke-strong: hsl(var(--red-h) var(--red-s) var(--red-l) / 0.8);
  --color-red-stroke-weak: hsl(var(--red-h) var(--red-s) var(--red-l) / 0.2);
  --color-red-fill: hsl(var(--red-h) var(--red-s) var(--red-l) / 0.05);
  --yellow-h: 42;
  --yellow-s: 82%;
  --yellow-l: 56%;
  --color-yellow: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l));
  --color-yellow-text: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l) / 1);
  --color-yellow-stroke-strong: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l) / 0.8);
  --color-yellow-stroke-weak: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l) / 0.2);
  --color-yellow-fill: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l) / 0.05);
  --green-h: 162;
  --green-s: 95%;
  --green-l: 48%;
  --color-green: hsl(var(--green-h) var(--green-s) var(--green-l));
  --color-green-text: hsl(var(--green-h) var(--green-s) var(--green-l) / 1);
  --color-green-stroke-strong: hsl(var(--green-h) var(--green-s) var(--green-l) / 0.8);
  --color-green-stroke-weak: hsl(var(--green-h) var(--green-s) var(--green-l) / 0.2);
  --color-green-fill: hsl(var(--green-h) var(--green-s) var(--green-l) / 0.05);
  --text-h: 230;
  --text-s: 100%;
  --text-l: 100%;
  --color-text: hsl(var(--text-h) var(--text-s) var(--text-l));
  --color-textstrong: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.9);
  --color-textweak: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.6);
  --color-strokestrong: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.45);
  --color-strokeweak: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.10);
  --color-fill: hsl(var(--text-h) var(--text-s) var(--text-l) / 0.10);
  --bg-h: 0;
  --bg-s: 0%;
  --color-background: hsl(var(--bg-h) var(--bg-s) 245%);
  --color-base: hsl(var(--bg-h) var(--bg-s) 250%);
  --color-raised: hsl(var(--bg-h) var(--bg-s) 255%);
  --color-overlay: hsl(var(--bg-h) var(--bg-s) 255%);

  --color-background: #111;
  --color-raised: rgba(255, 255, 255, 0.05);
  --color-base: rgba(255, 255, 255, 0.05);
  --color-background: #111;
  --color-overlay: rgba(0, 0, 0, 1);

}

.warning h1,
.warning h2,
.warning h3,
.warning h4,
.warning h5,
.warning h6,
.error h1,
.error h2,
.error h3,
.error h4,
.error h5,
.error h6 {
  color: inherit;
}

a {
  color:var(--color-brand);
}

footer > nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--gap-m);
  font-size: var(--fontsize-heading4);
  line-height: var(--lineheight-heading4);
}

footer > nav > a {
  width: auto;
  aspect-ratio: 1/1;
  border: 1px solid;
  border-radius: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.positive {
  color: #41f960;
}
.negative {
  color: #ff3030;
}

body.account main section.slider > div.card {
    background: rgba(from var(--color) r g b / 30%);
    border: var(--gap-xxxs) solid;
    border-color: var(--color);
    --color-brand: var(--color);
}

main > section {
    max-width: 50vw;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
}

main > section.list {
    margin-top: var(--gap-l);
}

main > section.list > div.transaction > div {
    text-overflow: ellipsis;
    white-space: break-spaces;
    word-wrap: break-word;
    width: 100%;
    max-width: calc(100% - 144px);
}

main > section.list > div.transaction > div:last-child {
    width: 8rem;
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media screen and (max-width: 600px) {
  main > section {
    box-shadow: none;
    max-width: 100vw;
  }

  main > section.list > div.transaction {
    flex-direction: column;
  }

  main > section.list > div.transaction > div {
    width: 100%;
    max-width: unset;
  }

  main > section.list > div.transaction > div:last-child {
    flex-direction: column-reverse;
    width: 100%;
  }
}

h2 {
  color: var(--color-brand);
}

div[api="list"] > div.item > div:not(.order), div[api="list"] > div.item > a.folder {
  background: var(--color-base);
}