@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: #4a90e2;
  --color-secondary: #2c5282;

  --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: #63b3ed;
  --color-secondary: #4299e1;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-title);
  font-size: 44px !important;
  text-transform: uppercase;
  line-height: 38px;
}