:root {
  --white: #fff;
  --grey: #1e1e1d;
  --yellow: #ffad15;
  --offwhite: #f8f8f8;
  --darkerwhite: #d3d3d3;
  --font-franklin: 'franklin-gothic-urw', helvetica, sans-serif;
}

@media (min-width: 55em) {}

:root {
  --red: #ff3030;
  --red-light: #ff8d8d;
}

body {
  background: #fff;
  color: var(--grey);
}

.article-hero {
  box-shadow: inset 0 4px 0 var(--red-light);
}

[role='banner'] {
  padding-top: 0;
}

.logo::before {
  background-color: var(--red);
  content: '';
  display: block;
  height: 4px;
  margin: 0 auto 0.6em auto;
  width: 70%;
}

.logo-name,
.logo-title {
  fill: var(--red);
}

.logo:hover .logo-name,
    .logo:hover .logo-title,
    .logo:focus .logo-name,
    .logo:focus .logo-title {
  fill: var(--red-light);
}

[role='navigation'] {
  border-bottom-color: var(--red)
}

[role='navigation'] a {
  color: var(--red);
}

[role='navigation'] a:hover,
    [role='navigation'] a:focus {
  color: var(--red-light);
}

[data-page='article'] .nav-articles,
[data-page='articles'] .nav-articles,
[data-page='project'] .nav-projects,
[data-page='projects'] .nav-projects,
[data-page='about'] .nav-about {
  color: var(--red-light);
}

.e-header .p-name,
  .e-header .dt-published {
  color: var(--red);
}

.entry-intro {
  color: var(--red)
}

.entry-intro::after {
  background-color: var(--red);
}

.entry-intro + p:first-letter {
  color: var(--red);
}

.e-content {
  color: var(--red)
}

.e-content h2,
  .e-content h3,
  .e-content h4,
  .e-content h5,
  .e-content h6 {
  color: var(--red);
}

.h-entry a {
  color: var(--red);
}

[role='contentinfo'] {
  border-top-color: var(--red)
}

[role='contentinfo'] .contact a {
  color: var(--red);
}

[role='contentinfo'] .contact a:hover,
      [role='contentinfo'] .contact a:focus {
  color: var(--red-light);
}