/* A0 Font Library */

@font-face {
    font-family: "My Custom Font";
    src:  format("truetype");
}

@font-face {
    font-family: "UnboundedVE";
    src: local("UnboundedVE"),
	url("fonts/PlayfairDisplayRegular-ywLOY.ttf") format("truetype");
} /* Serif font used for title headers. */

@font-face {
    font-family: "Diphylleia";
    src: local("Diphylleia"),
	url("fonts/Diphylleia-Regular.ttf") format("truetype");
} /* script-esque serif font with similar feel to retro games attempting to imitate script ala Harvest Moon. used exclusively for INTRODUCTIONS under Story page. */

@font-face {
    font-family: "RobotoBold";
    src: local("RobotoBold"),
	url("fonts/Roboto-Bold.ttf") format("truetype");
} /* Sans-serif bold style font, considered "very modern." It's modern newspaper-esque. */

@font-face {
    font-family: "MisoRegular";
    src: local("MisoRegular"),
	url("fonts/MisoRegular.otf") format("truetype");
} /* Touhou-esque font used for left navbar. */

@font-face {
    font-family: "ThirteenMisa";
    src: local("ThirteenMisa"),
	url("fonts/13_Misa.TTF") format("truetype");
} /* Free for commercial use 90s sci-fi font. */


@font-face {
    font-family: "NotoSans";
    src: local("NotoSans"),
	url("fonts/NotoSans-VariableFont.ttf") format("truetype");
} /* Free for commercial use Arknights-like font. */



.font_testing {
	font-family:ThirteenMisa;
}

/* A0 */


#cd_title1 {
	position:fixed;
	font-size: 28px;
	margin-left:15px;
	width:50px;
	margin-top:10px;
	
	color:rgba(0,0,0,1);
	text-shadow: 0px 0px 4px white;
	pointer-events:none;
}
#cd_title2 {
	letter-spacing:7px;
	position:fixed;
	font-size: 28px;
	margin-left:15px;
	width:50px;
	margin-top:40px;
	
	color:rgba(0,0,0,1);
	text-shadow: 0px 0px 4px white;
	pointer-events:none;
}

#titleyinyang{
	opacity:0.2;
	top:-100px;
	left:-120px;
	position:fixed;
	z-index:-5;
	height:350px;
	width:350px;
	animation-name:yinyangspin;
	animation-duration:30s;
	/*animation-duration:15s;*/
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	pointer-events:none;
}

@keyframes yinyangspin {
	0% {
		transform: rotate(0deg);
		}
	100% {
		transform: rotate(360deg);
	}
}

body {
  margin: 0;
  overflow-x: hidden;
}

p {
	font-size:16px;
}


/* Div Base to coordinate with Header */

/*space_sanitizer{
	white-space: pre-wrap;
}*/

#titleimage {
	position:fixed;
	width:160px;
	height:110px;
	top:70px;
	left:15px;
	pointer-events: none;
	
}

.dlink {
	display: block;
	color: #00F;
	padding: 8px 16px;
	text-decoration: none;
	font-size:25px;
	font-family:MisoRegular;
	letter-spacing:5px;
	filter: grayscale(100%) drop-shadow(0px 0px 0px #000000);
	transition:filter 0.1s linear, animation-duration 0.1s linear;
}

.dlink:hover {
	animation-duration:0s;
	filter: grayscale(30%) drop-shadow(0px 0px 12px #0E96BF);
}

.dlink::first-letter{
	font-size:35px;
}

::-webkit-scrollbar {
	width: 20px;
  }

::-webkit-scrollbar-track {
	background: #0e96bf;
  }

  ::-webkit-scrollbar-thumb {
	background: #f5faff;
	border-radius: 1px;
  }

  ::-webkit-scrollbar-thumb:hover {
	background:	#ccf;
  }



  /* Handle on hover 
::-webkit-scrollbar-thumb:hover {
	background: #558; 
  }*/

.footerMod{
	border-top: 1px solid !important;
}
/*
@media only screen and (max-width: 900px) {
	
	#cd_title1 {
		position:fixed;
		font-size: 28px;
		margin-left:15px;
		width:50px;
		margin-top:10px;
	}
	#cd_title2 {
		letter-spacing:7px;
		position:fixed;
		font-size: 28px;
		margin-left:15px;
		width:50px;
		margin-top:40px;
	}
	#titleimage {
		position:fixed;
		width:160px;
		height:120px;
		top:65px;
		left:15px;
		pointer-events:none;
	}
}*/

@media only screen and (max-width: 768px) {
	#titleyinyang{
		opacity:0.2;
		top:-100px;
		left:20%;
		position:fixed;
		z-index:-5;
		height:350px;
		width:350px;
		animation-name:yinyangspin;
		animation-duration:15s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		pointer-events:none;
	}
	
	.hidden_for_mobile{
		display:none;
	}
	
	#cd_title1 {
		position:absolute;
		font-size: 48px;
		margin-left:25%;
		width:50px;
		margin-top:50px;
	}
#cd_title2 {
		letter-spacing:13px;
		position:absolute;
		font-size: 48px;
		margin-left:25%;
		width:50px;
		margin-top:100px;
	}
	
	#titleimage {
		position:absolute;
		width:160px;
		height:120px;
		top:0px;
		left:15%;
		pointer-events:none;
	}
}

@media only screen and (max-width: 630px) {
	#titleyinyang{
		opacity:0.2;
		top:-100px;
		left:15%;
		position:fixed;
		z-index:-5;
		height:350px;
		width:350px;
		animation-name:yinyangspin;
		animation-duration:15s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		pointer-events:none;
	}
}

@media only screen and (max-width: 400px) {
	#titleyinyang{
		opacity:0.2;
		top:-100px;
		left:5px;
		position:fixed;
		z-index:-5;
		height:350px;
		width:350px;
		animation-name:yinyangspin;
		animation-duration:15s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		pointer-events:none;
	}
	
	.hidden_for_mobile{
		display:none;
	}
	
	#cd_title1 {
		position:absolute;
		font-size: 48px;
		margin-left:10%;
		width:50px;
		margin-top:50px;
	}
#cd_title2 {
		letter-spacing:13px;
		position:absolute;
		font-size: 48px;
		margin-left:10%;
		width:50px;
		margin-top:100px;
	}
	
	#titleimage {
		position:absolute;
		width:160px;
		height:120px;
		top:0px;
		left:5%;
		pointer-events:none;
	}
}

/* A1 Navbar Formatting */
ul {
  background-color: rgba(0,0,0,0);

  list-style-type: none;
  margin: 0;
  margin-top:150px;
  padding: 0;
  width: 170px;
  position: fixed;
  height: 600px;
  overflow: auto;
}

li a {
	display: block;
	color: #000;
	padding: 8px 16px;
	text-decoration: none;
	font-size:25px;
	font-family:MisoRegular;
	letter-spacing:5px;
}

li a::first-letter{
	font-size:35px;
}

.cool_letter{
	font-size:19px;
}

#thememenu {
	margin-left:15px;
	margin-top:15px;
	width:100px;
	position:fixed;
	margin-top:-35px;
}

#fontfield {
	margin-left:45px;
	top:-40px;
	width:50px;
	position:relative;
	display: inline-block;
}

#fontfield1 {
	margin-left:0px;
	top:-5px;
	width:50px;
	position:relative;
	display: inline-block;
}

#fontfield2 {
	margin-left:0px;
	top:-5px;
	width:50px;
	position:relative;
	display: inline-block;
}

#fontfield3 {
	margin-left:45px;
	top:-40px;
	width:50px;
	position:relative;
	display: inline-block;
}

#headerfontfield1 {
	margin-left:25px;
	top:-40px;
	width:50px;
	position:relative;
	display: inline-block;
}

#moodfield {
	margin-left:25px;
	top:-40px;
	width:60px;
	position:relative;
	display: inline-block;
}

#moodfield1 {
	margin-left:40px;
	top:-5px;
	width:60px;
	position:relative;
	display: inline-block;
}

#moodfield2 {
	margin-left:40px;
	top:-5px;
	width:60px;
	position:relative;
	display: inline-block;
}

#moodfield3 {
	margin-left:25px;
	top:-40px;
	width:60px;
	position:relative;
	display: inline-block;
}

#stylefield {
	margin-left:10px;
	top:-25px;
	width:80px;
	position:relative;
	display: inline-block;
}
#stylefield1 {
	margin-left:15px;
	top:-25px;
	width:80px;
	position:relative;
	display: inline-block;
}
#skyfield {
	margin-left:10px;
	top:-25px;
	width:80px;
	position:relative;
	display: inline-block;
}
#skyfield1 {
	margin-left:10px;
	top:-25px;
	width:80px;
	position:relative;
	display: inline-block;
}

.hidden_for_desktop{
	display:none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}



@media only screen and (max-width: 768px) {
	ul {
		background-color: rgba(235,235,255,0.8);
		margin-top:150px;
		padding: 0;
		width: 100%;
		position: sticky;
		height: 210px;
		overflow: auto;
		
	}
	li {
		display: inline-block;
		margin-left:10%;
		border:0px solid blue;
		border-radius:25px;
	}
	li a {
		float:left;
		color: #000;
		width:70%;
		font-size:25px;
		font-family:MisoRegular;
		letter-spacing:5px;
		text-decoration: none;
		vertical-align:middle;
	}
	#thememenu {
		margin-left:40%;
		margin-top:-25px;
		width:100px;
		position:relative;
		top:-15px;
		margin-bottom:0px;
	}
	
	.hidden_for_desktop{
		display:block;
	}
}

@media only screen and (max-width: 630px) {
	li {
		display: inline-block;
		margin-left:5%;
	}
}

@media only screen and (max-width: 500px) {
	li {
		display: inline-block;
		margin-left:1%;
	}
}

@media only screen and (max-width: 360px) {
	li {
		display: inline-block;
		margin-left:0;
		max-width:100px;
	}
}

/* A1 */

.substoryTitle{
	margin-bottom:70px;
}
h5{
	margin-top:-15px;
}

div hr{
	width:80%;
}

.story-linebreak{
	font-size:20px;
}

.vertical-line1{
	border-left: 2px solid blue;
	height: 0px;
	position:relative;
	width:5px;
	display:inline-block;
	left:130px;
}

/*A2 Blog Rules */

.blogModule p :not(blogAccordionText){
	line-height:1.6;
}

.blog_ex_gif_caption {
	font-size:13px;
	margin-top:5px;
}


.blogModule h5{
	font-size:20px;
	margin-bottom:15px;
	margin-top:25px;
}

.blog_subHeader{
	font-size:30px !important;
	margin-bottom:15px !important;
}

.blogModule h4{
	font-size:30px;
	margin-bottom:-5px;
}


.blogModule h2{
	margin-top:-5px;
	transform: scaleY(0.9) scaleX(1.2);
	margin-left:65px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9f8c5+0,ffffff+100&1+0,0+41 */
	background: -moz-linear-gradient(left,  rgba(249,248,197,1) 0%, rgba(251,251,221,0) 41%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(249,248,197,1) 0%,rgba(251,251,221,0) 41%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(249,248,197,1) 0%,rgba(251,251,221,0) 41%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f8c5', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
	height:15px;
	
}

.blogPostDate{
	margin-top:15px;
	font-size:11px;
}

/* A2 */

/* A3 Mist Animations */

.mistbrightness{
	pointer-events:none;
}

/* A3 */

/* A4 Module mid-header intricacies */

.newsDate{
	margin-top:-25px;
}

.storylocationheader{
	padding-bottom:5px;
}

/* A4 */

/* A5  Buttons */

.button_desc_1 {
	position:relative;
	left:13px;
	top:5px;
}
.button_desc_2 {
	position:relative;
	left:13px;
	top:-15px;
}

#randomStoryServeButton{
	background-image:url("images/BlueHangerVertical.png");
	background-size: 100% 100%;
	position:relative;
	display:inline-block;
	width:70px;
	top:-15px;
	height:50px;
	left:5px;
	
	filter: grayscale(100%) drop-shadow(0px 0px 0px #000000);
	transition:filter 0.1s linear, animation-duration 0.1s linear;
}

#randomStoryServeButton:hover {
	animation-duration:0s;
	filter: grayscale(50%) drop-shadow(0px 0px 6px #0E96BF);
}

#randomStoryServeButton:active {
	animation-duration:0s;
	filter: grayscale(0%) drop-shadow(0px 0px 6px #00DDDD);
}

#topButton{
	background-image:url("images/BlueHangerVertical.png");
	background-size: 100% 100%;
	filter: grayscale(100%);
	position:relative;
	display:inline-block;
	place-content:center;
	width:70px;
	height:50px;
	left:5px;
	top:25px;
	margin-bottom:25px;
}

#topButton:hover{
	filter: grayscale(0%);
	animation-name:button-flourish-blue;
	animation-duration:1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#topButtonDark{
	background-image:url("images/WhiteHangerHorizontal.png");
	background-size: 100% 100%;
	filter: grayscale(100%);
	position:relative;
	display:inline-block;
	place-content:center;
	width:70px;
	height:50px;
	left:5px;
	top:25px;
	margin-bottom:25px;
}

#story-top{
	font-family:UnboundedVE;
	font-size: 30px;
	display:inline-block;
	left:4px;
	top:-60px;
	position:absolute;
}

#titleimage_Boundbox_Button {
	position:fixed;
	width:100px;
	height:50px;
	top:90px;
	left:20px;
	transition: 0.3s;
}

#titleimage_Boundbox_Button:hover {
	background-image:url("images/gifs/hanger_lightning.gif");
}
@media only screen and (max-width: 768px) {
	#titleimage_Boundbox_Button {
		position:absolute;
		width:100px;
		height:50px;
		top:25px;
		left:16%;
		transition: 0.3s;
	}
}

/* A5 */

/* A6 Accordians */

.blogAccordion {
  background-color: rgb(125, 170, 32);
  color: #444;
  cursor: pointer;
  padding: 4px 4px 4px 2%;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 25px;
  font-family:UnboundedVE;
  letter-height:5px;
  transition: 0.5s;
}

.blogAccordionText{
	line-height:0;
}

.active_accordion{
	background-color: rgb(55, 95, 6);
	color: #FFF;
}

.blogAccordion:hover {
  background-color: rgb(105, 165, 94);
}

.active_accordion:hover {
  background-color: rgb(125, 195, 144);
}

.blog_content_panel {
	padding: 0 18px;
	width:100%;
	max-height:0px;
	transition:max-height 0.2s ease-in;
	background-color: rgba(225,233,225,1); 
	overflow: hidden;
	margin-bottom:15px;
}

@keyframes blogColorSwitch {
	0%  {
		opacity:1;
		color:#444;
		}
		20% {
		opacity:0;
		color:#444;
		}
	50% {
		color:#FFF;
		opacity:0;
		}
	100% {
		opacity:1;
		}
}

@keyframes blogColorSwitch2 {
  0%   {
	  opacity:1;
	  }
  50%  {
		opacity:0;
	  }
  100% {
		opacity:1;
	  }
}

.blogColorSwitch {
	animation-name:blogColorSwitch;
	animation-duration:0.5s;
	animation-iteration-count:1;
	animation-timing-function:linear;
	color: #FFF;
}

.blogColorSwitch2 {
	animation-name:blogColorSwitch2;
	animation-duration:1s;
	animation-iteration-count:1;
	animation-timing-function:linear;
	color: #444;
}

/* A6 */

/* A7 Story Page Buttons & Module Specific Styling */

@keyframes button-press-blue {
  0%   {
	  filter: grayscale(0%) drop-shadow(0px 0px 0px #000000);
	  }
  25%  {
		 filter: grayscale(0%) drop-shadow(0px 0px 1px #0E96BF);
	  }
  50%  {
		filter: grayscale(0%) drop-shadow(0px 0px 4px #0E96BF);
	  }
  100% {
	   filter: grayscale(0%) drop-shadow(0px 0px 0px #000000);
	  }
}

.specificStoryServeButton{
	background-image:url("images/BlueHangerVertical.png");
	background-size: 100% 100%;
	position:relative;
	display:inline-block;
	float:left;
	width:70px;
	height:50px;
	left:0px;
	filter: grayscale(100%) drop-shadow(0px 0px 0px #000000);
	
	/*animation-name:button-indicator-blue;
	animation-duration:2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;*/
	
	transition:filter 0.1s linear, animation-duration 0.1s linear;
}

.specificArticleServeButton{
	background-image:url("images/GreenHangerVertical.png");
	background-size: 100% 100%;
	position:relative;
	display:inline-block;
	float:left;
	width:70px;
	height:50px;
	left:0px;
	filter: grayscale(100%) drop-shadow(0px 0px 0px #000000);
	
	/*animation-name:button-indicator-blue;
	animation-duration:2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;*/
	
	transition:filter 0.1s linear, animation-duration 0.1s linear;
}

.story_liner{
	position:absolute;
	pointer-events:none;
	z-index:500;
	margin-left:15px;
	margin-top:5px;
}

.story_liner_div{
	overflow:hidden;
	margin-top:-50px;
}

.blog_liner_div{
	overflow:hidden;
	margin-top:-50px;
}

.serv_story_desc{
	padding-left:15px;
}

.specificStoryServeButton:hover {
	animation-duration:0s;
	filter: grayscale(50%) drop-shadow(0px 0px 6px #0E96BF);
}

.specificArticleServeButton:hover {
	animation-duration:0s;
	filter: grayscale(50%) drop-shadow(0px 0px 6px #7da520);
}

.specificStoryServeButton:active {
	animation-duration:0s;
	filter: grayscale(0%) drop-shadow(0px 0px 6px #00DDDD);
}

.specificArticleServeButton:active {
	animation-duration:0s;
	filter: grayscale(0%) drop-shadow(0px 0px 6px #00DDDD);
}

.items{
	position: relative;
	width:100%;
	height:340px;
	overflow-y:hidden;
	overflow-x:visible;
	white-space: nowrap;
	cursor: pointer;
	will-change: transform;
    user-select: none;
}

.modulePostContent{
	margin-top:25px;
}

.active{
	background-color:rgba(0, 0, 0, 0);
}

@keyframes item_focus {
  0%  	{
		border-width:2px;
		border-color:black;
		}
  25% 	{
		}
  50%  	{
		border-width:2px;
		border-color:#0E96BF;
		}
  100% 	{
		border-width:2px;
		border-color:black;
		}
}

@keyframes item_focus_ad {
	0%  	{
		  border-width:2px;
		  border-color:black;
		  }
	25% 	{
		  }
	50%  	{
		  border-width:2px;
		  border-color:#ffffff;
		  }
	100% 	{
		  border-width:2px;
		  border-color:black;
		  }
  }

.serial_item {
	transition:filter 0.2s linear, opacity 0.2s linear;
	filter: drop-shadow(0px 0px 0px #0E96BF);
	opacity:0.5;
}

.serial_item_cds {
	transition:filter 0.2s linear, opacity 0.2s linear;
	filter: drop-shadow(0px 0px 0px #414141);
	opacity:0.5;
}

.serial_item_cds:hover {
	animation-name:item_focus_ad;
	animation-duration:1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	filter: drop-shadow(0px 0px 12px #414141);
	opacity:1;
}

.serial_item_blog {
	transition:filter 0.2s linear, opacity 0.2s linear;
	filter: drop-shadow(0px 0px 0px #7da520);
	opacity:0.5;
}

.serial_item:hover {
	animation-name:item_focus;
	animation-duration:1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	filter: drop-shadow(0px 0px 12px #0E96BF);
	opacity:1;
}

.serial_item_blog:hover {
	animation-name:item_focus;
	animation-duration:1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	filter: drop-shadow(0px 0px 12px #7da520);
	opacity:1;
}

.serial_item:active {
	filter: drop-shadow(0px 0px 12px #0E96BF);
	border-color:#0E96BF;
}

.serial_item_blog:active {
	filter: drop-shadow(0px 0px 12px #7da520);
	border-color:#7da520;
}

@keyframes blue_glow {
  0%  	{
		color:black;
		}
  25%  	{
		color:#0E96BF;
		}
  50% 	{
		color:black;
		}
}

@keyframes green_glow {
  0%  	{
		color:black;
		}
  25%  	{
		color:#7da520;
		}
  50% 	{
		color:black;
		}
}

@keyframes grey_glow {
	0%  	{
		  color:black;
		  }
	25%  	{
		  color:#808080;
		  }
	50% 	{
		  color:black;
		  }
  }

  @keyframes yellow_glow {
	0%  	{
		  color:black;
		  }
	25%  	{
		  color:#f9f882;
		  }
	50% 	{
		  color:black;
		  }
  }

.slider_tutorial {
	font-family:Georgia;
	font-weight:900;
	-webkit-transform:scale(1.2,1.15);
-moz-transform:scale(1.2,1.15);
-ms-transform:scale(1.2,1.15);
-o-transform:scale(1.2,1.15);
transform:scale(1.2,1.15);
	
	position:absolute;
	margin-top:295px;
	margin-left:95px;
	animation-name:blue_glow;
	animation-duration:2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.slider_tutorial2 {
	font-family:Georgia;
	
	font-weight:900;
	-webkit-transform:scale(1.2,1.15);
-moz-transform:scale(1.2,1.15);
-ms-transform:scale(1.2,1.15);
-o-transform:scale(1.2,1.15);
transform:scale(1.2,1.15);
	
	position:absolute;
	margin-top:295px;
	margin-left:95px;
	animation-name:green_glow;
	animation-duration:2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.slider_tutorial_ad {
	font-family:Georgia;
	
	font-weight:900;
	-webkit-transform:scale(1.2,1.15);
-moz-transform:scale(1.2,1.15);
-ms-transform:scale(1.2,1.15);
-o-transform:scale(1.2,1.15);
transform:scale(1.2,1.15);
	
	position:absolute;
	margin-top:295px;
	margin-left:95px;
	animation-name:grey_glow;
	animation-duration:2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.grey_glow2{
	animation-name:grey_glow;
	animation-duration:2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

/* A7-B1 Sea of Buttons */

#demoCategoryButton div {
	background-image:url("images/demoCategory_1.png");
	background-size:cover;
	margin-top:40px;
	margin-left:40px;
	height:240px;
	width:240px;
	position:relative;
	display:inline-block;
	border-style:solid;
	border-width:2px;
	vertical-align:top;
}

#demoCategoryU-Title{
	font-family:Diphylleia;
	pointer-events:none;
	margin-top:160px;
	margin-left:25px;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
	font-size:20px;
}

#demoCategoryU-Subtitle1{
	font-family:Diphylleia;
	pointer-events:none;
	margin-top:-20px;
	margin-left:40px;
	-webkit-text-stroke-width: 0.2px;
	-webkit-text-stroke-color: black;
	font-size:12px;
	/*display:none;*/
}

#demo_landerCategoryButton div {
	background-image:url("images/cds_title_project.png");
	background-size:cover;
	margin-top:40px;
	margin-left:40px;
	height:240px;
	width:240px;
	position:relative;
	display:inline-block;
	border-style:solid;
	border-width:2px;
	vertical-align:top;
}

#demo_landerCategoryU-Title{
	font-family:Georgia;
	pointer-events:none;
	margin-top:160px;
	margin-left:25px;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
	font-size:20px;
}

#demo_landerCategoryU-Title2{
	font-family:Georgia;
	pointer-events:none;
	margin-top:-20px;
	margin-left:25px;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
	font-size:20px;
}

#demo_landerCategoryU-Subtitle1{
	font-family:Diphylleia;
	pointer-events:none;
	margin-top:-20px;
	margin-left:40px;
	-webkit-text-stroke-width: 0.2px;
	-webkit-text-stroke-color: black;
	font-size:12px;
	/*display:none;*/
}

#trueCategoryButton div {
	background-image:url("images/demoCategoryPlaceholder.png");
	margin-top:40px;
	margin-left:40px;
	height:240px;
	width:240px;
	position:relative;
	display:inline-block;
	border-style:solid;
	border-width:2px;
	vertical-align:top;
}

#trueCategoryU-Title{
	font-family:Diphylleia;
	pointer-events:none;
	margin-top:80px;
	margin-left:80px;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
	font-size:20px;
}

#trueCategoryU-Subtitle1{
	font-family:Diphylleia;
	pointer-events:none;
	margin-top:-20px;
	margin-left:40px;
	-webkit-text-stroke-width: 0.2px;
	-webkit-text-stroke-color: black;
	font-size:12px;
	display:none;
}

#thirdCategoryButton div {
	background-image:url("images/demoCategoryPlaceholder.png");
	margin-top:40px;
	margin-left:40px;
	height:240px;
	width:240px;
	position:relative;
	display:inline-block;
	border-style:solid;
	border-width:2px;
	vertical-align:top;
}

#thirdCategoryU-Title{
	font-family:Diphylleia;
	pointer-events:none;
	margin-top:80px;
	margin-left:80px;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
	font-size:20px;
}

#thirdCategoryU-Subtitle1{
	font-family:Diphylleia;
	pointer-events:none;
	margin-top:-20px;
	margin-left:40px;
	-webkit-text-stroke-width: 0.2px;
	-webkit-text-stroke-color: black;
	font-size:12px;
	display:none;
}

/* */

/* A7-B2 Blog Cat Buttons */

#archiveButton2023 div {
	background-size:cover;
	background-color:rgba(0,0,0,0);
	margin-top:40px;
	/*margin-left:40px;*/
	height:240px;
	width:240px;
	position:relative;
	display:inline-block;
	/*border-style:solid;
	border-width:2px;*/
	vertical-align:top;
}

.blogCatAnimElementCommon1 {
	background-size:cover;
	pointer-events:hidden;
	margin-top:-230px;
	margin-left:20%;
	height:140x;
	width:140px;
	position:absolute;
	display:inline-block;
	/*border-style:solid;
	border-width:2px;*/
	vertical-align:top;
}

.blogCatAnimElementCommon2 {
	background-size:cover;
	pointer-events:hidden;
	margin-top:-190px;
	margin-left:0px;
	height:140x;
	width:140px;
	position:absolute;
	display:inline-block;
	/*border-style:solid;
	border-width:2px;*/
	vertical-align:top;
}
.blogCatAnimElementCommon3 {
	background-size:cover;
	pointer-events:hidden;
	margin-top:-180px;
	margin-left:55px;
	height:140x;
	width:140px;
	position:absolute;
	display:inline-block;
	/*border-style:solid;
	border-width:2px;*/
	vertical-align:top;
}

#archive-Title2023{
	font-family:Diphylleia;
	pointer-events:none;
	margin-top:180px;
	margin-left:30%;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
	font-size:40px;
}

/* */

/* A7 Media Queries */


/* A8 Heading Logic */
.sectorTag{
	margin-bottom:5px;
	margin-left:15px;
	position:relative;
	font-size:30px;
}

.moduleHead{
	width:150px;
	margin-left:250px;
	margin-bottom:-5px;
	border-left:1px solid #323232;
}

.moduleHeadLong{
	width:250px;
	margin-left:250px;
	margin-bottom:-5px;
	border-left:1px solid #323232;
}

.moduleHeadLongest{
	width:350px;
	margin-left:250px;
	margin-bottom:-5px;
	border-left:1px solid #323232;
}

@media only screen and (max-width: 768px) {
	.sectorTag{
		margin-bottom:5px;
		margin-left:15px;
		position:relative;
		font-size:25px;
	}

	.moduleHead{
		width:150px;
		margin-left:5%;
		margin-bottom:-5px;
		border-left:0px solid #323232;
	}

	.moduleHeadLong{
		margin-left:5%;
		margin-bottom:-5px;
		width:250px;
		border-left:0px solid #323232;
	}

	.moduleHeadLongest{
		width:350px;
		margin-left:5%;
		margin-bottom:-5px;
		border-left:1px solid #323232;
	}
}

/* Div Base to coordinate with Header */
.default1{
	margin-left:250px;
	margin-right:5%;
}

/* Module Logics */
.moduleCommon{
	padding-top:10px;
	padding-bottom:10px;
	padding-left:15px;
	padding-right:5%;
	border:1px solid #323232;
	border-right: 3px solid #323232;
	border-top: 0px solid;
	box-shadow:15px 20px 5px 1px rgba(50,50,50,0.2);
}

@media only screen and (min-width: 1400px) {
	.default1{
		margin-left:250px;
		margin-right:10%;
	}
	
	.moduleCommon{
		padding-top:10px;
		padding-bottom:10px;
		padding-left:15px;
		padding-right:8%;
		border-right-style: 5px solid;
	}
}

/*
@media only screen and (max-width: 1000px) {
	.default1{
		margin-left:24%;
		margin-right:5%;
	}
	
	.moduleHead{
		margin-left:24%;
	}
	
	.moduleHeadLong{
		margin-left:24%;
	}
	
}*/

@media only screen and (max-width: 768px) {
	.default1{
		margin-left:15px;
		margin-right:5%;
	}
	
	.moduleHead{
		width:150px;
		margin-left:7%;
		margin-bottom:-5px;
	}

	.moduleHeadLong{
		margin-left:7%;
		margin-bottom:-5px;
		width:250px;
	}
}

/* A8 end */

/* A9 Footer Formatting */

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
  }

#DMCid{
	left:75px;
}

#AOCid{
left:100px;
}
  
  /* Hide default HTML checkbox */
  .switch input {
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  /* The slider */
  .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  .slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  input:checked + .slider {
	background-color: #2196F3;
  }
  
  input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
	border-radius: 34px;
  }
  
  .slider.round:before {
	border-radius: 50%;
  }

.footertext{
	padding: 8px 250px;
	/*text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff*/
}

/* The orange thingy that lights up when you click Random Story */
#update_notif{
	pointer-events:none;
	width:100%;
	position:fixed;
	bottom: 0;
	left:0;
	height:100px;
	background: rgb(252, 201, 167); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252, 201, 167,1) 0%, rgba(255,255,255,0) 13%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252, 201, 167,1) 0%,rgba(255,255,255,0) 13%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top,  rgba(252, 201, 167,1) 0px,rgba(255,255,255,0) 40px); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
animation-name:nothing;
	animation-duration:0.6s;
	/*animation-duration:15s;*/
	animation-iteration-count: 3;
	animation-timing-function: linear;
	opacity:0%
}

@keyframes update_notif_anim {
	0%  	{
		  opacity:0%
		  }
	25% 	{
		  }
	50%  	{
		opacity:100%
		  }
	100% 	{
		opacity:0%
		  }
  }


/* A9 end */
	
/* A10 About Section Formatting */

.aboutBradimg{
	width:300px;
	height:400px;
	position:relative;
	display:inline-block;
	float:right;
	padding:10px;
	padding-right:30px;
}

.aboutBradimg2{
	width:100%;
	height:100%;
	position:relative;
	display:inline-block;
	float:left;
	padding:10px;
	padding-right:30px;
	pointer-events:none;
}

#gallerybox{
	width:575px;
	height:800px;
}

@media only screen and (max-width: 768px) {
	.aboutBradimg{
		display:block;
		padding-right:0px;
		left:5px;
	}
	.aboutBradimg2{
		/*width:300px;
		height:400px;*/
		display:block;
		float:right;
		padding-right:0px;
		left:5px;
	}
	
	#gallerybox{
		width:300px;
		height:400px;
	}
}

.detailsAbout {
	margin-top:25px;
	font-family:Georgia;
}

.detailsAbout p {
	font-family:NotoSans;
	margin-left:10px;
}

.jobMarker {
	animation-name:yellow_glow;
	animation-duration:2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

/* A10 end */

/* B1 Blog archives sub-website */

#cd_title1_blog {
	position:fixed;
	font-size: 28px;
	margin-left:15px;
	width:50px;
	margin-top:-10px;
	
	color:rgba(0,0,0,1);
	text-shadow: 0px 0px 4px white;
	pointer-events:none;
}
#cd_title2_blog {
	letter-spacing:7px;
	position:fixed;
	font-size: 28px;
	margin-left:15px;
	width:50px;
	margin-top:20px;
	
	color:rgba(0,0,0,1);
	text-shadow: 0px 0px 4px white;
	pointer-events:none;
}

#blog_title3{
	letter-spacing:7px;
	position:fixed;
	font-size: 28px;
	margin-left:15px;
	width:50px;
	margin-top:50px;
	
	color:rgba(0,0,0,1);
	text-shadow: 0px 0px 4px rgb(150,255,150);
	pointer-events:none;
}

.shortened_for_blog a {
	margin-top:15px !important;
}

.shortened_for_blog a::first-letter{
}

#titleimage_blog {
	position:fixed;
	width:160px;
	height:120px;
	top:185px;
	left:15px;
	pointer-events:none;
	display:hidden;
}

#titleyinyang_blog{
	opacity:0.7;
	top:80px;
	left:40px;
	position:fixed;
	z-index:-5;
	height:200px;
	width:130px;
	/*animation-name:yinyangspin;
	animation-duration:30s;
		animation-duration:15s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;*/
	pointer-events:none;
}

#librarybg{
	width:100%;
	max-width:3000px;
	height:100%;
	position:fixed;
	top:0;
	bottom:0;
	background-image: url('images/watertown_library.jpg');
	background-size: 100% 1000px;
	background-repeat: no-repeat;
	z-index:-1000;
	opacity:0.1;
}

#bloglist{
	top:100px;
}

@media only screen and (max-width: 768px) {
	
	#bloglist{
		top:0px;
	}
	
	#titleyinyang_blog{
		opacity:0.5;
		top:-100px;
		left:20%;
		position:fixed;
		z-index:-5;
		height:350px;
		width:350px;
	/*	animation-name:yinyangspin;
		animation-duration:15s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;*/
		pointer-events:none;
	}
/*
	#cd_title1 {
		position:absolute;
		font-size: 48px;
		margin-left:25%;
		width:50px;
		margin-top:50px;
	}
	#cd_title2 {
		letter-spacing:13px;
		position:absolute;
		font-size: 48px;
		margin-left:25%;
		width:50px;
		margin-top:100px;
	}
*/
	#blog_title3 {
		letter-spacing:13px;
		position:absolute;
		font-size: 48px;
		margin-left:25%;
		width:50px;
		margin-top:-60px;
	}
	
	#titleimage_blog {
		position:absolute;
		width:160px;
		height:110px;
		top:0px;
		left:15%;
		pointer-events:none;
	}
	
	#cd_title1_blog {
		position:absolute;
		font-size: 48px;
		margin-left:25%;
		width:50px;
		margin-top:-140px;
		
		color:rgba(0,0,0,1);
		text-shadow: 0px 0px 4px white;
		pointer-events:none;
}

	#cd_title2_blog {
		letter-spacing:13px;
		position:absolute;
		font-size: 48px;
		margin-left:25%;
		width:50px;
		margin-top:-100px;
		
		color:rgba(0,0,0,1);
		text-shadow: 0px 0px 4px white;
		pointer-events:none;
	}
}

/* B1 end */
	
	/*
.theme-toggle {
  --size: 2rem;
  
  background: none;
  border: none;
  padding: 0;

  inline-size: var(--size);
  block-size: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 5px;
  
  & > svg {
    inline-size: 100%;
    block-size: 100%;
    stroke-linecap: round;
  }
  
  & > body {
	  background-color:#000000;
  }
  
  @media (hover: none) {
    --size: 48px;
  }
}*/


/* B2 town header home page */

.town_header{
	width:100%;
	height:500px;
	background-image:url("images/IMG_20230525_150329114_HDR.jpg");
	background-repeat:no-repeat;
	background-size:2000px 1200px;
	background-position:-600px -300px;
	margin-left:250px;
	margin-right:5%;
	margin-top:-50px;
	overflow:hidden;
}

.h_s_div{
	position:absolute;
	top:0px;
	height:500px;
	width:200px;
	left:90%;
}

.v_s_div{
	position:absolute;
	height:100px;
	width:100%;
	top:370px;
	left:250px;
}

.town_text{
	margin-left:250px;
	margin-right:0px;
	position: absolute;
	top:-25px;
	left:100px;
	width:650px;
	overflow:hidden;
}

.town_text p{
	font-size: 50px;
	color:rgba(0,0,0,1);
	text-shadow: 0px 0px 8px white;
	pointer-events:none;
	-webkit-text-stroke: 2px black;
	font-family:Georgia, Courier New;
	/*font-family:ThirteenMisa;*/
}

.title_header_handler{
	margin-top:-20px;
	margin-left:500px;
	margin-bottom:-200px;
	overflow:hidden;
	overflow-x:hidden;
	position: absolute;
}

.town_header2{
	display:none;
}


@media only screen and (max-width: 768px) {
	.town_header{
		display:none;
	}
	.town_text{
		display:none;
	}

	.town_header2{
		width:100%;
		height:210px;
		background-image:url("images/IMG_20230525_150329114_HDR.jpg");
		background-repeat:no-repeat;
		background-size:1200px 1000px;
		background-position:-320px -400px;
		margin-left:0px;
		margin-right:0px;
		margin-top:-210px;
		overflow:hidden;
		display:block;
	}

	.h_s_div{
		display:none;
	}
	.v_s_div{
		display:none;
	}
}

@media only screen and (min-width: 1800px) {
	.h_s_div{
		left:1600px;
	}
}


/* A20 - copyright */

.copyrightinformation{
	font-family:arial;
	font-size:10px;
}