body {
  background-color: #FAFAFA;
  color: #343434;
  padding: 1rem;
}

.logo, .logo a:link, .logo a:visited, .logo a:hover {
  opacity: 0.5;
  color: #343434;
}

h1, h2 {
  color: #DB3E48;
}

h1 {
  font-weight: 400;
  font-size: 4rem;
  margin-top: 2rem;
}

h2 {
  font-size: 1.5rem;
  margin-top: 0;
  font-weight: normal;
  margin-top: 2rem;
}

a, a:link, a:visited {
  color: #566BF5;
}

a:hover {
  text-decoration: underline;
}

a.btn {
  text-decoration: none;
  background-color: #DB3E48;
  color: white;
  font-weight: bold;
  border-radius:23px;
  padding-left: 1rem;
  padding-right: 1rem;
}

a.btn:hover {
  background-color: #AC1821;
  color: white;
}

.footer {
  opacity: 0.5;
}

.read-more {
  display: none;
}

ul {
  padding-left: 1rem;
}

@media only screen and (max-width: 768px) {
  #description:not(:target) .read-more {
    display: inline;
  }

  #description:target .read-more {
    display: none;
  }

  #description:not(:target) p:not(:first-child), #description:not(:target) ul:not(:first-child) {
    display: none;
  }

  #description:target p:not(:first-child), #description:target ul:not(:first-child) {
    display: block;
  }

  .read-more {
    white-space: nowrap;
    display: inline;
  }
}

#screenshots + .button {
  text-align: center;
  margin-top: 1rem;
}

.author-bio {
  margin-top: 3rem;
  padding-top:1.5rem;
  border-top: 1px solid #ddd;
}