diff --git a/index.css b/index.css
index 7b4db34..c637124 100644
--- a/index.css
+++ b/index.css
@@ -1,11 +1,337 @@
 :root {
   /**
    * Palette
-   * New Leaf Feeds Template
-   * Nicholas A. Ferrell (https://thenewleafjournal.com/author/naferrell, https://social.emucafe.org/naferrell)
+   * Gruvbox dark, medium
+   * Dawid Kurek (dawikur@gmail.com), morhetz (https://github.com/morhetz/gruvbox)
    */
+  --base00: #282828; /* ---- */
+  --base01: #3c3836; /* --- */
+  --base02: #504945; /* -- */
+  --base03: #665c54; /* - */
+  --base04: #bdae93; /* + */
+  --base05: #d5c4a1; /* ++ */
+  --base06: #ebdbb2; /* +++ */
+  --base07: #fbf1c7; /* ++++ */
+  --base08: #fb4934; /* red */
+  --base09: #fe8019; /* orange */
+  --base0A: #fabd2f; /* yellow */
+  --base0B: #b8bb26; /* green */
+  --base0C: #8ec07c; /* aqua/cyan */
+  --base0D: #83a598; /* blue */
+  --base0E: #d3869b; /* purple */
+  --base0F: #d65d0e; /* brown */
 
   /**
-   * Typography
+   * Typograph
    */
-  --font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace
+  --font-family-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+    "Helvetica Neue", sans-serif;
+  --font-size-L: 3.6rem;
+  --font-size-m: 2.2rem;
+  --font-size-s: 1.8rem;
+  --font-size-scaler: 62.5%; /* 1rem = 10px */
+  --line-height-body: 1.4;
+  --line-height-heading: 1.2;
+
+  /**
+   * Components
+   */
+  --body-color: var(--base04);
+  --body-bg: var(--base00);
+  --body-padding: 32px 24px;
+  --body-stack-gap: 32px;
+
+  --accordion-content-hover-rail-color: var(--base04);
+  --accordion-content-rail-color: var(--base03);
+  --accordion-marker-color: var(--article-title-color);
+  --accordion-marker-expanded-color: var(--base03);
+  --accordion-marker-hover-color: var(--accordion-marker-color);
+  --accordion-marker-expanded-hover-color: var(--accordion-marker-color);
+  --accordion-rail-indent: 7px;
+
+  --article-image-border-color: var(--base03);
+  --article-image-radius: 6px;
+  --article-image-shadow: none;
+  --article-reading-time-color: var(--base04);
+  --article-stack-gap: 16px;
+  --article-summary-color: var(--base05);
+  --article-summary-hover-color: var(--base07);
+  --article-title-color: var(--base0E);
+  --article-title-expanded-color: var(--base0E);
+
+  --card-bg: var(--base01);
+  --card-border-color: var(--base03);
+  --card-padding: 16px;
+  --card-radius: 8px;
+  --card-shadow: none;
+  --card-stack-gap: 24px;
+
+  --daily-heading-color: var(--base03);
+  --daily-heading-hover-color: var(--base04);
+
+  --footer-color: var(--base03);
+  --footer-link-hover-color: var(--base04);
+
+  --source-link-color: var(--base04);
+  --source-link-hover-color: var(--base07);
+  --source-name-color: var(--base0A);
+  --source-name-hover-color: var(--base07);
+}
+
+/**
+ * Internals below
+ *
+ * If you can't create a specific look and feel with the configuration above,
+ * you might have reached the customization limit of the template.
+ *
+ * Options:
+ * 1. File an issue with the template.
+ * 2. Target specific elements and write your own CSS. A future change in HTML may break your style.
+ * 3. (Coming soon...) Write your own template with Template Extensibility API.
+ */
+
+/** RESETS */
+
+* {
+  box-sizing: border-box;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/** GENERIC */
+html {
+  font-size: var(--font-size-scaler);
+}
+
+body {
+  background-color: var(--body-bg);
+  font-family: var(--font-family-default);
+  line-height: var(--line-height-body);
+  color: var(--body-color);
+  margin: 0;
+  gap: var(--body-stack-gap);
+  padding: var(--body-padding);
+  display: grid;
+}
+
+/** COMPONENTS */
+.article-expander {
+  padding: 4px 0;
+}
+
+.article-expander__title {
+  color: var(--article-title-color);
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-heading);
+  font-weight: 600;
+  user-select: none;
+  display: -webkit-box;
+  cursor: pointer;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.article-expander[open] .article-expander__title {
+  display: block;
+  color: var(--article-title-expanded-color);
+}
+.article-expander__title::before {
+  content: "•";
+  color: var(--accordion-marker-color);
+  display: inline-flex;
+  justify-content: center;
+  width: 16px;
+  font-weight: 700;
+  margin-right: 6px;
+  font-family: monospace;
+}
+.article-expander__title::-webkit-details-marker {
+  display: none; /* remove triangle from Safair */
+}
+.article-expander[open] .article-expander__title::before {
+  color: var(--accordion-marker-expanded-color);
+}
+.article-expander .article-expander__title:hover::before {
+  content: "+";
+  color: var(--accordion-marker-hover-color);
+}
+.article-expander[open] .article-expander__title:hover::before {
+  content: "-";
+  color: var(--accordion-marker-expanded-hover-color);
+}
+
+.article-image {
+  display: none;
+  border-radius: var(--article-image-radius);
+  border: 1px solid var(--article-image-border-color);
+  box-shadow: var(--article-image-shadow);
+}
+.article-expander[open] .article-image {
+  display: block;
+}
+
+.article-summary-link {
+  color: var(--article-summary-color);
+  font-size: var(--font-size-m);
+  text-decoration: none;
+}
+
+.article-summary-link:hover {
+  color: var(--article-summary-hover-color);
+  --accordion-content-rail-color: var(--accordion-content-hover-rail-color);
+}
+
+.article-summary-box-outer {
+  display: block;
+  padding: 6px var(--accordion-rail-indent) var(--article-stack-gap) var(--accordion-rail-indent);
+}
+
+.article-summary-box-inner {
+  padding-left: 14px;
+  border-left: 1px solid var(--accordion-content-rail-color);
+  font-size: var(--font-size-s);
+  overflow-wrap: anywhere;
+  word-break: break-word; /* same as above, for Safari compatitiliby */
+}
+
+.article-reading-time {
+  font-weight: 400;
+  color: var(--article-reading-time-color);
+  font-size: var(--font-size-s);
+  white-space: nowrap;
+}
+
+.card {
+  border-radius: var(--card-radius);
+  box-shadow: var(--card-shadow);
+  background: var(--card-border-color);
+  border: 1px solid var(--card-border-color);
+  overflow: hidden;
+}
+
+.card__section {
+  display: grid;
+  padding: var(--card-padding);
+  background: var(--card-bg);
+}
+
+.daily-heading {
+  display: grid;
+  font-size: var(--font-size-L);
+  font-weight: 700;
+  margin: 0 0 4px 0;
+}
+
+.daily-heading-toggle {
+  font: inherit;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 16px;
+  border: none;
+  background: none;
+  padding: 0 var(--card-padding);
+  text-align: start;
+  cursor: pointer;
+  color: var(--daily-heading-color);
+  text-transform: uppercase;
+}
+.daily-heading-toggle:hover {
+  color: var(--daily-heading-hover-color);
+}
+.daily-heading-toggle__date {
+  font-size: var(--font-size-m);
+}
+
+footer {
+  color: var(--footer-color);
+  font-size: var(--font-size-s);
+  display: flex;
+  padding: 0 16px;
+  justify-content: space-between;
+}
+
+.footer-link {
+  color: var(--footer-link-text);
+  text-decoration: none;
+}
+
+.footer-link:hover {
+  color: var(--footer-link-hover-color);
+  text-decoration: underline;
+}
+
+.media-object {
+  display: grid;
+  gap: 16px;
+}
+.media-object__media {
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  width: 100%;
+}
+
+@media screen and (min-width: 40rem) {
+  .media-object {
+    grid-template: "text media" auto / 1fr auto;
+  }
+  .media-object__text {
+    grid-area: text;
+  }
+  .media-object__media {
+    height: 100px;
+    width: auto;
+    grid-area: media;
+    margin-bottom: var(--article-stack-gap);
+  }
+}
+
+.sources {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 1px;
+}
+
+.source-heading {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  font-size: var(--font-size-s);
+  margin: 0 0 8px 0;
+  padding-right: var(--accordion-rail-indent);
+}
+.source-heading__name {
+  font: inherit;
+  font-size: var(--font-size-s);
+  font-weight: 400;
+  text-align: start;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--source-name-color);
+  flex-grow: 1;
+}
+.source-heading__name:hover {
+  color: var(--source-name-hover-color);
+}
+.source-heading__link {
+  color: var(--source-link-color);
+  font-weight: 400;
+  text-decoration: none;
+}
+.source-heading__link:hover {
+  color: var(--source-link-hover-color);
+  text-decoration: underline;
+}
+
+.z-stack {
+  display: grid;
+}
+.z-stack__layer {
+  grid-area: 1/1/-1/-1;
+}