header {
  max-width: 950px;
  margin: auto;
  padding: 10px;
}
header > h1 {
  padding-top: 1rem;
  margin: 0;
}
header > p {
  text-overflow: ellipsis;
  margin: 0;
}

main {
  max-width: 950px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 10px;
  padding: 10px;
}

article.item {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 10px;
  transition: 100ms;
}
@media (prefers-color-scheme: dark) {
  article.item {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1);
  }
}

article.item:hover {
  transform: translateY(-5px);
}

article.item > .title {
  margin: 1rem 0 0 0;
}

article.item > .message {
  margin: 0 0 1rem 0;
}

footer {
  max-width: 950px;
  margin: auto;
  padding: 10px;
}
footer > p {
  font-size: 0.5rem;
  margin: 0;
}