@font-face {
  font-family: "ConChars2";
  src: url("/fonts/Conchars2.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-size: 1.5rem;
}

:root {
  --color-bg: #e0e5ec;
  --color-fg: #333333;
  --color-primary: #e2574a;
  --color-secondary: #822c2c;

  --font-title: "ConChars2", sans-serif;
  --font-body: "ConChars2", sans-serif;
  --font-extras: "ConChars2", sans-serif;
}

.dark {
  --color-bg: rgba(163, 201, 178, 0.5);
  --color-fg: #e2e8f0;
  --color-primary: #822c2c;
  --color-secondary: #e2574a;
}

.hydra-card {
  background-color: rgba(163, 201, 178, 0.3);
  padding: 2rem;
  border-radius: 8px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-title);
  text-transform: uppercase;
}