:root {
  --font-family: "Carlito", sans-serif;
  --card-max-width: 40em;
  --card-radius: 8px;

  --text-fg: #ffffff;
  --text-bg-selected: #545454;
  --page-bg: #2a2a2a;
  --card-bg: #3f3f3f;
  --site-bg: #2c2c2c;
  --card-border: #545454;
  --card-shadow: #0000001f;
  --divider: #545454;
  --link-fg: #87b0f9;
  --link-fg-active: #89dceb;
  --h1-fg: #a6e3a1;
  --h2-fg: #94e2d5;
  --h3-fg: #cba6f7;
  --h4-fg: #f38ba8;
  --h5-fg: #89dceb;
  --h6-fg: #ffffff;
}

html,
body {
  margin: 0;
  background: var(--site-bg) !important;
}

body {
  background-color: var(--page-bg);
  color: var(--text-fg);
  cursor: default;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- deck: swipe up / scroll down flips the card over ---------- */

.deck {
  box-sizing: border-box;
  display: grid;
  height: 100dvh;
  overflow: hidden;
  padding: 1.5em 1.25em;
  perspective: 1000px;
  place-items: center;
  touch-action: none;
}

/* Two faces on one rotating pane. Each flip turns it 180deg and the
   face that comes round gets the next card's content. */
.flipper {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.15, 0.5, 0.3, 1.3);
  width: min(calc(var(--card-max-width) + 2px), 100%); /* +2px = card border */
}

@media (prefers-reduced-motion: reduce) {
  .flipper {
    transition: none;
  }
}

.deck-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.deck-dot {
  background: var(--divider);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 8px;
  padding: 0;
  width: 8px;
}

.deck-dot.is-active {
  background: var(--text-fg);
}

/* ---------- card: two fields split by a dashed divider ---------- */

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow:
    var(--card-shadow) 0px 7px 14px 0px,
    var(--card-shadow) 0px 3px 6px 0px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  align-self: center;
  grid-area: 1 / 1;
}

.card.is-back {
  transform: rotateX(180deg);
}

.card ::selection {
  background-color: var(--text-bg-selected);
}

.card hr {
  background-color: transparent;
  border: none;
  border-bottom: 1px dashed var(--divider);
  padding: 0;
}

.field {
  padding: 1em;
}

.field:last-of-type {
  padding-bottom: 1.4em;
}

@media (max-width: 768px) {
  .field {
    margin: 0.25em 0.25em 0.75em;
  }
}

.center {
  text-align: center;
}

.center ul,
.center ol {
  padding-inline-start: 0;
}

.center li {
  margin: 0 auto;
  width: fit-content;
}

/* ---------- content inside fields ---------- */

a,
a:visited {
  color: var(--link-fg);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--link-fg-active);
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
.card {
	transition: opacity 0.3s;
	opacity: 100%;
}
ul {
	margin: 0;
}
[inert] {
	opacity: 0%;
}
.card:not([inert]) {
	opacity: 100%;
}