body {
  margin: auto;
  width: 61em;
  font-family: 'Alegreya', sans-serif;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content:center;
  align-items:center;
}



header h1 {
  display: none;
}

header img {
  width: 100%;
}
.column img {
  width: 100%;
}

h1{
  font-weight: 400;
}

h2, h3, h4, h5, h6 {
  font-family: 'Alegreya Sans';
  font-weight: 400;
}

section#issue {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

section#backlist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

main {
  padding: 1ex;
}

a, a:visited {
  text-decoration: underline;
  color: #404040;
}

a:hover {
  text-decoration: underline;
  color: magenta;
}

p.authorbio {
  margin: auto;
  font-size: small;
  background-color: lightgray;
  width: 75%;
  padding: 1ex;
}

section {
  clear: both; /* Sections should clear floats and be full width */
}

section#menu ul {
  justify-content: space-around;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0px;
  margin-bottom: 1em;
  padding: .25em;
}

section#menu li {
  color: #ffffff;
  border: 0px solid black;
  border-radius: 1ex;
  padding: .25em;
  margin: .25em;
  font-size: 2em;
  font-family: 'Alegreya Sans';
  font-weight: 100;
  background-color:#333366;
}

section#menu li:hover {
  background-color: magenta;
}

section#menu li a {
  color: white;
  text-decoration: none;
}

section#menu li a:hover {
  color: white;
  text-decoration: none;
}


section#issue h1, h2, h3, h4, h5 {
  border: none;
}

section#tag a {
  text-decoration: none;
  border: 2px solid #404040;
  border-radius: 3px;
  color: white;
  background-color: #404040;
}

section#tag a:hover {
  border: 2px solid magenta; 
  background-color: magenta;
}

section#tag p {
  text-align: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-variant: small-caps;
}



section#story {
  width: 40em;
  margin-left: 10.5em;
  margin-right: 10.5em; /* the margins account for the narrowed width */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

section#story h1 {
  font-size: xx-large; 
}

section#story h2 {
  font-size: x-large; 
  border: none;
}

section#story h3 {
  border: none;
}

section#story h1, section#story h2 {
  background-color: white;
  text-align: center;
}

section#story h3, section#story h4 {
  width: 100%;
  margin: .5ex;
}

section#story p {
  text-indent: 2em;
  width: 100%;
  margin: 1ex;
}

section#story p.centered {
  text-align: center;
}

section#issue {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

section#issue div {
  width: 45%;
  margin: 1ex;
}

section#issue div img{
  width: 100%;
}

section#issue ul li {
  list-style-type: none;
  font-family: 'Alegreya Sans';
  font-weight: 400;
  font-size: large;
  margin: 1em;
}

section#issue ul li:nth-child(even) { /* This staggers every other story title */
  margin-left: 3em;
}



footer {
  color: white;
  margin-top: 1em;
  border-top-left-radius: 1ex;
  border-top-right-radius: 1ex;
  padding: 1ex;
  background-color: #404040;
  text-align: center;
}

footer a, footer a:visited {
  color: white;
}

footer a:hover {
  color: magenta;
}

div#coverstory {
  padding: 1ex;
  padding-top: 0em;
  width: 65%;
  float: left;
}

#coverstory img {
  width: 100%;
}

#coverstory div {
  width: 100%;
  height: 24em;
  clip-path: content-box;
  overflow: hidden;
  border-bottom: 1.5ex solid #404040;
}

.column {
  padding: 1ex;
  padding-top: 0em;
  width: 31%;
  float: left;  
}

div.column h1, h2, h3, h4, h5 {
  border-left: .5ex solid black;
  padding-left: .5ex;
}

.column div {
  width: 100%;
  height: 12em;
  overflow: hidden;
  border-bottom: 1.5ex solid #404040;
}

.column div:hover {
  border-bottom: 1.5ex solid magenta;
}


.center {
   text-align: center; 
}


/* Definitions for tablet displays */

@media only screen and (min-width: 481px) and (max-width: 1024px) {
  body {
    width: 100%;
  } 
  
  header svg {
  width: inherit;
}
  main {
    padding: 1ex;
  }
  
  header {
    text-align: center;
  }
  
/*  p, h1, h2, h3, h4, h5, h6 {
  } */
  section#menu li {
    font-size: 2em;
  }
  .column div {
    width: 100%;
    height: 10em;
    overflow: hidden;
    border-bottom: 1.5ex solid black;
  }


section#story {
  width: 30em;
  margin-left: 15.5em;
  margin-right: 15.5em; /* the margins account for the narrowed width */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

  
  div#coverstory {
    padding: 1ex;
    padding-top: 0em;
    width: 48%;
    float: left;
    clear: right;
  }
  .column {
  padding-left: 0ex;
  padding-right: 1ex;
  width: 48%;
  float: left;
  clear: right;
  }
}

/* Definitions for smartphone displays */

@media only screen and (max-width: 480px) {
  body {
    width: 100%;
  } 
  main {
    padding-top: 1ex;
    padding-bottom: 1ex;
    padding-left: 0ex;
    padding-right: 0ex;
  }
    
div#coverstory {
  width: 100%;
}

div#coverstory img {
  width: 95%;
}
  section#menu li {
    font-size: 1.5em;
  }
  
  section#featured {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  section#issue div {
    width: 95%;
    margin: 1ex;
  }

section#story {
  width: 93%;
  margin-left: 1ex;
  margin-right: 1ex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

  
  p, h1, h2, h3, h4, h5, h6 {
    padding-left: 1ex;
    padding-right: 1ex;
  } 
  
  .column div {
    width: 100%;
    height: 10em;
    overflow: hidden;
    border-bottom: 1ex solid black;
  }
  
  .column {
  padding: 0ex;
  width: 100%;
  }
}