add rgb-ears

assets/css/rgb-ears-style.css

@@ -0,0 +1,62 @@
+: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;
+}