@charset "UTF-8";
/* CSS Document */

@import url(font-awesome.min.css);
@import url('https://fonts.googleapis.com/css2?family=Qwigley&family=Raleway:wght@400;600&display=swap');

 * {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    max-width: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
}	 
	 

body, html {
	background-color: #fff;
    min-height: 100vh;
    margin: 0;
	padding: 0;
	font-family: "Raleway",Helvetica, Arial, "sans-serif";
	font-size: 16px;	/* base */ 
}


  header {
    height: 10vh;
	display: flex;  
	align-items: center;
	background-color: #043c8c;  
  }

header h1 {
	color: white;
	font-family: "Raleway",Helvetica, Arial, "sans-serif";
	font-weight: 400;
	text-transform: uppercase;
	align-self: center;
}


#mainContent {
	margin: 0 2em;
	height: 82vh;
	overflow:hidden;
}


#pageContent {
	padding: 0 2em;
	height: 82vh;
	overflow: auto;
}


/* global menu styles */

#nav ul.menu {
	list-style: none;	
}


ul.menu li {
	font-family: 'Qwigley', "script";
	color: #B0C1D9;
	
}


/* home page menu style
.menu li {
	list-style: none;
	font-family:"Font-Awesome","Raleway",Arial, Helvetica, "sans-serif";  
	color: #B0C1D9;
	line-height: normal;
	width: 100%;
}

*/

.menu li a {
	text-decoration: none;
	color: inherit;
	width: 100%;
}

.menu li a:hover {
	color: white;
	cursor: pointer;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	font-weight: 100;
	text-underline-position: below;
}

/*
.menu li a:active {
	color: red;
	cursor: pointer;
} */


.menu.active {
    left: 0; 
	top: 0;
}

/* blog page styles */

#postOne, #postTwo {
	/* background-color:antiquewhite; */
	margin: 1em;
	/*display: flex;*/

}

#postOne p, #postTwo p {
	/* background-color:antiquewhite; */
	padding: 0 0 6px 0;
	/*display: flex;*/

}

#postOne img, #postTwo img {
	display: block;
	float: right;
	margin: 0 .5em;
}


#singlePost {
	margin: 1em auto;
	width: 60vw;
	line-height: 1.4em;
}


#singlePost img {
	display: block;
	float: right;
	margin: 0 .5em;
}

#singlePost p + p {
	margin-top: 12px;
}

	ul.blogRegular {
		
	}	
	
	li.blogRegular {
		list-style: disc;
		list-style-position: inside;
		margin-left: .5em;

	}


/* type */
h2 {
	padding: 1em 0 0 0;
}

h3 {
	font-family: 'Qwigley', "script";
	font-size: 36px;
	font-weight: 200;
	margin: 3px 0 3px 0;
}

h3 + p {
	margin: 4px 0 0 0;
}

h4 {
	font-family: 'Qwigley', "script";
	font-size: 30px;
	font-weight: 100;
}

h5 {
	color: black;
	font-family: "Raleway",Helvetica, Arial, "sans-serif";
	font-weight: 600;
	margin: 9px 0 0 0;	
	font-size: 1em;
}

.lyric {
	font-size: .8em;
	padding: 0 0 0 1em;
	line-height: .8em;
}


p.quote {
	font-size: 1em;
	padding: 0 0 0 1em;
	line-height: 1.3em;
	border-left: 1px solid darkgray;
}

#sidebar a {
	font-color: darkgray;
	text-decoration:none;
}

#sidebar a:hover {
	text-decoration:underline;
}

.strikethrough {
	text-decoration: line-through;
}



/* footer styles */	
footer {
    background: lightgray;
    height: 8vh;
	display: flex;
	font-size: .9em;
	}


#footerContent{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 8vh;
	flex-basis: 90%;
}

ul.footerList {
	display: flex;
	height: 8vh;
	flex-direction:row;
}

ul.footerList li{
	line-height: normal;
	padding: 0 0 0 2em;
	list-style: none;
	align-self: center;
}

ul.footerList li a {

	align-self: center;
}



#sidebar {
margin: 0 1em;	
	
}

#sidebar p{
	font-size: .8em;
}



/* writing pages styles */


.writingContent{
	margin: 0 0 0 10%;
	/*background-color:antiquewhite;*/
}


#shortFiction{
	/*background-color:aqua;*/
	width: 100%;
}

#shortFiction h2{
	font-size: 1.25em;
	margin: 0;
}

#shortFiction h3 {
	font-size: 2em;
	margin: .7em 0 0 0;
}

.leadLine{
	margin: 0 12px 12px 12px;
	padding-left: 3px;
	color: #646464;
	border-left: 1px solid #646464; 
}


#shortFiction p.description{
		margin: 0 0 2em 0;
	}	


#shortFiction ul {
	padding: 0 0 0 4em;
}

#longFiction{
	/*background-color:burlywood;*/
	width: 75%;
}

#longFiction h2{
	font-size: 1.25em;
	margin: 0 0 1em 0;
}

#longFiction h3 {
	font-size: 2em;
	margin: 0 0 0 1em;
}


#longFiction ul {
	padding: 0 0 0 4em;
}

.content {
  display: flex;
  flex: 1;
  background-color: #F3F3F3;
  color: #000; 
  height: 82vh;
  overflow-y: scroll;	
}	
	
	
.main {
  flex: 1;
  order: 2;
  overflow-y: scroll;
 	
}
	
.sideBar-first{
  width: 20%;
  /*background: #ccc;*/
  order: 1;
	overflow: hidden;
}
	
.sideBar-second{ 
  width: 20%;
  order: 3;
  /*background: #ddd;*/
}


.columns {
  display: flex;
  flex:1;
	}	

h2.writing {
	font-weight: 200;
}

.main p {
	line-height: 150%;
}

.main p + p {
	margin: 0 0 12px 0;
}

.center {
	text-align:center;
}


.copyright {
	font-size: .7em;
	text-align: right;
	padding: 0 1em 0 0;
}

/* device breakpoint styles */

/* mobile devices */
 
@media only screen and (max-width: 768px) {
	
	
header {
	display: flex;
    height: 10vh;
	align-items: center;
  }
	
	header h1 {
	font-size: 1.5em;
	padding-left: 3.5em;
	}	
	
	
	
	section {
	    display: flex;
		flex-direction: column;
	}
	
	
	#singlePost {
	margin: 1em auto;
	width: 85vw;
	line-height: 1.3em;
	overflow: auto;	
}
	
	
	
	#blogPosts {
		display: flex;
		flex-direction: column;
	}		

	#blogPosts p {
		font-weight: 400;

	}
		
	
/* menu styles*/
.menu {
    width: 250px;
    left: -250px;
    padding: 50px; } 
	
.menu li {
	list-style: none;
	border-top: solid 1px rgba(144, 144, 144, .75);
    /* font-size: 1.5em; */
    font-size: 2.5em;
	line-height: 2em;  
}	
		
	
.menu__toggler {
 position: absolute;
  left: 20px;
  z-index: 999;
  height: 28px;
  width: 28px;
  outline: none;
  cursor:pointer;
  display: flex;
  align-items: center; }

  .menu__toggler span,
  .menu__toggler span::before,
  .menu__toggler span::after {
    position: absolute;
    content: '';
    width: 28px;
    height: 2.5px;
    background: #fafafa;
    border-radius: 20px; }
  .menu__toggler span::before {
    top: -8px; }
  .menu__toggler span::after {
    top: 8px; }
  .menu__toggler.active > span {
    background: transparent; }
  .menu__toggler.active > span::before, .menu__toggler.active > span::after {
    /*background: #005c9c;*/
	background-color: red;  
    top: 0px; }
  .menu__toggler.active > span::before {
    transform: rotate(-225deg); }
  .menu__toggler.active > span::after {
    transform: rotate(225deg); }


/*SLIDING MENU PANEL*/
.menu {
 position: absolute;
  left: -40%;
  z-index: 998;
  color: #B0C1D9;
  background-color: #0D0D0D;	
  width: 40%;
  height: 100%;
  padding: 4em 1em 0 2em;
  display: flex;
  flex-direction: column;
  transition: 300ms; }


/* type */	
	
#mainContent {
	font-size: 1em;
	line-height: 150%;
	margin: 0 1em;
	overflow: scroll;
	}

	
h3 {
	font-family: 'Qwigley', "script";
	font-size: 36px;
	font-weight: 200;
}	
	
	
/* list styles for mobile blog page */	
	
	ul.blogRegular {
		
	}	
	
	li.blogRegular {
		list-style: disc;
		list-style-position: inside;
		margin-left: .5em;

	}
	
	
/* writing pages styles for mobile */


.writingContent{
	margin: 0 0 0 5%;
	/*background-color:antiquewhite;*/
	
}

#shortFiction{
	/*background-color:aqua;*/
	width: 100%;
}

#shortFiction h2{
	font-size: 1em;
	margin: 0;
}

#shortFiction h3 {
	font-size: 1.9em;
	margin: 0 0 0 .5em;
}

	
#shortFiction ul {
	padding: 0 0 0 4em;
}
	
#shortFiction li {
	font-size: 1em;
}	

#longFiction{
	/*background-color:burlywood;*/
	width: 100%;
}

#longFiction h2{
	font-size: 1em;
	margin: 0 0 1em 0;
}

#longFiction h3 {
	font-size: 2em;
	margin: 0 0 0 1em;
}


#longFiction ul {
	padding: 0 0 0 4em;
}

.content {
  display: flex;
  flex: 1;
  background-color: #F3F3F3;
  color: #000; 
  height: 82vh;
  overflow-y: scroll;	
}	
	
	
.main {
  flex: 1;
  order: 2;
  overflow-y: scroll;
 	
}
	
.sideBar-first{
  width: 5%;
  /*background: #ccc;*/
  order: 1;
	overflow: hidden;
}
	
.sideBar-second{ 
  width: 5%;
  order: 3;
  /*background: #ddd;*/
}


.columns {
  display: flex;
  flex:1;
	}	

h2.writing {
	font-weight: 200;
}
	
	.main h3 {
		font-size: 2em;
		padding: 12px 0 0 0;
	}	

.main p {
	font-size: 1.1em;
	line-height: 150%;
}

.main p + p {
	margin: 0 0 12px 0;
}

.center {
	text-align:center;
}


.copyright {
	font-size: .7em !important;
	text-align: right;
	padding: 0 1em 0 0;
}
	


} 

/* end mobile devices */


/* tablets  */
@media only screen and (min-width: 769px) {


/* menu code */
	.menu__toggler {
		display:none;
	}
	
	
	#nav ul.menu {
		display: flex;
		height: 10vh;
		background-color: transparent;
		padding: 0 0 0 8em;
		left: 0;
		flex-direction: row;
		justify-content: space-between;
		align-self: center;
	}
	
	
	#nav ul.menu li {
		border-top: none;
		margin-left: 2em;
		display: flex;	
		align-self: center;
		font-size: 1.25em;
	}	

a:hover {
		cursor: pointer;
		font-color: red;
	}	
	/* end tablet */

/* computers */
@media only screen and (min-width: 1024px) {

	section {
		display: flex;
		padding: 1em 2em;
	}	
	
	#blogPosts {
		display: flex;
		flex: 2;
	}

	#sidebar {
		width: 15vw;
	}
	
	#postOne, #postTwo {
		flex: 1;
	}
	
}
	
/* type */
#mainContent {
	font-size: 1em;
	line-height: 150%;
	
	}

h3 {
	font-family: 'Qwigley';
	font-size: 36px;
	font-weight: 200;
}



/* header and menu */
	
header {
    display:flex;
    height: 10vh;
	align-items: center;
  }	
	
header h1 {
	font-size: 1.8em;
	padding-left: 3em;
	align-self:center;
	}
	
	
	#nav {
	margin: 0;
	padding: 0;
	display: flex;	
	height: 10vh;
	}	
	

	
	.menu__toggler {
		display:none;
	}
	
	
	#nav ul.menu {
		display: flex;
		height: 10vh;
		padding: 0 0 0 6em;
		left: 0;
		flex-direction: row;
		justify-content: space-between;
		align-self: center;
	}
	
	
	#nav ul.menu li {
		border-top: none;
		margin-left: 2em;
		line-height: 0;
		display: flex;
		align-self: center;
		font-size: 2.5em;
		font-weight: 100;
	}


}



/* end 1140 */