<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   /* THIS ISN'T THE REAL BOC CSS!!! 
   THIS IS THE ONE IN THE TEST/ALT LAYOUT FOLDER */

 
body {
background-image: url(images/bg-layer-2.png), linear-gradient(#feb6cb, #df9ed8);
  background-size: auto, cover;
  background-attachment: fixed;
  color: #666;
  font-family: "VT323";
  font-size: 18px;
  margin: 0px;
}


html {
	height: 100%;
}

a, a:link, a:visited, a:active, a:hover {
  color: #666;
 text-decoration: none; 
}

h1 {
   font-family: "VT323";
   font-size: 26px;
   font-weight: normal;
   color: #666;
   margin: 7px;
   text-shadow:
		-1px -1px 0 #fff,  
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
	text-transform: uppercase;
}

.page {
  max-width: 880px;
  margin: auto;
  margin-top: 20px;
}

.header {
  text-align: center;
}

/*main title*/
.title a img {
	max-width: 880px;
}


/*TOP NAV*/

.nav { 
 padding: 5px 10px;
}

.navibar {
  list-style-type: none;
  display: inline;
  padding: 1px;
}

.navibar li {
  display: inline-block;
  background-color: #ffdce5;
  border: 4px solid; 
  border-color: #ffeef4 #aa7e8a #aa7e8a #ffeef4;
  padding: 2px 10px 2px 10px;
  font-family: "VT323";
  font-size: 22px;
  text-transform: uppercase;
  margin: 3px;
  }
  
.navibar li:hover { 
  border-color: #aa7e8a #ffeef4 #ffeef4 #aa7e8a;
  transition: all .25s ease;
  color: #000;
}
  
.navibar a:link, .navbar a:visited {
  color: #666;
  text-decoration: none;
}

.navibar a:hover {
  color: #000;
}

/*navbar shop links*/

.lidrop {
  position: relative;
  display: inline-block;
}

.lidrop-links {
	display: none;
  position: absolute;
  z-index: 1;
}

.lidrop-links a {
	color: #666;
	padding: 2px 10px;
	background-color: #ffdce5;
	border: 3px solid; 
	border-color: #ffeef4 #aa7e8a #aa7e8a #ffeef4;
	font-size: 18px;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
	margin-bottom: 3px;
	margin-left: 20px;
}

.lidrop:hover .lidrop-links, .lidrop:active .lidrop-links {
  display: block;
}

.lidrop-links a:hover, .lidrop-links a:active  {
	border-color: #aa7e8a #ffeef4 #ffeef4 #aa7e8a;
  transition: all .25s ease;
  color: #000;
	}

/*not that ^ */

.content {
 background-color: #ffdce5;
 border: 3px solid; 
 border-color: #ffeef4 #aa7e8a #aa7e8a #ffeef4;
 padding: 10px;
 margin-top: 22px;
 margin-bottom: 22px;
 text-align: center;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
}



/*sidebar zone*/
.sidebar-all {
	margin-bottom: 22px;
	display: block;
	clear: both;
}

.sidebar-sm {
	float: left;
	width: 130px;
	display: block;
	text-align: center;
	padding-top: 22px;
}

.sidebar-sm ul li img {
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
	margin-bottom: 10px;
	transition: .5s ease;
}

.sidebar-sm ul li img:hover {
	opacity: 0.6;
}
	
.sidebar-lg {
	float: right;
	width: 730px;
	display: block;
}

.sidebar-title {
	margin-bottom: 6px;
	margin-top: 0px;
}

.sidebar-title h1 {
	color: #ff6397; 
	text-shadow:
		-1px -1px 0 #fff,  
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
	font-size: 36px;
	text-transform: uppercase;
}

.sidebar-title li {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

/*webring-specific*/
	#webcomicwebring {
		padding:0px;
		margin-bottom: 10px;
	}
	#webcomicwebring table tr td {
		display: none;
		padding: 0px;
		font-size: 14px;
	}
	#webcomicwebring .webring-info {
		display: block;
	}
	#webcomicwebring .webring-prev {
		display: block;
		text-align: center;
	}
	#webcomicwebring .webring-next {
		display: block;
		text-align: center;
	}
	#webcomicwebring .webring-info a img {
		margin-bottom: 0px;
	}
	
	
	
/*first level/latest level buttons*/
	table.first-latest {
	text-align: center;
	margin: 10px;
	width: 97.5%;
	}
	
	table.first-latest td {
	border: 3px solid; 
	transition: 1s ease;
	border-color: #aa7e8a #ffeef4 #ffeef4 #aa7e8a;
	padding: 140px 0px 140px 0px;
	width: 410px;
	}
	
	.td-first {
	background-image: url(images/first-lvl.gif);
	background-size: cover;
	transition: .1s ease;
	}
	
	.td-latest {
	background-image: url(images/latest-lvl.gif);
	background-size: cover;
	transition: .1s ease;
	}	
	
	table.first-latest td a {
	transition: .5s ease;
	color: #000; 
	text-shadow:
		-1px -1px 0 #fff,  
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
	font-size: 36px;
	}

	.td-first a:hover {
	color: #ff1c47;
	letter-spacing: 2px;
	}	
	
	.td-latest a:hover {
	color: #8d64e9;
	letter-spacing: 2px;
	}	


/*info section banner image*/
.info-banner {
	background-size: cover;
	border: 3px solid; 
	border-color: #aa7e8a #ffeef4 #ffeef4 #aa7e8a;
}

/*info section table*/
.info-table {
	margin: auto;
	text-align: left;
	padding-top: 16px;
	padding-bottom: 22px;
}

.info-table tr th {
	text-transform: uppercase;
	color: #000;
	text-shadow:
		-1px -1px 0 #fff,  
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
	font-weight: normal;
	padding-right: 10px;
}

.info-story {
	max-width: 500px;
	display: table;
	margin: 0 auto;
	text-align: left;
}


.news {
/*tumbleweed....*/
}

.news-bar {
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(images/news-icon.gif);
	width: 200px;
}

.news-scroll {
	margin: 0 auto;
	text-align: left;
	padding-left: 10px;
	border: 3px solid; 
	border-color: #aa7e8a #ffeef4 #ffeef4 #aa7e8a;
}

#time-to-scroll {
	max-height: 300px;
	overflow-y: scroll;
	scrollbar-color: #febcce/*bar*/ #ffdce5/*track*/;
	scrollbar-width: thin;
}

#time-to-scroll::-webkit-scrollbar {width: 6px;}
#time-to-scroll::-webkit-scrollbar-track {background: #ffdce5;}
#time-to-scroll::-webkit-scrollbar-thumb {background-color: #febcce;}


/* That colour bar on the top of the content zone. */
	.content-banner {
	background-image: linear-gradient(to right, #372ef2, #8d64e9, #fdb4da);
	padding: 2px;
	margin-bottom: 20px;
	color: #fff;
	font-size: 20px;
	min-height: 24px;
	overflow-y: hidden;
	}

	.cb-icon {
	float: left;
	margin: 2px;
	height: 18px;
	width: 17px;
	background-image: url("images/cb-icon.png");
	}

	.cb-label {
	float: left;
	margin-left: 5px;
	}

	.cb-bttn {
	  height: 17px;
	  width: 17px;
	  border: 3px solid; 
	  border-color: #ffeef4 #aa7e8a #aa7e8a #ffeef4;
	  background-image: url("images/x-icon.jpg");
	  float: right;
	  margin-top: 1px;
	}


/*a plain button q 3q*/
	.accordion &gt; input[type="checkbox"] {
	  position: absolute;
	  left: -100vw;
	}

	.accordion .acdrop {
	  overflow-y: hidden;
	  height: 0;
	  transition: height 0.3s ease;
	}

	.accordion &gt; input[type="checkbox"]:checked ~ .acdrop {
	  height: auto;
	  overflow: visible;
	}

	.accordion label {
	  display: block;
	}

	.accordion &gt; input[type="checkbox"]:checked ~ .acdrop {
	  padding: 0px;
	  border: none;
	}

	.accordion .handle {
	  margin: 0;
	  font-size: 18px;
	}

	.accordion label {
	  cursor: pointer;
	  font-weight: normal;
	  padding: 0px;
	  background: none;
	  animation: opacity .5s ease;
	  color: #666; 
	  text-shadow:
			-1px -1px 0 #fff,  
			1px -1px 0 #fff,
			-1px 1px 0 #fff,
			1px 1px 0 #fff;
	}

	.accordion label:hover,
	.accordion label:focus {
	  background: none;
	  color: #000;
	}

	.accordion .handle label:before {
	  font-family: 'fontawesome';
	  content: "\f105";
	  display: inline-block;
	  margin-right: 10px;
	  font-size: 18px;
	}

	.accordion &gt; input[type="checkbox"]:checked ~ .handle label:before {
		content: "\f107";
	}

	.acdrop {
		font-size: 16px;
	}

	.acdrop ul {
		padding: 0px 0px 0px 30px;
		margin: 0px;
		list-style-type: none;
	}

	.acdrop ul li:before {
		font-family: 'fontawesome';
		content: "\f005";
		font-size: 10px;
		text-shadow:
			-1px -1px 0 #fff,  
			1px -1px 0 #fff,
			-1px 1px 0 #fff,
			1px 1px 0 #fff;
	}


/*LEVEL PAGES*/
	.lvlnav img {
	  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	  filter: grayscale(100%);
	}

	.lvlnav img:hover {
	  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	  filter: grayscale(0%);
	}

.comic {
  padding: 7px 0;  
}

.comic img {
  margin: 5px 0;
}

/*ARCHIVE*/
/*#info-redirect is being used for the links at the bottoms*/
.archive-links {
	columns: 3;
	column-gap: 3px;
}
.archive-links img { 
  transition: all .5s ease;
  border: 3px solid;
  border-color: #aa7e8a #ffeef4 #ffeef4 #aa7e8a;
  max-width: 274px;
  height: auto;
  margin: 2px;
}

#archive-lsr {background-image: linear-gradient(to right, #372ef2, #e460d5, #ff8899); }
#archive-bem {background-image: linear-gradient(to right, #372ef2, #24e79e, #efdf77); }
#archive-dnw {background-image: linear-gradient(to right, #372ef2, #9070f6, #82fffb); }
#archive-pws {background-image: linear-gradient(to right, #372ef2, #ff5959, #ffc562); }

.archive-links img:hover {
  opacity: 0.5; 
}

.arc-labels {
	display: inline-block;
	margin: 35px 0px;
	text-align: center;
}

.arc-labels img {
	transition: all .5s ease;
	opacity: 1.0;
}

.arc-labels img:hover {
	opacity: 0.6;
}

/* ABOUT PAGE */

.about-main {
	display: block;
	clear: both;
}

.about-story {
	float: left;
	width: 550px;
	display: block;
	text-align: center;
	margin-top: 22px;
	background-image: url("images/about-story-bg.png");
	border: 3px solid; 
	border-color: #ffeef4 #aa7e8a #aa7e8a #ffeef4;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
	margin-bottom: 22px;
}

.about-story h1 {
	padding: 125px 50px 0px 140px;
}

.blurb {
	padding: 0px 50px 0px 110px;
}

.about-story .info-table th {
	vertical-align: top;
}

.warnings {
	max-width: 318px;
}

.about-artist {
	float: right;
	width: 280px;
	display: block;
}

.about-artist p {
	margin: 0px;
	padding-bottom: 20px;
}

.about-artist i {
	font-family: 'fontawesome';
	font-style: normal;
	font-size: 16px;
	color: #ff6397;
	text-shadow:
		-1px -1px 0 #fff,  
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
	transition: all .5s ease;
}

.about-artist i:hover {
	color: #000;
}


/* CAST PAGE */
	/* coda &amp; liren */
.cartridge {
	display: inline-block;
	margin: 35px 0px 20px 0px;
}

.cartridge-coda {
	background-image: url('images/cartridge-coda.png');
	background-position: center top;
}
.cartridge-coda:hover {
	background-position: center bottom; 
}

.cartridge-liren {
	background-image: url('images/cartridge-liren.png');
	background-position: center top;
}
.cartridge-liren:hover {
	background-position: center bottom; 
}

.cartridge-info {
	max-width: 255px;
	background-color: #666;
	color: #fff;
	padding: 10px;
	margin: 8px;
	font-weight: 100;
	display: inline-block;
	border-radius: 10px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
}

	/* EVERYONE ELSE */
	/* EVERYONE ELSE */
	/* EVERYONE ELSE */
	/* EVERYONE ELSE */
	/* EVERYONE ELSE */
	/* EVERYONE ELSE */
	/* EVERYONE ELSE */
	
.character {
	width: 270px;
	display: inline-block;
	border: 3px solid;
	border-color: #aa7e8a #ffeef4 #ffeef4 #aa7e8a; 
}

.character img {
	float: left;
	border-right: 3px solid #ffeef4;
}

.char-facts {
	float: right;
	text-align: left;
	width: 194px;
	/*color: #fff;
	background-color: #666;*/
	border-left: 3px solid #aa7e8a;
}

.char-facts h1 {
	color: #000;
	padding: 6px 10px 0px 10px;
	margin: 0px;
}

.char-facts p {
	margin: 0px;
	line-height: 16px;
	padding: 6px 10px 6px 10px;
}

.char-facts p b {
	color: #ffdce5;
}

.char-intro {
	background-color: #000;
	color: #fff;
	padding-top: 6px;
}

.char-intro a {
	color: #ff6397;
}

.char-intro a:hover {
	color: #666;
}

	

/**/
.index-nav {
	color: #ff6397;
	text-shadow:
		-1px -1px 0 #fff,  
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
}

.index-nav a {
	transition: .5s ease; 
	color: #666; 
}

.index-nav a:hover {
	color: #000;
}

/*the h1 known as intro*/
.intro {
	color: #ff6397;
	margin: 10px 0px ;
}


/*EXTRA PAGE*/
.extra-all {
	margin-bottom: 22px;
	display: block;
	clear: both;
}

.extra-left {
	float: left;
	width: 432px;
	display: block;
	padding-right: 8px;
}
	
.extra-right {
	float: right;
	width: 432px;
	display: block;
	padding-left: 8px;
}

	/*for things with a top image and bottom conent
		otherwise use the "content" div class*/
.ex-block {
	background-color: #ffdce5;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
	border: 3px solid;
	border-color: #ffeef4 #aa7e8a #aa7e8a #ffeef4;
	display: block;
	margin-top: 22px;
	margin-bottom: 22px;
}


.ex-info {
	color: #666;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
	padding: 0px 20px 0px 20px;
	margin: 5px 0px 20px 0px;
}

.ex-link a {
	color: #333;
	transition: all .5s ease;
}

.ex-link a:hover {
	color: #ff6397;
	transition: all .5s ease;
}

.ex-link p {
	color: #ff5a5a;
	display: inline;
}

.td-gallery {
	background-image: url(images/extra-gallery.gif);
	background-size: cover;
}

.td-gallery a:hover {
	color: #027bcf;
	letter-spacing: 2px;
	}	


/* THE GALLERY ITSELF!! */

.gallery-img {
	background-color: #ffdce5;
	border: 3px solid;
	border-color: #ffeef4 #aa7e8a #aa7e8a #ffeef4;
	margin-top: 22px;
	margin-bottom: 22px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
}

.gallery-img img {
	width: 100%;
}

.gallery-img p {
	text-transform: uppercase;
	color: #000;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
	text-align: right;
	margin: 3px 5px 8px 0px;
}

.gallery-date::before {
	 font-family: 'fontawesome';
		content: "\f1f9";
		font-size: 12px;
		margin-right: 5px;
}

.gallery-date a::before {
	 font-family: 'fontawesome';
		content: "\f106";
		font-size: 12px;
		margin-right: 2px;
		vertical-align: top;
}

.gallery-date a {
	border: 2px solid;
	border-color: #ffeef4 #aa7e8a #aa7e8a #ffeef4;
	padding: 0px 8px 0px 8px;
	transition: all .2s ease;
}

.gallery-date a:hover {
	color: #ff6397;
	border-color: #aa7e8a #ffeef4 #ffeef4 #aa7e8a;
}


/* FOOTER */

	.footer {
	 background-color: #ffdce5;
	 border-top: 3px solid #ffeef4;
	  font-family: "VT323";
	  font-size: 14px;
	  width: 100%;
	  height: 22px;
	  clear: both;
	   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
	}

	.footer p {
	 margin: 0; 
	}

	.footer a {
	  color: #aa99a2;
	  text-decoration: none;
	  transition: all .2s ease;
	}
	
	.footer a:hover {
		color: #666;
	}

	.footleft {
	 float: left;
	 border: 3px solid;
	 border-color: #ffdce5;
	 padding: 0px 7px 2px 20px;
	 margin-top: 1px;
	 color: #ff6397; 
		text-shadow:
			-1px -1px 0 #fff,  
			1px -1px 0 #fff,
			-1px 1px 0 #fff,
			1px 1px 0 #fff;
	}

	.footleft::before {
	 font-family: 'fontawesome';
		content: "\f1f9";
		font-size: 10px;
		margin-right: 5px;
	}
	
	.footcenter {
		float: left;
		padding: 0px 7px 2px 7px;
		margin-top: 1px;
		border: 3px solid;
		border-color: #ffdce5;
	}

	.footright {
	 float: right; 
	 border: 3px solid; 
	 border-color: #aa7e8a #ffeef4 #ffeef4 #aa7e8a;
	 padding: 0px 10px 0px 10px;
	 margin-right: 20px;
	}

	.footright::before {
	 font-family: 'fontawesome';
		content: "\f106";
		margin-right: 5px;
	}

	
	
/* redirect page */

	.redirect {
		font-family: "VT323";
		font-size: 18px;
		padding-bottom: 15px;
	}

	.redirect a {
		border-color: #febcce;
		border-style: outset;
		padding: 0 4px;
		background-color: #ffdce5;
	}

	.redirect a:hover {
		color: #000;
		border-color: #febcce;
		border-style: inset;
	}
	
	/*for the ones in the info box on the homepage*/
	/*also used on the archive page*/
	#info-redirect {
		margin-left: 50%;
	}

/* cast pg */
.cast-img {
max-width: 400px;
height: auto;
}

/*IT'S TIME FOR THE MOBILE EXPERIENCE
GOOD LUCK AND GODSPEED */

/* little, for phones in portrait */
@media only screen and (max-width: 600px) {
	/*home page*/
	  .title a img {
	   width: 100%; 
	  }
	.sidebar-sm {
		width: 100%;
		padding-top: 0px;
	}
	.sidebar-title {
	display: inline;
	}
	.sidebar-title li {
	display: inline-block;
	}
	.sidebar-lg {
	width: 100%;
	}
	.news-bar {
	width: 80px;
	}
	.footcenter {
		display: none;
	}
	/*chapter pages*/
	.comic img {
		width: 100%;
	}
	.acdrop img {
		width: 100%;
	}
	/*archive*/
	.arc-labels a img {
		width: 40%;
	}
	.archive-links {
		columns: 1;
	}
	#info-redirect {
		margin-left: 0;
	}
	/*about*/
	.about-story {
		float: none;
		width: 100%;
	}
	.about-artist {
		float: none;
		margin: auto;
	}
	/*cast*/
	.cartridge img {
		width: 40%;
	}
	.cartridge-coda, .cartridge-liren {
		background-size: 100% auto;
	}
	.cartridge-info {
		width: 40%;
	}
	.cartridge-coda:active, .cartridge-liren:active  {
	background-position: center bottom; 
	}
	.extra-left {
		width: 100%;
		float: none;
	}
	.extra-right {
		width: 100%;
		float: none;
		padding-left: 0px;
	}
	.td-gallery {
		background-position: right center;
	}
}










</pre></body></html>