body {
  font-family: system-ui;
  background-color: Canvas;
  color: CanvasText;
  color-scheme: light dark;
}

@media (orientation: portrait) {
  #main {
    flex-direction: column;
  }

  #pagination {
    margin-top: 0.25rem;
  }
}

#main {
  display: flex;
  column-gap: 0.25rem;
}

main {
  flex-grow: 1;
}

#pagination {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem;
  border: 1px solid #cacaca;
  margin-bottom: 0.1rem;
  position: sticky;
  top: 0;
  background: Canvas;
  /* box-shadow: 1px 33px 29px -1px rgba(0,0,0,0.18); */
}

nav {
  position: sticky;
  top: 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid #d3d3d3;
  /* box-shadow: 1px 33px 29px -1px rgba(0,0,0,0.18); */
  ul {
    list-style-type: none;
    padding: 0;

    a {
      text-decoration: none;
    }
  }
}

#feed-items {
  margin: 0;
  padding: 0;
}

.feed-item {
  display: flex;
  flex-direction: column;

  border: 1px solid #cacaca;
  margin-bottom: 0.1rem;

  /* box-shadow: 1px 33px 29px -1px rgba(0,0,0,0.18); */

  &:first-child {
    margin-top: 0;
  }

  a {
    padding: 0.25rem 0.1rem;
    background-color: Canvas;
    text-decoration: none;
  }

  span {
    padding: 0.1rem;
  }

  .feed-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: Field;
    color: GrayText;
  }

}