/*sitewide colors etc*/
body {
  background-color: black;
  color: white;
  font-family: Verdana;
margin-left: auto;
margin-right: auto;
max-width: 60%;

}
/*end sitewide colors etc*/


blockquote {
  margin: auto;
  max-width: 80%;
  font-size: 1.65em;
  text-align: justify;
  margin-top: 1.3em;
  margin-bottom: 1.3em;
  font-family: bakersville, serif;
  line-height:1.2em;
  color: #cccccc;
}


  
/*formatting for narrower content display window*/  
  .content-box {
    max-width: 75%;
    margin: auto;
    font-size:1.1em;
  }
  
  



/*formatting for the paragraph text on individual story pages. the div class selector should be the largest nest, with the indents and other formatting going inside */

.body-text {
    font-size: 1.2em;
    text-align: justify;
    max-width:70%; 
    margin:auto;
}

.body-text p {
    text-indent: 2em;
}
 
/*end story page text format*/



.note{
   color: #cccccc;
	  font-style: italic;
}



/*poetry formatting*/
.poetry {
  text-align: justify;
  margin: auto;
  max-width: 55%;
  font-style: italic;
}

.poem-box {
  text-align: left; /* align text to the left */
  display: flex;
  justify-content: center; /* center the container horizontally */
}
/*end poetry formatting*/





 /* Table Styling */
.story-table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        margin-top: 2em;
    }
    
    .story-table th,
    .story-table td {
        padding: 10px;
        text-align: left;
        vertical-align: top;
        font-size: 1.4em;
    }
    
    .story-table th {
        font-weight: bold;
        background-color: #000000;
        border: 3px solid #dddddd;
    }
    
    .story-table td {
        border: 3px solid #DDDDDD;
    }
    
    .story-table tbody tr:nth-child(even) {
        background-color: #000000;
        
    }
   .story-table tbody tr:nth-child(odd) {
        background-color: #673147;
        
    }
    .story-table tbody tr:nth-child(odd):hover {
        background-color: #994868;
    }

    .story-table tbody tr:nth-child(even):hover {
        background-color: #292929;
    }




/*header and nav styling*/
 
 header {
    border: 5px solid white; 
    padding: 10px;
  }
  
  h1{
    margin-top:0;
    margin-bottom:0;
    margin-left:10px;
    font-size:3em;
  }
  
  
  nav {
  background-color: #673147;
  height: auto;
  display:block;
}
  

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;
}

nav ul li {
  display: inline-block;
  font-size:1.3em;
}

nav ul li a {
  display: block;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
  font-size: 1.15em;
  line-height: 50px;
}

nav ul li a:hover {
  background-color: #994868;
}

/*end header styling*/

.justify{
  text-align:justify;
}


p{
  font-size: 1.5em;
  line-height: 1.3em;
}

h2{
  font-size:2em;
}

h3{
  font-size:1.4em;
  margin-top:.6em;
}

/*link color and weight*/

a {
    font-weight: bold;
    color: white;
}

.offsite{
  color:#e36588;
}
/*end link color and weight*/


/*center text*/
.center{
  text-align: center;
  margin:auto;
  margin-top:.8em;
  margin-bottom:.8em;
}














/*text indent*/
.indent {
    text-indent: 2.5em;
  }

/*end text indent*/


/*center*/
.title {
  margin: auto;
  margin-top:.5em;
  line-height: 1em;
  text-align:center;
  max-width:40vw;
}



/*mobile formatting*/

@media screen and (max-width: 1200px) {
   .body-text {
    width:100%;
    max-width: 95%;
     text-align: left;
   }
     
     
   body {
    max-width: 100%;
    margin-right:5vw;
    margin-left:5vw;
  }
      
  nav {
    background-color: #673147;
    height: auto; /* set height to auto to allow for dynamic content */
    padding-bottom:10px;
  }
    
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start; /* align items to the top of each row */
  }
      
  nav ul li {
    flex-basis: calc(33.33% - 30px); /* set the width of each item to one-third minus the padding */
    }
    
    
  nav ul li a {
    display: block; /* make the link fill the width of the item */
    padding: 20px;
    font-size: 3em;
    font-weight: 600;
    line-height: 1; /* set line-height to 1 to remove extra spacing */
  }
    
  nav ul li :hover{
    color: #673147;
  }
    
     header {
    border: 5px solid white; 
    padding: 10px;
     }
    
   h1 {
    font-size: 5em;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    }
    
    h2{
      font-size:3em;
    }
    
    h3{
      font-size:2em;
    }
    
    p{
    font-size:2.1em;
    }
     
   .content-box {
    max-width: 95vw;
      }
      
  .title {
  max-width:80vw;
  }
}


@media screen and (max-width: 1200px) {
  .story-table th,
  .story-table td {
     font-size: 2.7em;
     border:5px solid white;
    }
    
  .table-container{
    overflow-x: auto;
    max-width: 90%;
    margin: 0 auto;
  }
}

/*end mobile formatting*/