@import url("common.css");

html,
body {
  padding: 16px 32px;
  background: var(--grey-10);
}

#feed-header {
  max-width: 80ch;
  margin: 0 auto;
}

#feed-logo {
  float: right;
  max-width: 188px;
  max-height: 48px;
  margin: 0 0 8px 8px;
}

#feed-title {
  font-size: 1.777em;
  margin: 0 0 4px 0;
}

#feed-subtitle {
  color: var(--grey-50);
  margin: 0 0 16px 0;
}

.entry {
  clear: both;
  margin: 16px auto;
  padding: 16px;
  max-width: 80ch;
  background: var(--white-100);
  border-radius: 4px;
  box-shadow: 0 1px 2px var(--grey-90-a40);
}

details.entry > summary {
  display: flex;
  align-items: center;
  list-style-type: none;
  padding: 0 8px;
}

details.entry > summary:focus {
  outline: none;
}

details.entry > summary::before {
  content: url('../images/arrow.svg');
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

details.entry[open] > summary {
  margin: 0 0 8px 0;
}

details.entry[open] > summary::before {
  transform: rotate(90deg);
}

.entry-header {
  margin: 0 0 0 8px;
}

.entry-title {
  font-size: 1.333em;
  margin: 0 0 4px 0;
}

.entry-date {
  color: var(--grey-50);
  margin: 0;
}

.entry-content {
  width: 100%;
  height: 24em;
  border: 1px solid var(--grey-90-a10);
}

.entry-files {
  padding: 0 8px;
}

.entry-files-title {
  font-size: 1em;
  margin: 0 0 4px 0;
}

.entry-files-list {
  margin: 0;
  padding: 0 0 0 32px;
  color: var(--grey-50);
}