:root {
  /* Use a shade of the c3cat logos pink, which works nicely as a link color. */
  --accent-color-light: #DC049B;
  /* A modified version of accent-color-light, which works nicely as a link color
   * and with the dark theme */
  --accent-color-dark: #dc49b0;
}

body {
  font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;

  text-align: left;

  /* Use dark grey instead of black to be lighter on the eyes. But also a grey
   * which still works with the link color nicely. */
  background-color: #ffffff;
  color: #2B2B2B;

  @media (prefers-color-scheme: dark) {
    /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
    /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
    background-color: #1b1b1b;
    color: #ebebeb;
  }
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 5px;
}

footer {
  margin-top: 4rem;
}

img {
  width: 100%;
}


a:link, a:visited {
  color: var(--accent-color-light);
  @media (prefers-color-scheme: dark) {
    color: var(--accent-color-dark);
  }
}


.title {
  text-align: center;
}

.hero-img {
  max-width: 500px;
  display: block;
  margin: 0 auto;
}

p.bigger {
  font-size: 1.2rem;
}