main {
  font-size: 1.2em }
#article-list{
  li{
    margin-bottom: 8px;
  }}
#article{
  line-height: 1.6em;
}
@media (min-width: 960px) {
  main {
    margin: 2em; }

  #article-list {
    width: 25%; }

  #article-center {
    width: 50%; } }
@media (max-width: 960px) {
  main {
    margin: 1em; }

  #article-list {
    order: 2;
    width: 100%; }

  #article-center {
    order: 1;
    width: 100%; }

  #article-list {
    justify-content: center; }
    #article-list div {
      text-align: center; } }
#article-center {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10vh; }

#article-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; }
  #article-list div {
    width: 100%; }

#article-navigation {
  display: flex;
  justify-content: space-evenly;
  width: 100%; }

#article img {
  width: 100%; }

#title {
  padding-top: 3em; }

#date {
  padding: 1em 0; }