/** DEFINITIONS **************************/
	:root {
	  --main: #FF1E05; /* bright red */
	  --second: #cc0000; /*red*/
	  --accent: #00F504; /* lime */
	  --bg: #1A1A1A; /* slate*/
	  --pale: white;
	  --font: #dddddd; /* pale gray */
	  --pubnote: #bebebe; /*slightly less pale gray */
	  --grade: linear-gradient(to bottom, #000 0%,#000 75%, #333 100%);
	  --revgrade: linear-gradient(to top, #000 0%,#000 75%, #333 100%);

	  --Mtop: 50px;
	  --Pside: 20px;
	  --Ptop: var(--Mtop) var(--Pside) 0 var(--Pside);
	  --Pboth: var(--Mtop) var(--Pside); 
	  --maxW: 1200px;
	  --half: calc(50% - 600px);

		@media only screen and  (min-width: 600px) {
		  --Mtop: 50px;
		  --Pside: 30px;
		}

		@media only screen and  (min-width: 800px) {
		  --Mtop: 60px;
		  --Pside: 50px;
		}
		@media only screen and  (min-width: 1300px) {
		  --Mtop: 60px;
		  --Pside: 0px;
		}
	}

	body.light{
	  --second: #cc0000; /*red */
	  --bg:  #F5F6F7; /* silver**/
	  --font: #333;/*gray*/
	  --pale: black;
	  --pubnote: #555555;/*dk gray*/

	  --grade: linear-gradient(to bottom, var(--bg) 0%,var(--bg) 75%,#ccd1d7 100%);
	  --revgrade:linear-gradient(to top, var(--bg) 0%,var(--bg) 75%,#ccd1d7 100%);
	}

	/*font-family: verdana, Geneva, sans-serif;*/

/** UNIVERSAL *************************************/

	* {overflow-wrap: break-word; box-sizing: border-box;}
	body {text-align: center; background-color: var(--bg); -webkit-text-size-adjust: 100%; padding: 0; margin: 0; font-family: 'Century Gothic', sans-serif;  font-weight: normal; color: var(--font);}
	.contentwrapper{width: 100%; position: relative; overflow: hidden; font-weight: 400;font-size: 16px; }

	/*body.light { background-color: var(--font);}*/

	article p{margin: 1rem 0 0 0; line-height: 1.6}
	article{position: relative; z-index: 90}
	.liner, article {width: 100%;  margin: 0 auto;  position: relative; max-width: var(--maxW);}
	section { width: 100%; padding: var(--Pboth); margin: 0;}

	article a:not(.cta){ transition: all .5s; font-weight: 400; color:var(--font);text-decoration: underline;}
	article a:not(.cta):hover, article a:not(.cta):focus{color: var(--pale);text-decoration: underline;}
	body.light article a:not(.cta):hover, body.light article a:not(.cta):focus{color: var(--second);}

	input, select, textarea, button{}
	button{border: 0; background: transparent;transition: all .25s;text-align: center; padding: 0}
	strong{font-weight: 700}
	blockquote{padding: 1rem 0 0 0;}
	article img{max-width: 100%;}

	article ul, article ol {margin: 0; padding: 1rem 0 0 20px;}

	hr { border: 0; height: 0; border-top: 1px solid var(--main) }
	a.skipper {line-height: 0; font-size: 0; border: 0; background: transparent;position: absolute; top: 0; left: 0; z-index: 101}
	a.skipper:focus {border: solid 2px var(--pale); color: black; background-color: yellow; line-height: 1; font-size: 18px;}
	img {border: 0px; max-width: 100%}
	.print {display: none;}
	.flexcenter{display: flex; justify-content: center; align-items: center;}

	/*S*/
	@media only screen and  (min-width: 600px) {
		.contentwrapper, input, select, textarea, button, label{font-size: 18px}
		article p{margin: 1rem 0 0 20px; 6}
	}
	
	/*L*/
	@media only screen and (min-width: 992px) {
	article p{margin: 1rem 0 0 40px; }
	}
	

/** CTA **********************************************/

	a.cta, input[type="submit"]
	{display: inline-block; text-decoration: none; border: none;cursor: pointer; line-height: 1; text-align: center; transition: all .5s; color: var(--font); border: solid 1px var(--second); border-radius: 10px; padding: 8px 12px; font-weight: 400;}

	a.cta:hover,  a.cta:focus, input[type="submit"]:hover, input[type="submit"]:focus
	{text-decoration: none; color: var(--pale); border: solid 1px var(--pale);}

	body.light a.cta, body.light input[type="submit"]{ color: var(--second); border: solid 1px var(--pale); background-color: transparent}

	body.light a.cta:hover, body.light a.cta:focus, body.light input[type="submit"]:hover, body.light input[type="submit"]:focus
	{text-decoration: none; color: white; background-color: var(--second); border: solid 1px var(--second);}


	button
	{cursor: pointer;  transition: all .5s; color: var(--second); border: solid 1px transparent; border-radius: 10px}

	button:hover, button:focus
	{text-decoration: none;color: var(--font); border: solid 1px var(--second);}

/** HEADERS **********************************************/
	/* padding, not margins */

	h2{margin: 0; padding: 0;font-family: "Century Gothic", sans-serif; font-size: 32px; font-weight: normal; color: var(--pale)}
	h2 span {color: var(--second);}

	h3{margin: 0; padding: 1rem 0 0 0;font-family: "Century Gothic", sans-serif; font-size: 22px; font-weight: normal; color: var(--second); line-height: 1.25}

	h4{margin: 0; padding: 1rem 0 0 0;font-family: "Century Gothic", sans-serif; font-size: 20px; font-weight: normal; color: var(--second); line-height: 1.25}
	
	article h4 a{color: var(--second); }
	article h4 a:not(.cta){color: var(--second); }
	
	body.light article  h4 a:hover, body.light article  h4 a:focus{color: var(--second);}


	h5{margin: 0; padding: 1rem 0 0 0;font-size: 16px; font-weight: 700; color: var(--font)}

	h6{margin: 0; padding: 1rem 0 0 0;font-size: 16px;font-weight: 400; font-style: italic; color: var(--font)}

	
	/*M*/
	@media only screen and  (min-width: 768px) {
		h2{font-size: 42px; }

		h3{font-size: 32px;}

		h4{font-size: 24px; f}
	}


/** HEADER ***********************************************/
	header {width: 100%; z-index: 100; padding: 0 var(--Pside); position: relative;  background: var(--grade);	box-shadow: 0 0 5px 0 rgba(0,0,0,.5);}
	header .liner{height: 100px;}
	header.stuck {position: fixed; top: 0; left: 0; }

	a.homelink{border: solid 0px orange; position: absolute;  height: 100%;top: 0; left: 0; text-align: right; width: 220px; padding-right: 60px; transition: all .5s; text-decoration: none}
	/*height: 125px; width: 338px;*/
	.logoimage { width: 50px; height: 66px; position: absolute; top: 16px; right: 0;transition: all .5s;}
	.logoimage{background: url(../images/skull_white.webp) no-repeat; background-size: cover;}
	body.light .logoimage {background: url(../images/skull_black.webp) no-repeat; background-size: cover;}

	h1 {margin: 0; padding: 0; font-family: de-walpergens-pica, serif;	font-weight: 400;font-size: 32px; line-height: 1.15; color: var(--second);transition: all .5s;}
	h1 .tagline {font-size: 18px;line-height: 1.5;  color: var(--font); display: block;}
	a.homelink:hover, a.homelink:focus{text-decoration: none;}
	a.homelink:hover h1, a.homelink:focus h1{color: var(--pale);}
	a.homelink:hover h1 .tagline, a.homelink:focus h1 .tagline{color: var(--second);}
	a.homelink:hover .logoimage, a.homelink:focus .logoimage{background-image: url(../images/skull_neg.webp) ;}
	body.light a.homelink:hover .logoimage, body.light a.homelink:focus .logoimage{background-image: url(../images/skull_white.webp) ;}


	@media only screen and  (min-width: 350px) {
		a.homelink{ width: 240px;  }
		.logoimage { top: 16px; right: 0;}
		h1 {font-size: 36px; }
		h1 .tagline {font-size: 20px;}
	
	}

	@media only screen and  (min-width: 550px) {
		header .liner{height: 125px;}
		a.homelink{ width: 354px;  }
		.logoimage { top: 16px; right: 0;}
		h1 {font-size: 60px; }
		h1 .tagline {font-size: 24px;}
	}
	
/** MENU ***************************************/

	button.menutoggler{color: var(--second); font-size: 32px; width: 50px; height: 50px; position: absolute; top: 25px; right: 0; border: solid 1px transparent; border-radius: 10px;}
	button.menutoggler:before{content: '\f0c9'; font-family: 'FontAwesome'; font-weight: 400;transition: all .5s;  }
	button.menutoggler:after{display: none; content: 'Menu'; padding-left: 10px;  color: var(--pale);}
	button.menutoggler.exed:before{content: '\f00d';}
	button.menutoggler:hover, button.menutoggler:focus{color: var(--pale); border: solid 1px var(--second);}

	nav{display: none;  position: absolute; top: 100px; right: 0; width: 100%; padding: 20px var(--Pside);  background: rgba(0,0,0,.8)}
	body.light nav{ background: rgba(255,255,255,.8)}
	nav ul{list-style: none; display: flex;  flex-direction: column; align-items: flex-start; justify-content: center;  /*gap: 30px;*/ margin: 0 auto; padding: 0; max-width: var(--maxW)}
	nav ul li{}
	nav a{font-weight: 400; font-family: "Century Gothic", sans-serif; font-size: 20px;color: var(--font); display: block; padding: 15px; border: solid 1px transparent; border-radius: 10px; text-decoration: none !important;}
	nav a:hover, nav a:focus{color: /*#d7d7d7*/ var(--pale); text-decoration: none; border: solid 1px var(--second);}

	.color_scheme {display: none}
	.color_scheme2 { width: 150px; height: 50px; position: relative; }
	.color_scheme2 button{width: 150px; height: 50px;color: var(--font); font-size: 18px; position: absolute; top: 0; right: 0;}
	.color_scheme2 button.on{display: none;}
	.color_scheme2 button.on, .color_scheme button:hover, .color_scheme button:focus{color: var(--pale); }
	body.light .color_scheme2 button{color: #adadad;}
	body.light .color_scheme2 button.on, body.light .color_scheme2 button:hover,body.light  .color_scheme2 button:focus{color: var(--pale); }



	@media only screen and  (min-width: 440px) {
		nav{ top: 125px; }
		button.menutoggler{top: 38px;}
	}
	@media only screen and  (min-width: 500px) {
		button.menutoggler:after{display: inline;}
		button.menutoggler{width: 150px;}
	}

	@media only screen and  (min-width: 680px) {
		button.menutoggler{top: 38px;}
	}

	/*M*/
	@media only screen and  (min-width: 800px) {
		nav ul{flex-direction: row;  justify-content: flex-start}
	}

	@media only screen and (min-width: 1200px) {
		.color_scheme2 {position: absolute; top: 20px; right: calc(50% - 600px); }
	}

/** PAGES *************************************************************/
	
	section {border: solid 0px fuchsia;}
	.columns{border: solid 0px cyan; position: relative; max-width: var(--maxW); margin: 0 auto;  }
	article{border: solid 0px lime;  text-align: left;}

	p.first::first-letter{font-family: de-walpergens-pica, serif;font-weight: 400;font-size: 32px; line-height: 1; }
	
	.bookcover{text-align:center;}
	.bookcover img{margin: 0 auto; }

	aside {border: solid 0px orange; width: 320px; min-width: 320px; line-height: 2; text-align: left; text-align: center;  }
	aside img{display: none; max-width: 100%; }
	.elevator{ text-align: left}

	
	aside a:not(.cta){ transition: all .5s; font-weight: 400; color:var(--font);text-decoration: none;}
	aside a:not(.cta):hover, aside a:not(.cta):focus{color: var(--pale);text-decoration: underline;}
	aside a span{position: relative; color: var(--second);}
	body.light article a:not(.cta):hover, body.light article a:not(.cta):focus{color: var(--second);}

	.storybox{padding: 2.5rem 0 0 0;}
	.storybox h3{padding: 0}
	.pubnote{font-size: 14px; color: var(--pubnote)}

	p.doohickey{color: var(--second); text-align: center;}

	.floater{margin: 1rem 0 0 0; width: 300px;}

	.red{color: var(--second);}

	.img_floatR, .img_floatL{width: 100%;  margin: 0 0 1rem 0 }


	@media only screen and  (min-width: 360px) {
		.bookcover img{max-width: 320px;}
		.img_floatR, .img_floatL{width: 100%; float: none; margin: 0 0 1rem 0 }
		.img_floatR{max-width: 50%;position: relative; float: right; margin: 0 0 1rem 20px;}
		.img_floatL{max-width: 50%; position: relative; float: left; margin: 0 20px 1rem 0}
	}
	@media only screen and  (min-width: 600px) {
		.pubnote{font-size: 16px}
		.floater{margin: 1rem 0 1rem 1rem ; position: relative; float: right}
	}
	
	@media only screen and  (min-width: 1000px) {
		.columns{display: flex; gap: 40px;}
		.bookcover{display: none;}
		.columns article {width: calc(100% - 360px);}
		aside {position: relative;}
		aside img{display: block;max-width: 100%; width: 240px; margin: 0 auto;}
		.elevator {width: 320px; position: absolute; top: 0px; right: 0; }
		.elevator.stuck {position: fixed; top: 20px;right: var(--Pside); }
		.elevator.bottomed {position: absolute; top: auto; bottom: 0; right: 0; }
		.img_floatR, .img_floatL{width: auto; max-width: 100%}
	}

	@media only screen and  (min-width: 1300px) {
		.elevator.stuck {right: var(--half); }
	}

/** HOME  ******************************************************/
	
	article.home{opacity: 0; transition: opacity .5s; text-align: left;}

	.Hflex{margin-bottom: 50px;}
	.Hbook{text-align: center;}
	.Hbook a.cta{display: none;}
	.Hbook img{margin: 0 auto; max-width: 100%;}


	.Hbooktext{}
	.Hbooktext span.fa-star{color: var(--second)}

	@media only screen and  (min-width: 360px) {
		.Hbook img{max-width: 320px;}
	}
	@media only screen and  (min-width: 520px) {
		.Hflex{display: flex;  gap: 40px 50px;;}
		.Hbook {flex: 1 1;}
		.Hbook img{width: 100%;}
		.Hbooktext{flex: 1 1 50%; max-width: 50%}
	}
	@media only screen and  (min-width: 800px) {
		.Hbooktext{ max-width: 66%}
		.Hflex.HflexJV{flex-direction: row-reverse}
	}

/** HOME - SLIDESHOW *************************************************/

	/* borders 
	.slideshow{border: solid 1px yellow;}
	.bored{border: solid 1px lime;}
	.read{border: solid 1px cyan;}
	.place{border: solid 1px blue;}
	*/

	.slideshow{max-width: var(--maxW); width:100%; height: 500px; margin: 0 auto; z-index: 99;  position: relative; }

	.bored{ padding: 30px 20px;position: absolute;  right: 0;width: 100%;  font-size: 10vw;animation-duration: 11s; animation-name: bored;  animation-fill-mode: forwards;}
	.bored span{display: block;  opacity: 0; transform: scale(1); line-height: 1.5}
	.B1{ animation-name: B1;  animation-duration: 2s;  animation-fill-mode: forwards;}
	.B2{animation-name: B1;  animation-duration: 2s;  animation-fill-mode: forwards;animation-delay: .3s;}
	.B3{animation-name: B3;  animation-duration: 3s;  animation-fill-mode: forwards;animation-delay: .6s;}
	
	.read{ padding: 30px 20px;position: absolute; right: 0;width: 100%; font-size: 10vw;animation-duration: 11s; animation-name: read;  animation-fill-mode: forwards;}
	.read span{display: block; color: var(--font); opacity: 0; transform: scale(1);line-height: 1.5}
	.R1{ animation-name: R1;  animation-duration: 5s;  animation-fill-mode: forwards;animation-delay: 3s}
	.R2{animation-name: R1;  animation-duration: 5s;  animation-fill-mode: forwards;animation-delay: 3.3s;}
	.R4{animation-name: B3;  animation-duration: 6s;  animation-fill-mode: forwards;animation-delay: 3.6s;}

	.place{ padding: 30px 20px;position: absolute;  right: 0;width: 100%; font-size: 12vw;animation-duration: 11s; animation-name: place;  animation-fill-mode: forwards;}
	.place br{display: none;}
	.place span{display: block; color: var(--font); opacity: 0; transform: scale(1);line-height: 1.5}
	.P1{animation-name: P1;  animation-duration: 10s;  animation-fill-mode: forwards;animation-delay: 6s}
	.P2{animation-name: P1;  animation-duration: 10s;  animation-fill-mode: forwards;animation-delay: 6.3s}
	.P3{animation-name: P1;  animation-duration: 10s;  animation-fill-mode: forwards;animation-delay: 6.6s}
	.P4{animation-name: P1;  animation-duration: 10s;  animation-fill-mode: forwards;animation-delay: 6.9s}
	.PA{animation-name: PA;  animation-duration: 10s;  animation-fill-mode: forwards;animation-delay: 6.9s}
	.PA a{text-decoration: none;}
	.place span.fa{opacity: 1; transform: scale(1);color: white; }
	body.light .place span.fa{color: var(--second); }
	.PA a:hover span.fa, .PA a:focus span.fa{color: var(--second); }
	body.light .PA a:hover span.fa, body.light .PA a:focus span.fa{color: var(--font); }
	
	@keyframes bored {
	  0%   {display: block;} 
	  30%   {display: none;} 
	  100%   {display: none;} 
	}
	@keyframes read {
	  0%   {display: none;} 
	  30%   {display: block;} 
	  60%   {display: none;} 
	  100%   {display: none;} 
	}
	@keyframes place {
	  0%   {display: none;} 
	  60%   {display: block;} 
	  100%   {display: block;}
	}

	@keyframes B1 {
	  0%   {opacity: 0; transform: scale(.5);} /* start */
	  30%  {opacity: 1; transform: scale(1); color: var(--pale);;} /* hold  20*/
	  40%  {opacity: 1; transform: scale(1); color: var(--font)}/* reverse 15 */
	  80%   {opacity: 0; transform: scale(1);} /* gone 30 */
	  100%   {opacity: 0; transform: scale(1);}
	}
	@keyframes R1 {
	  0%   {opacity: 0; transform: scale(.5);} /* start */
	  25%  {opacity: 1; transform: scale(1); color: var(--pale);;} /* hold  20*/
	  35%  {opacity: 1; transform: scale(1); color: var(--font)}/* reverse 15 */
	  60%   {opacity: 0; transform: scale(1);} /* gone 30 */
	  100%   {opacity: 0; transform: scale(1);}
	}

	@keyframes P1 {
	  0%   {opacity: 0; transform: scale(.5);} 
	  20%  {opacity: 1; transform: scale(1); color: var(--pale);;}
	  35%  {opacity: 1; transform: scale(1); color: var(--font)}
	  100%   {opacity: 1; transform: scale(1); color: var(--second)}
	}
	@keyframes PA {
	  0%   {opacity: 0; transform: scale(.5);} 
	  20%  {opacity: 1; transform: scale(1);}
	  35%  {opacity: 1; transform: scale(1); }
	  100%  {opacity: 1; transform: scale(1);}
	}

	@keyframes B3 {
	  0%   {opacity: 0; transform: scale(.5);} /* s */
	  30%   {opacity: 1; transform: scale(1.7); }
	  40%  {opacity: 1; transform: scale(1.7); color: var(--second);}
	  100%  {opacity: 1; transform: scale(1.7);color: var(--second);}
	}

	@media only screen and  (min-width: 400px) {		
		.place span{display: inline}
		.place span.PA{display: block}
		.bored span{display: inline}
	}

	@media only screen and  (min-width: 500px) {		
		.place span{display: inline}
		.place span.PA{display: block}
		.border, .read, .place{ padding: 50px 30px}
	}

	@media only screen and  (min-width: 600px) {		
		.slideshow{ height: 600px}
		.place span{display: inline}
		.place span.PA{display: block}
	}
	@media only screen and  (min-width: 700px) {
		.slideshow{ height: 500px}

	}
	@media only screen and  (min-width: 800px) {
		.slideshow{ height: 600px}
		.read span{display: inline}

	}
	@media only screen and  (min-width: 1000px) {
		.bored, .read, .place{font-size: 112px;}
		.place br{display: inline;}

	}

/** HOME - WELCOME *************************************/

	.welcome{border-bottom: solid 1px var(--main); max-width: var(--maxW); width:100%; /*height: 300px;*/ margin: 0 auto; z-index: 99;  position: relative; padding: var(--Ptop); }
	.bored div{display: block;  opacity: 0; transform: scale(1); line-height: 1.5; font-size: 10vw;}

	.W1{display: block; opacity: 0; transform: scale(1);  animation-name: W1;  animation-duration: 10s;  animation-fill-mode: forwards;line-height: 1.5; font-size: 10vw;}
	
	@keyframes W1 {
	  0%   {opacity: 0; transform: scale(.5);}
	  10%  {opacity: 1; transform: scale(1); color: var(--pale);;} 
	  40%  {opacity: 1; transform: scale(1); color: var(--font);;} 
	  100%  {opacity: 1; transform: scale(1); color: var(--second)}
	}

	@media only screen and  (min-width: 900px) {
		.W1{ font-size: 92px;}
	}

/** SHARE BUTTONS **********************************/

	.W3{display: flex; justify-content: center; align-items: center; gap: 10px; padding: 1rem 0 0 0}

	.W3 a{width: 44px; height: 44px;color: var(--second); font-size: 24px; transition: all .5s;  border: solid 1px transparent; border-radius: 10px; line-height: 1; display: flex; justify-content: center; align-items: center;font-size: 32px;  text-decoration: none !important;}
	.W3 a:hover, .W3 a:focus{color: var(--pale); border: solid 1px var(--second);text-decoration: none;}

	@media only screen and  (min-width: 800px) {
		.W3{ gap: 20px; padding: 2rem 0 0 0}
		.W3 a{width: 50px; height: 50px;font-size: 36px; }
	}


/** FOOT ****************************************************/
	footer {width: 100%; padding: var(--Pboth);/* border-top: solid 3px var(--second);*/ background: var(--revgrade); }
	footer .liner{display: flex; flex-direction: column;justify-content: center; align-items: center; gap: 10px;}

	footer a{font-weight: 400; color: var(--font); display: block; padding: 15px; border: solid 1px transparent; border-radius: 10px;text-decoration: none}
	footer  a:hover, footer  a:focus{color: /*#d7d7d7*/ var(--pale); text-decoration: none; border: solid 1px var(--second);}



@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
   *background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }

}