body {
  background: #282a36;
}

header {
  position: relative;
  color: white;
  height: 15rem;
  text-align: center;
  padding-top: 3rem;
  background: url('./header.jpg');
  background-size: cover;
  background-position: bottom;
}

header:after {
  content: '';
  background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(40,42,54,1) 100%);
  height: 4rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

footer {
  text-align: center;
  color: #f1fa8c;
}

.branding {
  line-height: 2.5rem;
  display: inline-block;
  margin-right: 2rem;
}

.logo {
  height: 2rem;
  vertical-align: bottom;
  margin: .5rem;
}

.name {
  color: #6272a4;
}

.feed-card {
  background: #44475a;
  color: #f8f8f2;
  border-radius: .5rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #f8f8f2;
}

a {
  color: #ff79c6;
}

a:hover,
a:target {
  color: #bd93f9;
}

a:active {
  color: #f8f8f2;
}

meter {
  height: 1.5em;
  width: 100%;
}

.fadein {
  animation: fadein 1s;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}