/*COMMON*/
header {
  font-family: Arial, Helvetica, sans-serif;
}
article {
  font-family: courier;
}

h1 {
  font-family: courier;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  display: grid;
}

header {
  text-align: center;
}

/* nav bar */

li {
  background-color: #c3d9e3;
  color: black;
  border-radius: 1px;
  border: white 1px solid;
  padding: 10px;
  font-family: "Courier New", Courier, monospace;
  list-style: none;
}

li:hover {
  background-color: #8ab9bc;
  color: white;
  border: black;
}

a {
  text-decoration: none;
  color: black;
}

ul {
  padding-left: 0;
}

@media (min-width: 40em) {
  body {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "header"
      "nav main"
      "footer footer";
  }
  main {
    grid-column: span 2;
    padding: 10px;
  }

  header {
    grid-column: span 3;
    text-align: left;
    padding-left: 20px;
  }

  .main_image {
    /* flex-basis: 40%;*/
    display: flex;
    margin: 10px;
    align-items: center;
  }
  .description {
    padding: 20px;
    display: flex;
  }
}

/* story boxes */

.shorts {
  position: relative;
  display: grid;
  padding: 10px;
  margin: 10px;
  background-color: #c3d9e3;
}

.logline {
  background-color: whitesmoke;
  padding: 20px;
}

.title {
  margin: 0;
  padding-left: 5px;
}

.shorts:hover {
  background-color: #8ab9bc;
  border: black;
  .logline {
    background-color: #c3d9e3;
  }
}

.pagecount {
  position: absolute;
  padding-bottom: 2px;
  padding-right: 3px;
  bottom: 0;
  right: 0;
  font-size: 20px;
}

/*icons*/

.icon {
  padding: 5px 20px 5px;
}

/*homepage*/

.headline {
    text-align: center;
}