body {
  background: #282a36;
  background-position-y: 15rem;
  background-repeat: no-repeat;
}

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;
  font-size: .75em;
}

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

@media screen and (max-width: 768px) {
  .branding {
    display: block;
  }
}

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

.name {
  color: #6272a4;
}

.autogrid {
  padding: .5rem .5rem .5rem 0;
}

.col {
  padding-left: .5rem;
}

.feed-card {
  background: linear-gradient(180deg, rgba(68,71,90,.6) 0%, rgba(68,71,90,0) 95%);
  color: #f8f8f2;
  border-radius: .5rem;
  margin: 0 0 .5rem;
}

.feed-card h2 {
  margin-top: -.25rem;
}

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; }
}

meter {
  --background: #282a36;
  --optimum: #ff79c6;
  --sub-optimum: gold;
  --sub-sub-optimum: crimson;

  /* The gray background in Firefox */
  background: var(--background);
  display: block;
  margin-bottom: 1em;
  width: 100%;
}

/* The gray background in Chrome, etc. */
meter::-webkit-meter-bar {
  background: var(--background);
}

/* The green (optimum) bar in Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {
  background: var(--optimum);
}

/* The green (optimum) bar in Chrome etc. */
meter::-webkit-meter-optimum-value {
  background: var(--optimum);
}

/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--sub-optimum);
}

/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
  background: var(--sub-optimum);
}

/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--sub-sub-optimum);
}

/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
  background: var(--sub-sub-optimum);
}